Nice Gadgets Store 🛍️

An elegant online store for lovers of modern technology, designed in two themes: white and black, with a carefully selected selection of Apple smartphones, accessories, and devices. Built with React and TypeScript, this project showcases dynamic routing, responsive design, and smooth UI transitions. All product data is fetched from preloaded JSON files, ensuring fast performance and easy scalability.

Live Preview

Live website: Nice Gadgets Store

Technologies Used 💻

Core

• HTML5 (v7.0.3) – Page structure and layout
• SCSS (v7.0.3) – Modular and responsive styling
• JavaScript (ES6+) - UI logic and interactivity
• React (v18.3.1) – Component-based architecture for dynamic storefront and routing
• TypeScript (v5.2.2) – Typed data and safer development

State & Routing

• React Router DOM (v6.25.1) – Navigation
• React Dropdown (v1.11.0) – Custom select menus
• React Swipeable (v7.0.2) – Touch gestures
• React Responsive (v10.0.1) – Media queries
• React Transition Group (v4.4.5) – Animations
• React Rewards (v2.1.0) – Micro-interactions

UI/UX Enhancements

• Swiper (v12.0.3) – Image sliders

Development & Deployment

• Vite (v5.3.1) – Build tool
• ESLint (v8.57.0) - Code quality
• Prettier (v3.3.2) - Code quality
• Stylelint (v16.7.0) – SCSS linting
• GitHub - Hosting and deployment

Features

• Responsive Design
  Optimized for various screen sizes, with breakpoints at 320px, 640px, 1200px, and 1440px.

• Navigation
  Uses react-router-dom for seamless page transitions and preserving URL-based search parameters.

• Favorites & Cart
  Allows users to add products to favorites or cart, with automatic total price calculation.

• Product Filtering
  Enables filtering by category, capacity and color within the product catalog.

• Sorting
  Products can be sorted by year, price, or alphabetically.

• Pagination
  Displays large product lists with customizable items per page and visible page count.

• Sticky Header
  Keeps the header fixed during scrolling for better navigation.

• Scroll to Top Button
  Lets users quickly return to the top of the page.

• Theme Toggle Supports switching between light and dark themes for improved accessibility and user preference.

• Loader
  Shows loading indicators to improve user experience during data fetches.

Getting started

Follow these steps to set up the project locally:

1. Clone the repository

git clone https://github.com/kifont/Nice-Gadgets-store.git
cd Nice-Gadgets-store

2. Install dependencies

npm install
# or
yarn install

3. Run the project locally

npm start
# or
yarn start

The game will launch in your default browser at http://localhost:PORT.