Project

Create a single-page application (SPA) that displays a list of products retrieved from https://mock.shop/ (graphQL API). The application should allow users to view product details, filter products by category, and add products to a shopping cart.

Technical Requirements:

1. Use React/Svelte, Tailwind, and Typescript.
2. Implement FSD architecture.
3. Fetch product data from the provided API endpoint.
4. Display products in a grid or list format with relevant information (e.g., name, price, image).
5. Implement product filtering by category using a dropdown or clickable category links.
6. Add pagination or infinite scrolling to the product list.
7. Create a product details page that displays more information about a selected product.
8. Implement a shopping cart functionality that allows users to add and remove products.
9. Implement a search functionality to allow users to search for products by name or description.
10. Use version control (e.g., Git) throughout the development process, ensuring atomic and conventional commits.
11. Implement global state management using Context API or a state management library like Redux or Zustand.
12. Add advanced filtering options (e.g., price range) and sorting options (e.g., price).
13. Persist shopping cart state using local storage.
14. Optimize the application for performance (e.g., lazy loading, code splitting, memoization).
15. Ensure accessibility (ARIA roles, keyboard navigation) and improve user experience with animations and transitions using libraries like Framer Motion.
16. Set up a CI/CD pipeline using GitHub Actions, GitLab CI, or another CI/CD tool.
17. Implement comprehensive error handling and user feedback (e.g., toast notifications using libraries like React-Toastify).