Phone Catalog 📱 — DEMO LINK

🎨 Design Reference

This project is based on the Figma design 🎨

🛠 Technologies Used:

• React
• JavaScript
• TypeScript
• HTML (markup)
• CSS:
  • Flexbox
  • Grid
  • BEM methodology
  • Media queries
• SCSS preprocessor:
  • @mixin
  • @for loop
  • @extend
  • Placeholders

⚙ How to Set Up the Project Locally:

1. Clone the repository: git clone https://github.com/JulyaPetrovskaya/phone-catalog.git
2. Install dependencies: npm install
3. Run the project locally: npm start

✨ Features:

• Responsive Design: Optimized for different screen sizes (480px, 768px, 1024px, 1440px)
• Navigation: Uses react-router-dom for multi-page navigation and URL-based search parameters preservation
• Favorites & Cart: Add products to favorites or shopping cart with total price calculation
• Product Filtering: Filter products by capacity and color within product cards
• Sorting: Sort products by year, price, or alphabetically
• Search: Filter products using query parameters
• Pagination: Navigate large product lists with options to choose items per page
• Scroll to Top Button: Quickly return to the top of the page
• Loader: Displays loading indicator for better UX