This is a solution to the Browser extensions manager UI challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- Toggle extensions between active and inactive states
- Filter active and inactive extensions
- Remove extensions from the list with confirmation dialog
- Switch between light and dark color themes
- 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
- Solution URL: GitHub repository
- Live Site URL: Vercel
- React 19 - Latest React version with modern features
- TypeScript - For type safety and better development experience
- Vite - Fast build tool and development server
- CSS Modules - For component-scoped styling
- CSS Custom Properties - For theming and design system
- CSS Container Queries - For responsive design
- Semantic HTML5 - Accessible and meaningful markup
- CSS Grid & Flexbox - Modern layout techniques
- Mobile-first workflow - Progressive enhancement approach
- Light/Dark mode toggle with system preference detection
- Smooth theme transitions with CSS custom properties
- Color scheme persistence across sessions
- Filter Extensions: All, Active, or Inactive states
- Toggle Status: Enable/disable extensions with visual feedback
- Remove Extensions: Confirmation dialog prevents accidental deletion
- Real-time Updates: State management with React hooks
- Mobile-first approach (320px - desktop)
- Flexible grid layout that adapts to content
- Touch-friendly interface elements
- Accessible navigation
- Keyboard navigation support
- Focus management
- High contrast support
- Semantic HTML structure
src/
├── components/ # Reusable UI components
│ ├── Button/ # Generic button component
│ ├── Card/ # Extension card with actions
│ ├── CheckButton/ # Toggle switch component
│ ├── Contact/ # Footer contact links
│ ├── ExtensionFilter/ # Filter radio buttons
│ ├── ExtensionList/ # Grid of extension cards
│ ├── HeaderBar/ # App header with logo and theme toggle
│ ├── Icon/ # App logo component
│ └── ToggleButton/ # Theme switcher
├── containers/ # Page-level components
│ └── Extensions/ # Main extensions container
├── hooks/ # Custom React hooks
│ └── useExtensions.ts # Extension state management
├── types/ # TypeScript type definitions
│ └── index.ts # Shared interfaces and types
├── data/ # Static data
│ └── data.json # Extensions dataset
└── assets/ # Static assets
├── css/ # Global styles and reset
├── fonts/ # Noto Sans font family
└── images/ # Icons and logos
// Custom hook for state management and business logic
export const useExtensions = () => {
const [data, setData] = useState<Extension[]>(jsonData)
const [currentFilter, setCurrentFilter] = useState<FilterType>('All')
const filteredData = useMemo(() => {
switch (currentFilter) {
case 'Active': return data.filter(ext => ext.isActive)
case 'Inactive': return data.filter(ext => !ext.isActive)
default: return data
}
}, [data, currentFilter])
// ... rest of hook logic
}/* CSS Custom Properties for theming */
:root {
color-scheme: light dark;
--background-color: light-dark(#ebf2fc, #040918);
--text-color: light-dark(var(--neutral-600), var(--neutral-300));
}
/* Responsive grid with CSS Grid */
.extensionGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}// Strongly typed interfaces for better development
export interface Extension {
logo: string;
name: string;
description: string;
isActive: boolean;
}
export type FilterType = 'All' | 'Active' | 'Inactive'// Native HTML dialog for confirmation modals
const openDialog = () => {
const dialog = document.getElementById(dialogId) as HTMLDialogElement;
if (dialog) {
dialog.showModal();
}
};Areas for future enhancement:
- Data Persistence: Local storage or API integration
- Search Functionality: Filter extensions by name/description
- Analytics: Usage statistics and performance metrics
- Animation: Framer Motion for enhanced UX
- Testing: Unit and integration tests with Vitest
- Extension Categories: Grouping and sorting capabilities
- CSS Custom Properties Guide - Essential for the theming system
- React Hook Patterns - For creating the useExtensions hook
- CSS Grid Complete Guide - For responsive layouts
- Dialog Element - Native modal implementation
- Accessibility Guidelines - WCAG compliance reference
- Frontend Mentor: HaDo Dev
- LinkedIn: Hamza C. Doukkali
- GitHub: HaDo Dev
- Email: Gmail
- Node.js (v18 or higher)
- npm, yarn, or pnpm
-
Clone the repository
git clone https://github.com/hadodev/browser-extensions-manager.git cd browser-extensions-manager -
Install dependencies
npm install # or yarn install # or pnpm install
-
Start development server
npm run dev # or yarn dev # or pnpm dev
-
Build for production
npm run build # or yarn build # or pnpm build
-
Preview production build
npm run preview # or yarn preview # or pnpm preview
- Development server: Runs on
http://localhost:5173
Challenge by Frontend Mentor | Coded by HaDo Dev 🚀