This project is a fully functional Apple product catalog created with React and TypeScript. It provides a user-friendly interface for browsing and purchasing Apple products, including iPhones, iPads, and Apple Watches. Key features include pagination, sorting, product sliders, and different pages for catalog browsing, favorites, and a shopping cart.
- Product Catalog with pagination for easy browsing of multiple products
- Sorting options to arrange products by various criteria
- Product Sliders to showcase featured products in a visually engaging way
- Favorites page to view saved products
- Shopping Cart page with functionality to add or remove products
- Responsive Design to ensure compatibility with mobile, tablet, and desktop devices
- React – for building UI components and managing the user interface
- TypeScript – for adding static typing and improving code quality and readability
- React Router – for navigation between different pages (Home, Catalog, Favorites, Cart)
- Redux Toolkit – for managing application state, including cart and favorites
- SASS (with BEM) – for enhanced styling with organized, modular CSS using the BEM methodology
- React-Slick and Slick Carousel – for implementing sliders to showcase products
- React-Paginate – for managing pagination in the product catalog
- Classnames – for dynamic class management
- React Loading Skeleton – for creating loading placeholders while data is being fetched
The project follows a modular structure, with well-defined components and separate Redux slices for managing product data, cart, and favorites. BEM methodology is used for CSS classes, ensuring clear and maintainable styles. TypeScript enhances code quality by enabling type checking, making the project more reliable and easier to debug.
To set up and run the project locally, follow these steps:
- Clone the repository.
- Navigate to the project directory.
- Install dependencies by running
npm install - Start the project
npm start