📌 About the Project
A modern and responsive product catalog web application that allows users to seamlessly browse and search for phones, tablets, and accessories. Built with a strong emphasis on high performance, scalable architecture, and a clean UI/UX.
🔗 Live Demo: Product Catalog Frontend
This is a modern e-commerce application featuring:
- Comprehensive Product Catalog: Browse phones, tablets, and accessories.
- Shopping Cart: Add, remove, and manage items before checkout.
- Favorites List: Save items for later.
- Detailed Views: Dedicated product detail pages with full specifications.
- Responsive Design: Fully optimized for desktop, tablet, and mobile devices.
- React 19: UI library
- TypeScript: Static type checking
- Vite: Fast build tool and development server
- React Router: Client-side routing
- CSS Modules (SCSS): Component-scoped, maintainable styling
- ESLint: Code linting (plugins for React, TypeScript, a11y, imports)
- Prettier: Consistent code formatting
- Husky: Git pre-commit hooks
- lint-staged: Runs linters only on staged files
- Node.js: v20.x or higher
- npm: Package manager
TypeScript
interface Product {
id: string; // Unique identifier
name: string; // Full product name
image: string; // Relative path to image
price: number; // Current selling price
fullPrice: number; // Original price (used to calculate discount)
year: number; // Release year (for "Newest" sorting)
capacity: string; // Storage capacity (e.g., "64GB")
color: string; // Device color (e.g., "Space Gray")
}- Clone the repository
git clone [https://github.com/product-catalog-frontend/product-catalog-frontend.git](https://github.com/product-catalog-frontend/product-catalog-frontend.git) cd product-catalog-frontend - Install dependencies
npm installStart the development server:
npm run dev📍 The application will be available at http://localhost:5173