First Claude app: Family Council

I asked Claude to help me build this.

Prompt:

How can I built a web app with Claude and publish it on a website?

Questions:
Q: What kind of web app are you trying to build?
A: A full app with users, login, database

Q: How much coding do you want to do yourself?
A: None — Claude does everything

Q: Do you already have somewhere to host it?
A: No, need a free option

And the answer from Claude:
Got it — full app with auth and a database, you don't want to write code, and you need a free host. Here's an honest path that actually works for that combo.

The realistic stack for "Claude does everything"

For a no-code-yourself approach with users, login, and a database, the sweet spot is:

• Frontend + backend: Next.js (React framework that handles both UI and server logic in one project)

• Auth + database: Supabase or Clerk + Supabase — these give you signup, login, password reset, and a Postgres database without you writing auth code from scratch

• Hosting: Vercel (free tier, made by the Next.js team, deploys straight from GitHub)

• Code generation: Claude Code (in your terminal) or this chat

All of these have free tiers that get you to a real, live app at a real URL — no credit card required to start.

The honest caveat

"Claude does everything" works well for writing the code. But you'll still need to:

1. Install a couple of tools on your computer (Node.js, Git, optionally Claude Code)

2. Create free accounts on GitHub, Vercel, and Supabase

3. Copy API keys from one dashboard to another

4. Run a few commands Claude gives you

If that sounds like too much, there are true no-code builders (Bubble, Softr, Lovable, v0) where you describe the app in plain English and they handle hosting too. They're faster to start but less flexible and most have paywalls once you have real users.

Recommended path — step by step

1. Set up accounts (15 min): GitHub, Vercel, Supabase — all free, sign up with the same email.

2. Install tools (10 min): Node.js from nodejs.org, Git, and Claude Code (npm install -g @anthropic-ai/claude-code).

3. Start a Claude Code session in an empty folder and tell it exactly what to build. Example prompt:

   "Create a Next.js 14 app with TypeScript and Tailwind. Use Supabase for auth (email + password) and database. The app is [describe what it does]. Set up the database schema, login/signup pages, a protected dashboard, and prepare it for deployment to Vercel."

4. Hook up Supabase: Claude will tell you which keys to grab from your Supabase dashboard and where to paste them (into a .env.local file).

5. Push to GitHub: Claude can do this for you with a few commands.

6. Deploy to Vercel: Import the GitHub repo on Vercel, paste the same env variables, click deploy. You get a live URL in ~2 minutes.

7. Iterate: Go back to Claude Code and say "add a page that does X" — it edits the code, you push, Vercel redeploys automatically.

Free-tier reality check

• Vercel free: plenty for hobby/small apps, ~100GB bandwidth/month

• Supabase free: 500MB database, 50K monthly active users, paused after 1 week of inactivity (just hit "unpause")

• You can run a real app on this stack with zero monthly cost until you have meaningful traffic

I tried Fable 5 (yes it was allowed to use for a short time and made it in that window :) ) and this was my initial prompt for the app:

I want to build a family planner web app as a SaaS service where users can sign up for. And the idea is that you have once a week family council, and you want to plan your next week. You can create family members like mom, dad, kids, and you can assign different tasks to them. You can also have a task for the whole family.

Make the theme to be warm and fun for family. It should be colorful and fun.

Add option to upload an image for a family member. I also want the option to generate an AI generated image based on the uploaded image or based on a description. The AI generated image should be in a cartoon style and family friendly.

The task assignment workflow should be like this: The idea is that there is a pile of tasks. I can add tasks to that pile (weekly or one time tasks). Weekly tasks are automatically added each week to the pile. Then next step is to assign a task to a family member. It should be possible to do this via drag and drop to drag the task on a family member image. After that I should be able to assign the task to a week day. Again this should be possible via drag and drop.

It was running for 40min and built the finished app in 1 go without any issues. So really impressive.