React + TypeScript + Vite: Phone catalog

• Figma design of the app

🚀 Demo

• Click here to view the demo

📖 Description

Fully responsive phone catalog built with React, featuring a shopping cart and a favorites page. The application allows to browse through a catalog of phones, add items to the cart, and mark favorite products for easy access. The UI is designed based on a Figma mockup. The app leverages React hooks and libraries to provide smooth functionality, including real-time search with debounce, custom infinite carousel, and state management with context and local storage.

🛠️ Technologies Used

⚙️ Features

• 📱 Responsive web design
• ⚡️ Custom Infinity Carousel (Slider)
• 📄 Product Pagination
• 🗂️ Filtering Options
• 🔍 Product Search with Debounce
• ✅ Valid HTML5 & CSS3
• 🌐 Semantic Markup

📂 Project Structure

├── public
│   ├── index.html
│   └── ...
├── src
│   ├── components
│   │   ├── Carousel.js
│   │   ├── ProductCard.js
│   │   ├── ...
│   ├── pages
│   │   ├── Catalog.js
│   │   ├── Cart.js
│   │   └── ...
│   ├── hooks
│   │   ├── useDebounce.js
│   │   └── ...
│   ├── context
│   │   ├── CartContext.js
│   │   └── ...
│   ├── App.js
│   ├── index.js
│   └── ...
└── package.json

🔧 Installation and Setup

1. Clone the repository to your local machine:

   git clone https://github.com/vbuldenko/Phone-catalog.git

2. Navigate to the project directory:

   cd Phone-catalog

3. Install the dependencies:

   npm install

4. Start the project:

   npm run dev

5. Open your browser and go to http://localhost:5173 to view the project.

📚 Documentation

React Hooks Used

• useState
• useContext
• useEffect
• useCallback
• useMemo
• useRef
• useSearchParams
• useParams

Additional Libraries

• React Router
• Local Storage (for cart and favorites)
• Debounce (for product search) """