FoodExplorer :

A responsive React.js app to browse food products with nutrition, ingredients, labels, category filtering, infinite scroll, and cart functionality.

Features :

• View products from OpenFoodFacts API
• View product nutrition, labels, and ingredients
• Infinite scroll to load more products
• Search by name or barcode
• Filter by category & sort by name/nutrition
• Add to cart & view cart page (with delete & clear cart)

Tech Stack :

• React.js
• Tailwind CSS
• React Router
• Axios
• React Context API (for cart state)

Methodology :

I used:

• axios to fetch product data
• IntersectionObserver to implement infinite scroll
• React Context API to manage cart globally
• openfoodfacts.org API via allorigins.win proxy to bypass CORS

Time Taken

• Started: July 9, 2025
• Completed: July 12, 2025
• Total time taken: 3 days

Live

• https://ajaypanchal4326.github.io/food-explorer/

Author

• Ajay Panchal – https://www.linkedin.com/in/ajay-panchal-1b9936312