• 

  Sample Screenshot

HeaFood

Inspiration

Many students and calories-conscious households want to eat healthier but struggle to track calories and plan meals. This Project make it simple and interactive to discover healthy recipes tailored to your calorie goals, all from a lightweight web app.

What it does

HeaFood lets users:

• Input minimum and maximum calorie goals
  
• Get healthy recipe recommendations that fit their range
  
• See recipe images, titles,and calorie information
  

How we built it

• Frontend: HTML, CSS, JavaScript
• API Integration: Spoonacular API (for recipe recommendations)
  
• Design: Responsive, card-based layout for recipes
  
• Input validation ensures calories are within reasonable ranges before fetching recipes
  

Challenges we ran into

• Handling API response errors and unexpected data structures
  
• Designing a simple and responsive layout that works on both desktop and mobile
  
• Time constraints meant we focused on calories first and then other features

Accomplishments that we're proud of

• Built a fully functional frontend that interacts with a real API
  
• Implemented input validation and user-friendly alerts
  
• Created a visually appealing and responsive UI in a short time
  

What we learned

• How to fetch and display data dynamically using JavaScript
  
• Best practices for frontend input validation
  
• How to structure a hackathon project for rapid prototyping
  

What's next for HeaFood

• Integrate budget-based recommendations using API data or estimations
  
• Deploy the backend to handle secure API calls
  
• Add filters for dietary needs like vegetarian, vegan, or gluten-free
  
• Improve UI/UX and allow users to save favorite recipes
  

Built With

• api
• css
• html
• javascript