Nice-gadgets — a modern React + TypeScript

Web page for showcasing and selling Apple devices. 🎨 View Figma design

🚀 Live Demo

Technologies Used 💻

Core

• React (v18.3.1) – UI framework
• TypeScript – Type safety

Styling

• Bulma (v1.0.1) – CSS framework
• Font Awesome (v6.5.2) – Icons
• classnames (v2.5.1) – Conditional class management

UI/UX

• embla-carousel-react (v8.6.0) – Product carousels
• react-transition-group (v4.4.5) – Animations and transitions

Routing

• react-router-dom (v6.25.1) – Client-side routing

Getting Started

Clone the repository:

• git clone https://github.com/Taipan-4ik/Apple-catalog.git
• cd Apple-catalog

Install dependencies:

• npm install (or yarn install)

Run the project locally:

• npm start (or yarn start)

Features

• Responsive Design: optimized for different screen sizes nd devices, responses on width 320px, 640px, 1200px.
• 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 criterias: year, price, alphabeticaly.
• 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.