Frontend Mentor - Browser extensions manager UI solution

This is a solution to the Browser extensions manager UI challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The Extension Dashboard is a responsive, dynamic web application built using Angular and Tailwind CSS, designed to showcase and manage a curated list of browser extensions. The interface allows users to seamlessly filter, view, and interact with extension cards in a modern, dark-mode friendly UI.

The challenge

Users should be able to:

• Toggle extensions between active and inactive states
• Filter active and inactive extensions
• Remove extensions from the list
• Select their color theme
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Screenshot

Links

• Solution URL: Solution URL=
• Live Site URL: Live Site URL

My process

Built with

• Semantic HTML5 markup
• Tailwind CSS v4 custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Reactive Data Flow through immutable updates and proper tracking with trackBy
• Angular 17+ - used standalone components and control flow syntax
• Tailwind css - for utility-first, responsive styling

What I learned

Using tailwind css for dynamic theming and integrating with angular.

<button [class.active]="selectedIndex === $index" (click)="onPillBtnClick($index)">{{btn}}/></button>

setting dark active and active class for theming with Tailwind.

@custom-variant active (&:where(.active, .active *));
@custom-variant dark-active (&:where(.dark.active, .dark.active *, .dark .active, .dark .active *));

Deploying with netlify

[build];
command = "npm run build";
publish = "dist/extension-manager-angular/browser";

Continued development

Future development of the Extension Dashboard will focus on enhancing interactivity, accessibility, and scalability. Key areas include:

• Persistent State Management: Store user changes locally or integrate with backend services for long-term state retention.
• Search and Tagging: Implement search input and advanced filters to improve discoverability.
• Animations & Transitions: Improve visual flow with Angular animations for card entry/removal.
• Unit & Integration Testing: Expand test coverage to ensure stability and reliability.
• Backend Integration: Prepare for API connectivity to support real-time data updates and centralized extension management.

These improvements aim to evolve the project into a production-ready, extensible interface suitable for both local and cloud-based use cases.

Useful resources

• Tailwind documentation - This helped me for understanding and using tailwind classes.

Author

• Website - Priyanshu Paul
• Frontend Mentor - @PriyanshuPaul