NutriLens

Your Guide to Smarter Eating.

Comment

🥗 NutriLens

💡 What Inspired Us

We were inspired by how difficult it is for students and young adults to maintain a healthy diet. Reading food labels is overwhelming, and grocery shopping can feel like a blind guess. So we created NutriLens—a tool that helps users:

  • View detailed nutrition information
  • Build and manage a smart grocery list
  • Receive personalized healthy food tips
  • Track their daily progress visually

“We wanted to simplify healthy living through a fast, user-friendly web app.”

📚 What We Learned

During this project, we learned:

  • How to scaffold and structure a project using Vite for lightning-fast builds
  • Tailwind CSS best practices for responsive, clean UI
  • Using TypeScript to write scalable and maintainable frontend logic
  • Working with localStorage to persist grocery lists and user input
  • Integrating external nutrition APIs and managing missing or inconsistent data
  • How to implement a Dynamic Progress Tracker for user feedback
  • Customizing and extending AI-generated starter templates from bolt.new

🛠️ How We Built It

We started with an AI-generated prototype from bolt.new and then built on top of it using a modern frontend stack. Our project includes:

🔧 Tech Stack

  • Frontend Framework: Vite + TypeScript
  • Styling: Tailwind CSS
  • State & Data Handling: localStorage, modular TypeScript logic
  • API: OpenFoodFacts for nutrition data
  • Dynamic UI: JavaScript for grocery list & progress tracker

🌟 Key Features

  • 🥕 Nutrition Info Search: View food macros (calories, sugar, protein, etc.)
  • 🛒 Smart Grocery List: Add/remove items and save between sessions
  • 🌿 Healthy Eating Tips: Random suggestions for smarter choices
  • 📊 Dynamic Progress Tracker: Visual feedback based on grocery choices
  • 📱 Mobile-Responsive Design: Built with Tailwind for smooth UX

🚧 Challenges We Faced

  • Dealing with incomplete API data from OpenFoodFacts
  • Customizing bolt.new’s base code while keeping performance optimized
  • Debugging state updates while working with localStorage
  • Building a Dynamic Progress Tracker with limited time
  • Ensuring all Tailwind and TypeScript configurations worked smoothly together

Mockup or Screenshot

🎯 Final Thoughts

NutriLens gave us the opportunity to blend AI-based website generation with hands-on full-stack frontend development. We not only learned how to move fast with tools like Vite and Tailwind, but also how to craft something genuinely useful and responsive.

“AI built the shell. We built the soul.”

Next steps:

  • Add barcode scanning
  • Implement user login and progress history
  • Suggest recipes based on grocery items
  • Use AI for smart meal planning

Built With

Share this project:

Updates