Creating a full-stack AI based calorie/nutrition tracker in just rs using Supabase & Lovable

TL;DR

This blog is a short tutorial/how-to on how you can use Supabase & Lovable to create full-stack apps within hours instead of days! I created a full-stack AI based calorie/nutrition tracker app using these tools in just 8 hours and I'll be showing the "how" here in this blog.

The Idea

I've been thinking of building an AI based calorie tracker app for long for myself since I use LLMs like Claude and ChatGPT a lot to use natural language for tracking my daily meals, calories, and their macros. But as a developer I knew I could make the whole process easier and better and Munchwise does exactly that.
Munchwise creates personalised goals for you based on your personal information and then lets you track your meals using natural human language along with complete daily/weekly analytics!

Features & Tech Stack

Features -

• Create account and get personalised goals for calorie/nutrition
• Track meals and their calories/macros using natural human language
• View dedicated daily/weekly analytics

Tech stack -

• Supabase - Auth, Database, Edge functions
• Vite & React - Framework, Build tool
• Tailwind CSS - Styling
• Lovable - Code generation

Creating the Frontend

PS: Before you start you should head over to Lovable and create a new account!

For frontend, I used Lovable to create a minimal working UI and get a basic wireframe for the app which I could build upon and Lovable didn't disappoint me at all. The initial design I got from Lovable was good enough to start working on the backend and then I could improve and change the UI however I want myself. Here is what it looked like in the first iteration -

After this my main focus was to build out the basic UI for all the pages, and using some more prompts like this -

After a few more prompts, the final UI made by lovable looked like this -

As you can see, the UI already looks pretty nice without me writing any code! I did remove the sidebar in the final iterations and decided to go with top navbar on all the pages though.

Integrating Supabase

The backend/API integration has always been complex for me being a full-stack engineer since I don't over-engineer my frontend. So, Lovable being able to do almost 80% of the backend task by itself was just amazing.
All you have to do is click on the Supabase button on the top right corner of the Lovable page and then you can connect your Supabase account to lovable. Once connected, you need to use prompting again to create the Table schema, Auth, RLS policies, and Edge functions as required by you.
But first you will need to create a Supabase account if you don't already have one by heading over to https://supabase.com -

1. Create account using Github/Email on Supabase
2. Once on dashboard click on New project and then create a new project.
3. Once you have created the project, you can get back to Lovable and then connect your Supabase account and choose the project you created to connect with it.

As you can see, Lovable created the required tables along with their schema, and the required Edge functions in my Supabase project and then once I approved the changes it ran the migration!

Adding AI Superpowers

The app relies on AI completions to convert natural human language to the meal's calorific and nutritional data. I used TogetherAI's API for this part and Lovable once again knew exactly what to do! I just asked it to use Together AI for the AI part and it asked me for my API key and it was done!

You can get your own Together AI API key by creating a free account, you will need a credit cards to add more credits though.

And with this, all of the app's basic functionalities were ready from Authentication to Onboarding of user to Meal tracking and analytics without any code written by me, yet.

Finishing up the app

Now that the app was ready, the only thing I had to do was to fix some UI related issues here and there and some backend issues as well (mostly related TogetherAI's API). I worked on the app for a few more hours debugging and fixing things and here's what the app looks like now -

Pretty neat right? And I'm not joking when I say that this app was made in just 8 hours, what we can achieve using AI these days is unimaginable and if you're not using it by now, you're really missing out!

Links

Github - https://github.com/asrvd/munchwise
Supabase - https://supabase.com
Lovable - https://lovable.dev

Thanks a lot for reading!

The above is the detailed content of Creating a full-stack AI based calorie/nutrition tracker in just rs using Supabase & Lovable. For more information, please follow other related articles on the PHP Chinese website!