A fully-featured React Product Catalog with shopping cart and favorites functionality. This project demonstrates a modern interface with dynamic product listings, sorting, pagination, search, and theme switching.
The project is implemented according to the following designs:
- React (with TypeScript)
- React Router DOM for routing
- React Context for state management
- CSS Modules & SCSS for styling
- ESLint & Prettier for code formatting
- LocalStorage for persisting cart and favorites
- Skeleton Loader
- Theme switching (light/dark)
- Responsive design for mobile and desktop screens
- Image slider with automatic and manual navigation
- "Brand new" block showing newest products by year
- "Shop by category" block: Phones, Tablets, Accessories
- "Hot Prices" block showing products with the biggest discount
- Separate pages for /phones, /tablets, /accessories
- Sorting: Newest, Alphabetical, Cheapest
- Pagination and items-per-page selector
- Product search with debounce and URL sync
- Loader during data fetch, error handling, and empty states
- Product information: images, available colors and capacities
- Technical specifications and description
- "You may also like" block
- Breadcrumbs navigation
- Browser-like Back button
- Add/remove products, manage quantity
- Automatic calculation of total amount and quantity
- Persist cart in LocalStorage
- Modal confirmation for checkout
- Add/remove products to favorites
- Display favorites count in the header
- Persist favorites in LocalStorage
- Light/dark theme switching
- Sticky header with logo, navigation, cart, and favorites
- Footer with GitHub link and "Back to Top" button
- Smooth hover effects and image scaling
- NotFoundPage for unknown URLs
git clone https://github.com/Vall-Re/Phone_Catalogue
cd Phone_Catalogue
Install dependencies
npm install
# or
yarn install
Run the project
npm start
# or
yarn start
The app will be available at http://localhost:3000.