PHONE CATALOG

Description

This is a React + TypeScript web application that allows users to browse a catalog of products, and add them to the cart and/or favourites. The app utilizes Redux Toolkit for state management and localStorage for user data persistence.

Demo

• Live Preview

Mockup

• Light mode
• Dark mode

Technologies Used

• React 18 - Component-based UI library
• TypeScript - Strongly typed JavaScript
• Redux Toolkit - Simplified state management
• React-Redux - Integration of Redux with React components
• React Router DOM - Declarative routing for navigation
• Embla Carousel - Lightweight and customizable carousel
• SCSS - Advanced styling with nested rules and variables
• ESLint, Prettier, Stylelint - Code linting and formatting
• Vite - Fast and optimized build tool

How to Run the Project Locally

Requirements

• Node.js v20.18.3
• npm v11.1.0
• Git
• Any modern web browser

Installation Steps

1. Clone the repository

   git clone https://github.com/ly-manka/phone-catalog.git

2. Navigate into the project folder

   cd phone-catalog

3. Install dependencies

   npm install

4. Run the project

   npm start

5. Open in Browser

   Once the project is running, open your browser and go to:

   http://localhost:5173/
   

Features

• Light & Dark Mode
• Fully Responsive Design
• Skeleton Loaders & Spinners
• Error Notifications
• Smooth Animations & Transitions
• Breadcrumb Navigation
• Reliable Local Storage Handling
• Favorites Page
• Shopping Cart Page
• Automatically rotating banner that pauses on hover
• Responsive Sliders
• Product Categories & Filtering
• Detailed Product Pages