如何用 Claude Code 从零搭建带登录和数据库的完整应用

以下是视频口播的自动转写，可能有错字。

I'm going to show you exactly how to build a complete app with AI, even if you know nothing about code. Login, a database, photos, invoices, and a real link your customers open on their phone.

This one's longer on purpose because I'm giving you the whole picture: the front, the back, how login actually works, and how it gets online.

Here's the app—a client portal for Birchwell Kitchens, a kitchen remodeler in Raleigh. The company's made up, the app is real.

Clients keep calling Dana, the owner, to ask where their kitchen's at. So we follow one of them, Priya. She opens a link on her phone, logs in, and sees her stage, her photos, and what she owes.

Every app has four parts: the screens, the backend, the database, and hosting. You'll meet them one at a time. Step 1, your workshop.

Download vs code, a free app for working on project files. Open extensions, search claude code, click install, then click the spark icon and sign in with a paid claude plan.

Make an empty folder called birchwell portal and open it. That folder is the app. Claude code writes the files inside it and runs them for you.

Step 2, describe the app in plain english. Who it's for and the problem it solves. What a client sees, their stage, the finish date, the latest crew notes.

What the owner sees every project and a way to change a stage and what it has to remember add three technical lines. You can copy build it with next.

js which is made by vercel where we'll host it later. Use a local database for now. So there's nothing to sign up for yet and email login with hashed passwords.

You'll see what that means in step 5, send it and clog code builds the whole thing. Step 3, the screens. Developers call this the front end.

It's everything. Priya sees and taps ask claude code to start the app and it gives you an address. Local host colon 3417.

Local host means this computer that address points back at your own laptop. So only you can open it, text it to priya and on her phone, local host means her phone.

Nothing's there. That's fine for now. Click around like a client at phone size and point at what's off. Step four, the database login is dana open, priya's project and add a crew note, countertop template monday at 9, refresh the page, still there, close the laptop, open it tomorrow, still there.

The part that remembers is the database picture tabs in a spreadsheet users projects, crew notes, invoices photos right now.

All of it lives in one file on your laptop. Remember that for step 7, step 5, login. Priya types her password and taps sign in.

That tap goes to the back end, the part she never sees. It runs on whatever computer host the app, and right now, that's your laptop.

It decides if the password is right and what she's allowed to see. Her password was never saved. When her account was made, it went through a one way scrambler called a hash, and only the scramble went into the database.

Nobody can turn it back, including you. At login, the back end scrambles what she typed the same way and compares. Match, she's in.

Then it hands her phone a pass, a long random code called a session cookie. Her phone shows it with every tap, so she doesn't retype her password on each page.

Page scripts can't read it, and it runs out after 14 days. Step 6, the one rule every app needs. Priya sees her project, and never Marcus's.

Look at her address bar. It says /project, with no project number to swap. When the page loads, the backend asks, 'Whose pass is this?

' Priya's. So it pulls the project where the client is Priya. Every photo goes through the same check. then, prove it. have claude code write a test that logs in as priya and tries to open marcus's project, his photos, his invoice.

25 checks, all passed. step 7, getting it off your laptop. right now the app only runs while your laptop is on, and only you can open it.

so it moves to a hosting company, a computer that's on all day with an address anyone can open. we'll use vercel. one problem first.

vercel runs your backend on computers that won't keep files for you. the app's folder is read-only there, so the database file can't come along.

and neither can the photos. so the memory moves online to superbase. it gives you a real database called postgres, plus private storage for photos.

make a free superbase account and click new project. give it a name and a strong password. then click connect and copy the connection string called transaction pooler.

that's the one made for hosts like vercel. that string is a key, a long password that lets your app into a service. keys go in one private file, env.

local. your app reads it, and it never gets uploaded with your code. Then one message to Claude Code, move the database to my super base and the photos into a private storage bucket.

Only the backend talks to the database. Keep the login and the one rule the same and run the prea test again. Step 8, github it stores your code online with every version you've saved.

Tell Claude Code, put this project on my github as a private repository. You approve once in your browser, private is free, only you can see it and your key file stays on your laptop.

Step 9, versal sign up with your github account, click new project and pick birchwell portal before you click deploy open environment variables.

That's versal's copy of your key file because the live app needs the keys too. Paste them in or import the file deploy and you get a real link ending in versal.

app. That's the first address a stranger can open from now on. You ask claude code for a change and tell it to push and versal puts it live by itself.

If you change a key in versal redeploy or the app keeps the old one. Now, the honest cost versal's free plan is for personal projects.

Only a business portal is commercial, so that's pro twenty dollars a month. Superbase's free plan pauses after a quiet week.

So a real business goes pro there too from twenty five dollars a month. Step 10, your own name. In Vursal, open settings, then domains, and add portal.

birchwellkitchens. com. It shows you one record. Paste it into the DNS settings where you bought the domain, and wait until Vursal says it's valid.

A. com starts around $11 a year. Vursal adds the padlock by itself, so Priya's pass only travels encrypted. Now test it like Priya.

On your phone, open the link and sign in. Stage 4 of 7, cabinets. Her photos, newest first. One invoice unpaid. That pay now button is where stripe plugs in, one more account and one more key.

Before a real client gets the link, add cloudflare's security audit skill to clog code, and say, security audit this code base.

It reviews your code like a team of security experts, and writes up the weak spots. Once you know the four parts, adding more is one message.

Dana used to write six client updates every friday. Now, one click drafts all six from that week's notes and photos, and nothing goes out until she approves it.

That's the whole app. Screens pre-attaps, a back end that shows her only her kitchen, a database that remembers, and hosting that gives her a link.

I have an entire course on that in my community building apps with AI from zero. If you're interested, the link is in my profile.