https://github.com/vbuldenko/phone-catalog

Fully responsive phone catalog SPA built with React, featuring a shopping cart and a favorites page.
https://github.com/vbuldenko/phone-catalog

custom-slider filtering html-css-javascript localstorage pagination react react-context react-router sass typescript

Last synced: 2 months ago
JSON representation

Fully responsive phone catalog SPA built with React, featuring a shopping cart and a favorites page.

• Host: GitHub
• URL: https://github.com/vbuldenko/phone-catalog
• Owner: vbuldenko
• Created: 2024-08-13T18:45:38.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2025-02-03T10:29:27.000Z (over 1 year ago)
• Last Synced: 2025-03-03T07:17:02.194Z (over 1 year ago)
• Topics: custom-slider, filtering, html-css-javascript, localstorage, pagination, react, react-context, react-router, sass, typescript
• Language: TypeScript
• Homepage: https://vbuldenko.github.io/react_phone-catalog/
• Size: 11.7 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# React + TypeScript + Vite: Phone catalog

- [Preview](https://vbuldenko.github.io/react_phone-catalog/)

- [Mockup]()

## 📖 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

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)

![SCSS](https://img.shields.io/badge/SCSS-hotpink.svg?style=for-the-badge&logo=SASS&logoColor=white)

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)

![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)

![Figma](https://img.shields.io/badge/figma-%23F24E1E.svg?style=for-the-badge&logo=figma&logoColor=white)

## ⚙️ Features

- 📱 Responsive web design

- ⚡️ Custom Infinity Carousel (Slider)

- 📄 Product Pagination

- 🗂️ Filtering Options

- 🔍 Product Search

## 🔧 Installation and Setup

1. Clone the repository to your local machine:

   ```bash

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

   ```

2. Navigate to the project directory:

   ```bash

   cd Phone-catalog

   ```

3. Install the dependencies:

   ```bash

   npm install

   ```

4. Start the project:

   ```bash

   npm run dev

   ```

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