-
-
Home page
-
Shop Page
-
Inspiration
What it does
NutriPass enables users to search for grocery items and filter out products that contain specific undesired ingredients. By entering a search query and listing ingredients they want to avoid, users receive a curated list of safe and suitable products, making shopping quicker and safer for those with dietary concerns.
How we built it
Backend: I used Flask and Python to build the backend, where a custom web scraper collects product information from Walmart, including ingredient lists and prices. Frontend: The frontend was built with React, allowing users to interact with NutriPass by inputting search queries and dietary preferences. The results are displayed in visually organized cards, using dynamically styled components for an intuitive interface.
Challenges we ran into
Data Retrieval: Developing a reliable web scraper and dealing with dynamic site structures, including frequent changes to HTML layouts, was challenging. I had tried to use scrapy but later on switched to using beautifulsoup. Ingredient Matching: Accurately filtering ingredients was complex, especially with varied ingredient naming conventions. It required careful parsing to ensure words like "caramel" were accurately detected even within larger ingredient lists. CORS Issues: Configuring CORS settings between the React frontend and Flask backend to enable smooth communication required extra effort to resolve. Walmart API: I initially planned on utilizing the Walmart API to search for products, but the process turned out to be very extensive for the time frame that I had. So I resorted to using another web scrapper.
Accomplishments that we're proud of
End-to-End Functionality: This was my first time working with both front and back end and succeeded! Effective Ingredient Filtering: Building a reliable filter that helps users avoid unwanted ingredients, making the product usable for those with specific dietary requirements.
What we learned
Web Scraping Techniques: I was able to work with two types of web scrappers, scrapy and beautiful soup. Frontend-Backend Integration: Gained valuable experience in handling CORS, API calls, and data flow between frontend and backend services.
What's next for NutriPass
Allergen Profiles: Implementing user-specific profiles where users can save common ingredients they wish to avoid, making each session quicker and more personalized. Mobile App: Creating a mobile application to make NutriPass accessible on-the-go, providing even more convenience for users with dietary needs.
Log in or sign up for Devpost to join the conversation.