Phone Catalog

A modern e-commerce phone catalog application built with React and TypeScript. Browse through a curated collection of phones, tablets, and accessories with advanced filtering, sorting, and shopping cart functionality.

Live Preview

View the application

⚠️ Note: Make sure to test the link in incognito mode to ensure it's publicly accessible.

Technologies Used

• React 18
• TypeScript
• React Router - Client-side routing
• SCSS/CSS Modules - Styling
• Vite - Build tool and dev server
• ESLint - Code linting
• Prettier - Code formatting
• Stylelint - Style linting

Getting Started

Follow these instructions to set up and run the project locally:

1. Clone the repository:

git clone https://github.com/Korochenko/phone-catalog.git
cd phone-catalog

2. Install dependencies:

npm install
# or
yarn install

3. Run the project locally:

npm start
# or
yarn start

The application will be available at http://localhost:5173 (or the port specified by Vite).

4. Build for production:

npm run build
# or
yarn build

Features

• Product Catalog - Browse phones, tablets, and accessories with detailed information
• Advanced Filtering - Filter products by category, brand, and specifications
• Sorting Options - Sort by price, name, or newest items
• Shopping Cart - Add products to cart and manage quantities
• Favorites - Save products to your favorites list
• Product Search - Quick search functionality to find products
• Responsive Design - Optimized for desktop, tablet, and mobile devices
• Smooth Navigation - Fast client-side routing with React Router
• TypeScript - Type-safe code for better development experience

Project Structure

phone-catalog/
├── public/
│   └── assets/
├── src/
│   ├── components/
│   ├── pages/
│   ├── styles/
│   ├── types/
│   ├── utils/
│   ├── App.tsx
│   └── main.tsx
├── .eslintrc.cjs
├── .prettierrc
├── .stylelintrc.js
├── package.json
├── tsconfig.json
└── vite.config.ts

Available Scripts

• npm start - Run development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint
• npm run format - Format code with Prettier
• npm run deploy - Deploy to GitHub Pages

---