React Settings Page

A pixel-accurate, responsive settings page implemented in React based on provided mockups. It demonstrates modern React patterns, accessible UI primitives, themeing with CSS variables and Tailwind CSS, and a clean component architecture.

View Demo: https://my-settings-page.netlify.app/

Features Implemented

• Pixel-accurate UI: Layout, spacing, and typography closely match the mock design.
• Responsive design: Scales cleanly from mobile to desktop.
• Light/Dark theme toggle: Uses a header switch to toggle between light and dark modes.
• Email list: Displays primary/verified states with badges and dropdown menu to manage/delete emails.
• Email settings: Configurable default and backup email selects, and privacy switch.

Tech Stack and Rationale

• React 19: Modern, declarative UI library for building interactive and composable components.
• TypeScript: Ensures strong typing for props, state, and domain models, reducing runtime errors.
• Vite: Lightning-fast development builds with optimized bundling (simplifies setup for unit tests via Vitest in future).
• Tailwind CSS v4: Utility-first styling framework leveraging design tokens via CSS custom properties, enabling rapid, consistent UI development.
• Radix UI primitives (@radix-ui/react-*): Accessible, unstyled building blocks for complex UI elements (buttons, menus, selects, switches, etc.), giving full design flexibility.
• Class Variance Authority (CVA): Manage component variants and styling combinations in a type-safe and reusable way.
• Lucide React: Lightweight, modern SVG icon library for clean, scalable icons.

This combination prioritizes developer productivity, accessibility, performance, and maintainable styling.

File Structure

react-settings-page/
├─ index.html
├─ src/
│  ├─ main.tsx                  # App bootstrap
│  ├─ App.tsx                   # Page layout, theme toggle, composition
│  ├─ index.css                 # Tailwind setup + CSS variables (themes)
│  ├─ lib/
│  │  └─ utils.ts               # Utilities (e.g., className helper)
│  ├─ types/
│  │  └─ email.ts               # Email domain model
│  ├─ components/
│  │  ├─ email-list.tsx         # Email list with badges + actions
│  │  ├─ email-settings.tsx     # Settings cards (selects, switches)
│  │  └─ ui/                    # Primitive UI components (Button, Card, etc.)
│  │     ├─ badge.tsx
│  │     ├─ button.tsx
│  │     ├─ card.tsx
│  │     ├─ dropdown-menu.tsx
│  │     ├─ label.tsx
│  │     ├─ select.tsx
│  │     ├─ separator.tsx
│  │     └─ switch.tsx

Setup Instructions

1. Prerequisites

   • Node.js 18+ (recommended 20+)
   • npm 9+

2. Install dependencies

   npm install

3. Start the dev server

   npm run dev

   Open the URL printed in the terminal (typically http://localhost:5173).

4. Build for production and preview (Optional)

   npm run build && npm run preview

5. Linting codebase (Optional)

   npm run lint

Future Improvements

• Real data & actions: Integrate API calls via REST or GraphQL from a backend service, or mock with MSW during development.
• Persisted preferences: Save theme and other user preferences to localStorage for a consistent experience across sessions.
• Form validation: Add client-side validation using zod or react-hook-form for robust and type-safe forms.
• Testing: Implement unit tests with Vitest + React Testing Library and end-to-end/integration tests with Playwright.
• State management: Introduce Zustand for state management and React Query for data fetching and catching, as the project scales.

Screenshots

Light Mode (Web)

Light Mode with Interaction (Web)

Dark Mode (Web)

Light Mode (Mobile)

Dark Mode (Mobile)