codata
Vibe coding cheat sheet · 02 / 08
Personal productivity
Build the tracker you keep searching the app store for.
Habit, deadline or wellness trackers made exactly your way. Start with one user, you. When friends ask for it, sign-in is already there, so sharing is a prompt, not a rebuild.
Best for: first-time builders · coaches · creatorsDifficulty: easiestFirst build: habit tracker
What Codata IO runs for you
DatabaseEvery habit and check-in kept, across your phone, laptop and any new browser.
Sign-inEach person sees only their own data, from the very first version.
HostingA live URL you can pin to your phone's home screen today.
Free planYour first app live for $0, with no card required.
Step 01
Connect your agent
Sign up free at codata.io and copy your MCP address from onboarding. Add it once to Claude, Cursor, Codex, Copilot, ChatGPT, Lovable or Replit, then log in to Codata IO when prompted:
https://mcp.codata.io/mcp
Step 02
Paste the starter prompt
Starter prompt · what to build
Build a personal habit tracker. Use the codata MCP server for the backend. Create tables for habits (name, goal per week, color) and check-ins (habit, date). Use Codata IO sign-in so each person only sees their own habits. Screens: today's list with one-tap check-ins; a weekly grid view; a streak counter and a chart of completion rate per habit over the last 8 weeks. Make it work well on my phone and feel calm and minimal.
Design layer · keep it in the same prompt
DESIGN (follow exactly)
Style: calm and minimal, rounded 16px corners, lots of white space; each habit gets its own soft color.
Layout: mobile first, with a bottom tab bar: Today, Week, Stats.
Today: big tappable rows (56px) with a color dot, the habit name and a round check button that fills with a small animation.
Week: a 7-column grid of circles per habit; filled means done.
Stats: the streak as a big number at the top ("12-day streak"), then a small line chart per habit.
Empty state: "Add your first habit" with 3 one-tap suggestions (Drink water, Walk 10 minutes, Read).
Colors: off-white background, white cards with soft 1px borders, near-black text, and ONE accent color: [your brand color, e.g. #2F5BFF] for buttons and highlights only.
Type: one clean sans-serif (e.g. Geist or Plus Jakarta Sans), 16px body text, generous line spacing.
Use Tailwind with shadcn/ui components. Add empty, loading and error states, and make every tap target at least 44px.
Build the main screen first with these exact specs and show it to me. After my OK, connect it to Codata IO.Step 03
Add one feature at a time
Follow-up · notes
Add notes to each check-in and a search across all my notes.
Follow-up · Sunday summary
Set up a Codata IO scheduled task that emails me every Sunday evening with my best and worst habit this week, in one sentence each.
Step 04
Go live
Launch prompt
Check that no user can see another user's habits and that no keys are in the code. Then deploy on Codata IO hosting, give me the live URL, and tell me how to add it to my phone's home screen.
Pro tip
Change your mind freely. New field, new screen, new idea: describe it, and Codata IO extends the backend with no migrations. Your streaks stay intact.
Start free. Live in under an hour.
No card required · Pay only when it runs