A modern, production-ready e-commerce application built with React, TypeScript, and Tailwind CSS. This project demonstrates advanced frontend development practices, component architecture, and user experience design.

This application showcases a complete e-commerce experience with product browsing, cart management, wishlist functionality, and responsive design. Built with modern web technologies and following industry best practices.

• Product Catalog: Dynamic product listing with pagination and search
• Shopping Cart: Client-side cart management with persistent state
• Wishlist: Save and manage favorite products
• Product Details: Modal-based product expansion with detailed view
• Search & Filter: Real-time product search functionality

• TypeScript: Full type safety and enhanced developer experience
• Responsive Design: Mobile-first approach with Tailwind CSS
• Dark Mode: Complete theme system with persistent preferences
• Performance: Optimized rendering and lazy loading
• Accessibility: WCAG compliant with proper ARIA labels

• Code Quality: ESLint, Prettier, and Husky pre-commit hooks
• Testing: Unit tests with Jest and React Testing Library
• E2E Testing: Playwright for comprehensive testing
• Conventional Commits: Structured commit messages for better collaboration
• Docker: Production-ready containerization

• Frontend Framework: React 19 with TypeScript
• Build Tool: Vite for fast development and optimized builds
• Styling: Tailwind CSS with custom design system
• State Management: React Context API with custom hooks
• Testing: Jest, React Testing Library, Playwright
• Code Quality: ESLint, Prettier, Stylelint
• Deployment: Docker containerization

• Node.js 18+
• npm or yarn package manager

# Clone the repository
git clone <repository-url>
cd frontend-code-challenge

# Install dependencies
npm install

# Start development server
npm run dev

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build

# Code Quality
npm run lint         # Run ESLint
npm run format       # Format code with Prettier
npm run test         # Run unit tests
npm run test:e2e     # Run E2E tests

# Git Hooks
npm run prepare      # Setup Husky hooks

# Build Docker image
docker build -t ecommerce-frontend .

# Run container
docker run -p 3000:3000 ecommerce-frontend

src/
├── components/          # Reusable UI components
│   ├── ProductCard.tsx  # Product display component
│   ├── ProductModal.tsx # Product detail modal
│   ├── CartIcon.tsx     # Shopping cart indicator
│   ├── WishListIcon.tsx # Wishlist indicator
│   ├── SearchBar.tsx    # Search functionality
│   ├── Pagination.tsx   # Page navigation
│   └── DarkModeToggle.tsx # Theme switcher
├── context/             # React Context providers
│   ├── CartContext.tsx  # Shopping cart state
│   └── WishListContext.tsx # Wishlist state
├── hooks/               # Custom React hooks
│   └── useProducts.ts   # Product data fetching
├── pages/               # Page components
│   ├── HomePage.tsx     # Product catalog
│   ├── CartPage.tsx     # Shopping cart
│   └── WishListPage.tsx # Wishlist management
└── __tests__/           # Unit tests

• Primary: Blue (#2563eb) for CTAs and highlights
• Secondary: Gray scale for text and backgrounds
• Accent: Red (#ef4444) for wishlist interactions
• Success: Green (#10b981) for positive actions

• Font Family: Inter (Google Fonts)
• Headings: Bold weights with tight tracking
• Body: Regular weight with optimal line height

• Cards: Rounded corners with subtle shadows
• Buttons: Consistent padding and hover states
• Modals: Backdrop blur with smooth animations
• Icons: Feather Icons for consistency

• Cart State: Persistent cart with quantity tracking
• Wishlist State: Product favoriting with visual feedback
• Theme State: Dark/light mode with localStorage persistence
• Modal State: Product detail modal management

• Lazy Loading: Images with proper loading states
• Memoization: React.memo for expensive components
• Debouncing: Search input optimization
• Virtual Scrolling: Efficient large list rendering

• Keyboard Navigation: Full keyboard support
• Screen Reader: Proper ARIA labels and roles
• Color Contrast: WCAG AA compliant color ratios
• Focus Management: Logical tab order and focus indicators

• Component rendering and interaction tests
• Context provider functionality
• Custom hook behavior validation
• Utility function testing

• User journey testing
• Cross-browser compatibility
• Responsive design validation
• Performance benchmarking

• Components: 90%+ coverage
• Hooks: 100% coverage
• Utilities: 100% coverage

• Mobile: 320px - 768px
• Tablet: 768px - 1024px
• Desktop: 1024px+

• Mobile: 1 column layout
• Tablet: 2-3 column grid
• Desktop: 4 column grid

• Input Validation: Sanitized user inputs
• XSS Prevention: Safe HTML rendering
• CORS Handling: Proper API request headers
• Content Security Policy: Restricted resource loading

npm run build

VITE_API_URL=https://raw.githubusercontent.com/jagaad/frontend-test/main
VITE_APP_NAME=E-Commerce Challenge

• Lighthouse Score: 95+ across all categories
• Bundle Size: < 500KB gzipped
• First Contentful Paint: < 1.5s
• Largest Contentful Paint: < 2.5s

1. Create feature branch from main
2. Implement changes with tests
3. Run linting and formatting
4. Submit pull request with conventional commit

• TypeScript: Strict mode enabled
• ESLint: Airbnb configuration
• Prettier: Consistent code formatting
• Conventional Commits: Structured commit messages

This project is licensed under the MIT License - see the LICENSE file for details.

• Product data provided by Jagaad Frontend Test
• Icons from Feather Icons
• Design inspiration from modern e-commerce platforms