Phone Catalog 📱

A responsive web application showcasing a catalog of phones with search and filter functionality.
Live Demo

---

🚀 Overview

Phone Catalog is a web interface for browsing and filtering smartphones.
The project demonstrates skills in React, JavaScript, HTML and SCSS and organizes data for rendering a list of phones in the browser.

Key features:

• 💡 Browse the phone catalog
• 🔍 Search and filter by parameters
• 📦 Responsive and modern UI

---

🧰 Technologies

This project is built with:

• JavaScript (ES6+)
• React
• HTML5
• CSS3 / SCSS
• Vite

---

📂 Project Structure

phone-catalog/

├── dist/                       # Build output
├── node_modules/               # Node dependencies
├── public/                     # Static files
│   ├── _old/                   # Legacy or backup files
│   ├── api/                    # Static API mocks
│   ├── fonts/                  # Font files
│   └── img/                    # Images
├── src/                        # Source code
│   ├── assets/                 # Images, icons, fonts used in components
│   ├── components/             # Reusable UI components
│   ├── modules/                # Feature modules or page-specific components
│   ├── styles/                 # Global styles, variables, mixins, SCSS
│   ├── types/                  # TypeScript types/interfaces
│   ├── App.tsx                 # Root React component
│   ├── AppHooks.tsx            # Custom hooks for the app
│   ├── index.tsx               # Entry point for React
│   ├── Root.tsx                # Root layout or router wrapper
│   └── services.ts             # API services or utility functions
├── index.html                  # HTML template
├── package.json                # Project dependencies & scripts
├── package-lock.json           # Exact dependency versions
├── tsconfig.json               # TypeScript configuration
├── vite.config.ts              # Vite configuration
├── README.md                   # Project README
├── LICENSE                     # License file
├── .editorconfig               # Editor configuration
├── .eslintrc.js                # ESLint configuration
├── .eslintignore               # ESLint ignore rules
├── .prettierrc                 # Prettier configuration
├── .prettierignore             # Prettier ignore rules
├── .stylelintrc.js             # Stylelint configuration
└── .stylelintignore            # Stylelint ignore rules

🎯 Features

• Browse a catalog of phones with detailed information
• Filter phones by brand, price, or other attributes
• Search functionality for quick access to specific models
• Responsive design for both desktop and mobile devices
• Smooth animations and interactions

🛠 Getting Started

Follow these instructions to get a local copy running.

Prerequisites

• Node.js (>=18.x recommended)
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/sborichevskyi/phone-catalog.git
cd phone-catalog

# Install dependencies
npm install
# or
yarn install

# Run the project locally
npm run dev
# or
yarn dev