Skip to content
Submitted 28 days ago

Responsive Extension UI using Angular 22 | Material | Animations

angular, angular-material, typescript, accessibility, animation
LVL 3
@FerdinandoGeografo
A solution to the Browser extension manager UI challenge

Solution retrospective


What are you most proud of, and what would you do differently next time?

šŸ“Œ I did get real hands-on practice applying a clean, consistent structure that keeps both smart and dumb components thin on business logic. Instead, logic and state live in dedicated store services, built entirely with signal, computed, and effect.

What challenges did you encounter, and how did you overcome them?

šŸ’” One useful lesson that came out while developing this: effect should be the last resort, not the default tool. I reserved it strictly for genuine side effects, and let computed handle every purely derived value.

šŸ’” Angular's animation story has changed significantly in recent versions, moving away from the dedicated @angular/animations package in favor of plain CSS/SCSS, paired with the new animate.enter / animate.leave template API. I used this to add staggered enter animations for the filter buttons and the extension cards, plus a leave animation when removing an extension.

What specific areas of your project would you like help with?

I would love to get some feedbacks from you. Your insights would be incredibly valuable in helping me improve. Here are a few specific areas where I'd appreciate your thoughts:

šŸ“Œ Folder Structure Management:

How effective is the current folder structure? Are there any changes you would suggest to improve organization and maintainability?

šŸ“Œ State Design Management:

What do you think about the design of the state and the way actions are managed? Are there any best practices or improvements you would recommend?

šŸ“Œ SCSS Organization:

How is the SCSS part of the application organized? Do you have any suggestions for better structuring or optimizing the SCSS?

šŸ“Œ Possible Improvements or Suggestions:

Do you have any general feedback or suggestions for improving the solutions I've implemented? Are there any areas where you see potential for enhancement?

Thank you so much for taking the time to review my work. Your feedback is greatly appreciated ā¤ļø.

Happy code to everyone!! 😁

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Ferdinando Geografo’s solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord