Nice Gadgets

Nice Gadgets is a responsive Single Page Application for browsing phones, tablets, and accessories.

The project is built with React, TypeScript, Redux Toolkit, React Router, and SCSS Modules. It provides a complete e-commerce catalog experience with product details, cart, favorites, search, sorting, pagination, localization, theme switching, and responsive navigation.

Live Demo

DEMO LINK

Features

• Responsive design for mobile, tablet, and desktop
• Product catalog for phones, tablets, and accessories
• Product search with URL query parameters
• Sorting and pagination
• Product details pages with:
  • Image gallery
  • Color selection
  • Capacity selection
  • Product specifications
  • About section
  • Suggested products slider
• Shopping cart with:
  • Add and remove products
  • Quantity controls
  • Total price calculation
  • LocalStorage persistence
• Favorites with:
  • Add and remove products
  • Dedicated favorites page
  • Search in favorites
  • LocalStorage persistence
• Breadcrumb navigation
• Responsive banner slider
• Product sliders
• English and Ukrainian localization
• Light and dark themes
• Saved theme and language preferences
• Skeleton loaders and loading states
• Empty states and error states
• Mobile navigation menu
• Automatic scroll to top after route changes
• Client-side routing with React Router

Technologies Used

• React
• TypeScript
• Redux Toolkit
• React Redux
• React Router DOM
• SCSS Modules
• Vite
• HTML5
• LocalStorage
• Git
• GitHub Pages

Getting Started

Clone the repository:

git clone https://github.com/AntonyShaga/nice-gadgets-store.git

Navigate to the project directory:

cd nice-gadgets-store

Install dependencies:

npm install

Run the project locally:

npm start

Main Routes

/
/phones
/tablets
/accessories
/phones/:itemId
/tablets/:itemId
/accessories/:itemId
/favorites
/cart

State Management

Redux Toolkit is used for global application state.

The application stores:

• Shopping cart
• Favorites
• Selected language
• Selected theme

Cart, favorites, language, and theme preferences are persisted in localStorage.

Product Catalog

Catalog pages are reused for phones, tablets, and accessories.

Users can:

• Search products
• Sort products
• Change the number of products per page
• Navigate through pages with pagination
• Open detailed product pages

Catalog state is synchronized with URL query parameters where applicable.

Product Details

Each product page includes:

• Product image gallery
• Available colors
• Available capacities
• Pricing information
• Add to cart action
• Add to favorites action
• Short specifications
• Detailed technical specifications
• Product description
• Suggested products

Themes and Localization

The application supports:

• Light theme
• Dark theme
• System theme detection
• English localization
• Ukrainian localization

User preferences are saved in localStorage.

UI and Navigation

The application includes:

• Breadcrumbs
• Responsive header
• Mobile menu
• Banner slider
• Product sliders
• Skeleton loaders
• Loading states
• Empty states
• Error states
• Automatic scroll restoration between routes

Design

The interface is based on the Mate Academy Product Catalog design and extended with responsive layouts, dark/light themes, localization, additional UI states, and application functionality.

License

This project is licensed under the GNU General Public License v3.0 - see the LICENSE file for details.

Author

Anton Shaga

GitHub: AntonyShaga