Nice Gadgets | Product Catalog

Overview

Nice Gadgets is a modern, responsive e-commerce application for browsing and purchasing electronic devices. Built with React, Redux Toolkit, and TypeScript, the application delivers a smooth shopping experience through fast navigation, intuitive product browsing, and efficient state management.

The project follows modern frontend development practices, featuring reusable components, responsive layouts, client-side routing, and persistent shopping cart and favorites using local storage.

---

Demo

Live Demo: https://wolfymmm.github.io/nice-gadgets/

---

Key Features

• Product Catalog – Browse phones, tablets, and accessories with detailed specifications.
• Product Details – Dedicated product pages with image galleries, available colors, capacities, and technical specifications.
• Category Navigation – Quickly switch between Phones, Tablets, and Accessories.
• Product Slider – Browse Hot Prices and Brand New products using interactive sliders.
• Search Functionality – Instantly search products by name.
• Sorting & Pagination – Sort products by age, name, or price with configurable page size.
• Shopping Cart – Add, remove, and update product quantities with automatic price calculation.
• Favorites – Save products to your wishlist with persistent storage.
• Responsive Design – Optimized for desktop, tablet, and mobile devices.
• Persistent Storage – Cart and favorites remain saved using Local Storage.
• Client-side Routing – Fast navigation without page reloads.

---

Challenges

During development, several technical challenges were addressed:

• Implementing global state management using Redux Toolkit.
• Synchronizing shopping cart and favorites with Local Storage.
• Building reusable UI components for maintainability.
• Implementing efficient filtering, searching, and sorting.
• Creating responsive layouts matching the provided Figma design.
• Optimizing rendering performance and user interactions.
• Handling loading states and invalid routes gracefully.

---

Installation & Setup

Follow these steps to run the project locally.

1. Clone the repository

git clone https://github.com/wolfymmm/nice-gadgets.git

2. Navigate to the project directory

cd nice-gadgets

3. Install dependencies

npm install

4. Start the development server

npm start

5. Build for production

npm run build

---

Technologies Used

This project was built using:

• React – Component-based user interface development.
• TypeScript – Static typing for safer and more maintainable code.
• Redux Toolkit – Global state management.
• React Router – Client-side routing.
• SCSS (Sass) – Modular and maintainable styling.
• Vite – Fast development server and build tool.
• Local Storage API – Persistent cart and favorites.
• ESLint – Code quality and consistency.
• Prettier – Automatic code formatting.
• Git – Version control.
• GitHub – Repository hosting and collaboration.

---

License

This project is licensed under the MIT License. See the LICENSE file for more information.