Gadget Store - Modern electronics design Website This project is easy to use and understand for users. This site provides dozens of phones, tablets and accessories. Also there are Product Cart, where you can place products that you want to buy and Favourites Page where you can store products that you like.
Live DEMO: Expierience the live website: https://Artemida1609.github.io/Gadget_Store/
This site is created usign Figma design, here are the links: Original: https://www.figma.com/file/T5ttF21UnT6RRmCQQaZc6L/Phone-catalog-(V2)-Original Original Dark: https://www.figma.com/file/BUusqCIMAWALqfBahnyIiH/Phone-catalog-(V2)-Original-Dark
Technologies Used: Core
React (v18.2.0) – UI framework TypeScript (v5.0.2) – Type safety SCSS (v7.0.3) – Styling State Management Redux Toolkit (v1.9.5) – Application state Redux Persist (v6.0.0) – State persistence UI/UX React Router (v6.14.2) – Navigation Swiper (v10.0.4) – Image galleries use-react-router-breadcrumbs (v4.0.1) – Navigation breadcrumbs React Loading Skeleton (v3.3.1) – Loading states Development & Deployment Vite (v4.4.5) – Build tool ESLint (v8.45.0) – Code quality Netlify – Hosting and deployment
Features
Responsive Design: Optimized for different screen sizes and devices, responses on width 320px, 640px, 1200px, 1440px. Navigation: react-router-dom library is used in the application to enable navigation between multiple pages, and URL-based search parameters saved when navigating. Favorites & Cart: Adding products to favorites or shopping cart, with total price calculation. Product Filtering: Filter products by capacity and color inside product card. Sorting: Sort products based on criteria: year, price, alphabetically. Pagination: Navigate through large lists of products, opportunity to choose number of items per page, and number of pages depends on this. Sticky Header: Keeps the header visible as you scroll. Scroll to Top Button: Easily return to the top of the page. Loader: Indicates loading status for a better user experience.
How to launch the project:
- Run in terminal "npm i"
- Then run "npm start"
- Here you go, you have project ready to use in browser