All projects/App Building

App Building

Build an AI Calorie Tracker App

Build an AI calorie tracker that analyzes food photos, estimates calories and macros, stores meals and supports subscriptions using Claude Code, Next.js, Supabase and Razorpay.

A weekend for v18 steps6 promptsIntermediate
01 · Tools

AI tools you’ll use.

C
Claude CodeWrites the code and runs the terminal for you.
V
VercelDeploys the Next.js app and makes it public.
S
SupabaseThe database, auth and file storage the app talks to.
G
GitHubStores the code and connects the deploy.
R
RazorpayCollects the payment from the buyer.
C
Claude API (vision)
I
Indian Nutrient Databank
U
USDA FoodData Central
03 · Guide

Step-by-step guide.

3 of 8 open
1
SetupSet up your tools

Install Node.js LTS and Claude Code, then create GitHub, Supabase (Mumbai region for India), Vercel, Claude API and Razorpay accounts. About twenty minutes; every one has a free tier or test mode.

2
SetupDraw the wireframe

Sketch the six screens: onboarding, today, scan, editable result, trends and paywall. Hand the picture to Claude Code with the build prompt.

3
PromptDesign the database

Run the database prompt and check what comes back against the reference schema. Then log in as two test accounts and confirm neither can read or write the other's rows.

4
PromptBuild the app

Give the agent the whole build prompt: magic-link and Google sign-in, private photo storage, a server-side scan route, the editable result screen and 3 free scans a day.

5
PromptBuild the food table

Build one food file of about 8,300 foods from the Indian Nutrient Databank and USDA FoodData Central, then check the top match for common foods like rajma, roti and dal.

6
PromptWire up the plate reader

The server sends each photo to Claude with this prompt. The model names each food and its grams, and the calories come from the food table.

7
PromptAdd payments

Create ₹300 monthly and ₹2,400 yearly plans in Razorpay, then add subscriptions in test mode. Test a success, a failure and a duplicate webhook.

8
HandoverDeploy it live

Push to GitHub, import into Vercel and add the environment variables there. Point the Razorpay webhook at the live domain, test on a real phone on mobile data, and switch Razorpay to live mode last.

04 · Prompts

The prompts that built it.

prompt-1.txt
Design the Postgres schema for this app in Supabase and write it as one migration file.

TABLES
profiles       one row per user: sex, date_of_birth, height_cm, weight_kg, activity_level,
               goal, target_calories, target_protein_g, target_carbs_g, target_fat_g,
               locale, timezone
meals          one row per logged meal: user_id, eaten_at, local_date, photo_path,
               source ('photo' | 'search' | 'manual'), name, calories, protein_g,
               carbs_g, fat_g,
…
05 · Monetize it

How you can monetize it.

1
Monthly subscription₹300 a month through a Razorpay subscription (UPI AutoPay or card mandate), shown after the 3 free photo scans a day run out.
2
Yearly plan₹2,400 a year, pitched as two months free.
3
Keep search freeFood search and manual entry stay free and unlimited; only photo scans, which cost you an API call, are limited.
4
Know what you keepThe guide's maths: 1,000 subscribers at ₹300 is ₹3,00,000 gross, about ₹2.4 lakh after 18% GST and the ~2% gateway fee, before vision-model costs.
5
Test the priceOnce you have traffic, test ₹199 and ₹399 against ₹300.
06 · Built with

Languages and tech stack.

TECH STACK
Claude CodeVercelSupabaseGitHubRazorpay
Become the top 1% of AI users
Become the top 1% of AI users