This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
This application is built using React.js and Axios to fetch food product data from the OpenFoodFacts API. It allows users to search, filter, and sort products, with a detailed view for each item. Features:
-
Home Page Display Displays a list of food products fetched from the OpenFoodFacts API, showing product images and names.
-
Search Functionality Users can search for products by name, with results dynamically updated on the home page.
-
Category Filter Users can filter products based on categories like "Snacks", "Drinks", and "Cakes" through a dropdown.
-
Sorting Options The app allows sorting products by name (A-Z, Z-A) and nutrition grade (ascending/descending).
-
Pagination The home page displays a limited number of products per view, with navigation options for the next and previous pages.
-
Product Detail Page Clicking a product leads to a detailed page with its image, ingredients, and nutritional information.
-
Responsive Design Tailwind CSS ensures the app is fully responsive, with a clean layout for both mobile and desktop screens.
-
Equal-Sized Product Cards Products are displayed in a grid of three per row, with evenly spaced and dimensioned cards.
-
Efficient API Handling Axios is used for all API requests, ensuring smooth data fetching and error handling.
-
Interactive UI Hover effects and transition animations improve user interaction, making the app more engaging.
After reading the documentation on 22nd September 2024 it took 3 days to complete the app and deploy for production build.
https://hrithik2211.github.io/Foodle/ Try to click on home button if page shows blank on first time opening.