MealQuest

Inspiration

The inspiration for this project came from my past self when I was trying to bulk one summer and so I was using a calorie tracker to help me with that. Something that I noticed while I was going through that process was that tracking my calories was extremally boring. It felt like homework. So...

What it does

I build an app that makes calorie tracking more interactive and fun. This is MealQuest, an app that turns calorie tracking into a quest to save a town. The user sets goals for the day, like water intake or protein intake, and the app turns them into quests. Your town is in danger and by completing these quests you help save the town.

How we built it

This was built using vite, react, and typescript. I used vite to set up the start of the project. A css file was created for styling. The google gemini api was used to create the chatbot.

Challenges we ran into

Learning and understanding the basics of react and typescript was a challenge. Working and training the gemini api to give good responses to the user. Because there is no backend nothing would save on my app. This was only a slight issue while testing the app.

Accomplishments that we're proud of

I am proud of creating a clean, functional frontend web app. I'm also proud of using more css to stylize my app and utilizing the gemini api in my build.

What we learned

I learned more about using vite, react, and typescript. I also learned more about using the Gemini api and adding custom personalitys to it. I learned more about styling with css. I also learned how to add images and logos using react tools.

What's next for MealQuest

The next step for meal quest would be to get the app on the web and off my local host. I would set up an actual backend and database probably using supabase or firebase allowing users to create accounts that saves their data, turning this app into a full-stack web app. I would also add a way to scan food by taking a picture of it or importing recipes for more options. I would then update the town and make it look better than my mspaint drawings.

Built With

• css
• gemini-api
• lucide-react
• react
• react-router-dom
• typescript
• vite