This is a modern gadgets online store developed as a Single Page Application (SPA). The project provides users with a convenient way to browse, select, and order modern electronics.
Demo link: https://ANDRIYTS1234.github.io/phone_shop/
The "Nice Gadgets" project is a full-featured marketplace for gadgets. The main goal of the project is to create a fast and intuitive interface for electronics buyers. Users can browse the product range, add items to the cart or favorites list, and study the detailed characteristics of each model.
The application works based on the React component approach and uses client-side routing for instant navigation between pages without reloading.
Key features:
- Home page with dynamic banners and sliders of popular products.
- Full product catalog divided into categories: smartphones, tablets, and accessories.
- Advanced filtering and sorting system by price, name, and release date.
- Pagination for convenient viewing of a large number of products.
- Product details page with technical specifications and an interactive gallery.
- Cart management system: adding products, changing quantity, and automatic cost calculation.
- Ability to save products to the "Favorites" list.
- Responsive layout ensuring correct display on any device (mobile, tablet, desktop).
The project is developed using modern frontend development tools:
- React 18 — the main library for building the interface.
- TypeScript — to ensure code reliability through strict typing.
- Redux Toolkit — for efficient state management of the cart and favorites list.
- React Router v6 — for organizing navigation in the application.
- Sass (SCSS) using modules — for styling and component style isolation.
- Bulma — a CSS framework for basic structural elements.
- Vite — a fast build tool for the project.
- ESLint and Prettier — to maintain code cleanliness and a unified style.
To run the project on your local computer, follow these steps:
-
Clone the repository: git clone https://github.com/your-username/your-repository-name.git
-
Go to the project folder: cd your-repository-name
-
Install the necessary dependencies: npm install
-
Run the project in development mode: npm start
After executing these commands, the project will be available at http://localhost:3000.
- npm start — launches the local development server.
- npm run build — creates an optimized production build.
- npm run lint — checks the code for compliance with quality standards.
- npm run format — automatic code formatting.
- npm run deploy — publishes the current version of the project to GitHub Pages.