This project is built using Vite along with React Router for routing, embracing modern React patterns with Hooks & Contexts for state management.
To install dependencies, run:
yarn installTo launch the application, run:
yarn run devThis project makes use of the following libraries:
- React Query: for server state management in React.
- Tailwind CSS: for a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
- Heroicons: for beautifully hand-crafted SVG icons.
Check out the live demo here, deployed at Netlify :)
- For React Query documentation, visit TanStack Query.
- For Tailwind CSS documentation, visit Tailwind CSS.
- List products showing Image, Title and Product Type. Required.
- Display amount of results retrieved. Required.
- Select products view between grid and list for the main display area. Required.
- Filter products by Product Type. Required.
- Filter products by Price Range. Optional.
- Sort results: A-Z, Price: High to Low, Price: Low to High. Optional.
- Improves UX/UI to be more professional
- Improve responsive design
- Implement loading states across the application.
- Handle errors gracefully and inform the user accordingly.
- Add tests to ensure reliability and prevent regressions.
- Further decouple components for better maintainability and reusability.