KOINA.SPACE · Build Week · Cheat Sheet

Four weeks
from idea to live.

Cursor, Next.js, Supabase, GitHub, Vercel and Resend — the same stack behind koina.space. Every tool is free. Keep this open on your second screen.

The stack — what each thing actually does

Cursor

Where you write

Your editor. You describe what you want in plain English; it writes and edits the code with you.

Next.js

The app itself

The framework your app is built on. A folder becomes a page. app/about/page.tsx → /about.

Supabase

Memory + logins

Your database and your sign-in system. Where a form submission goes so it's still there tomorrow.

GitHub

The safety net

Every version of your code, saved off your laptop. Break something? You can always go back.

Vercel

The front door

Puts your app on the internet. Push to GitHub and it rebuilds and redeploys on its own.

Resend

The messenger

Sends real email from your app — a welcome note, a confirmation, an alert to you when someone signs up.

The route

Week 01 · dream

Dream it,
build it

Your first idea to code in hour one.

  • Download, install and set up a Cursor account
  • Install Node.js
  • Use Cursor with Build mode to sketch your idea
  • Cursor runs this for you:
    • npx create-next-app@latest
    • npm run dev → localhost:3000
  • First real edit — click it in the browser, say what you want

You leave withYour idea running on your own machine.

Week 02 · world

Take it to
the world

Your code to the world — beyond localhost.

  • Git in three commands: add, commit, push
  • Push to a GitHub repo
  • Import the repo into Vercel
  • Every push now redeploys automatically
  • Secrets live in .env.local — never in the repo

You leave withA URL you can send to your mum.

Week 03 · horizons

Expand your
horizons

More features, and connecting to APIs.

  • A Supabase table + Row Level Security on
  • Email sign-in, so users have accounts
  • A form that saves and reads back
  • Resend wired up, sending real email
  • Keys go into Vercel too, not just your laptop

You leave withLogins, stored data, a sent email.

Week 04 · all in

Summing
it up

Connections, opportunities, showcases.

  • Tidy the README so a stranger can run it
  • Custom domain, if you want one
  • Show your work — two minutes, live
  • Where this plugs into missions tech
  • What you build next, and with whom

You leave withA shipped project and a global team.

By the end of week four

  1. Your idea, turned into working code
  2. An app with logins, forms, a database and a live email connection
  3. The know-how to put your own work on the internet
  4. A door into a global team building technology for missions

The same job, two ways — every single week

Ask CursorOr type it yourself
“Start the dev server so I can see the app in my browser.” npm run devLeave it running in its own terminal tab all evening.
“Stop the server that's running in the terminal.” Ctrl + CCtrl on Mac too, not Cmd. Click the terminal first.
“It says a package isn't found — install what this project needs.” npm installAlso run this after pulling someone else's code.
“Save my work and push it to GitHub. Call the commit ‘add signup form’.” git add -A
git commit -m "add signup form"
git pushWrite what the change does, never just "update".
“Add Supabase to this project and set up the client file.” npm install @supabase/supabase-jsCursor still has to write the client file — let it.
Cmd/Ctrl + LOpen chat — ask a question about your code.
Cmd/Ctrl + IAgent — let it change several files at once.
Browser paneOpens your running app inside Cursor, with Select element.
Ctrl + `Show or hide the terminal panel.

Ask first — then read the command Cursor runs. By week four you'll be typing most of these without thinking about it.

Your first edit — point at it in the browser

  1. Get the app running. npm run dev must be live at localhost:3000 first.
  2. Open Cursor's Browser and point it at your app. Keep it in the pane inside Cursor — select element stops working if you pop the browser into a separate window.
  3. Click Select element — the pointer icon in the browser toolbar. Hover the page and elements light up one by one.
  4. Click the thing you want to change. It's attached to the chat as context, so Cursor already knows which component and file it came from. You never type a file path.
  5. Describe the change in plain English and send it. Click one element at a time — clicking five floods the chat and Cursor loses the target.

Worked example — changing text

You clickThe big headline on your homepage reading “Create Next App”.
You type“Change this heading to Wednesday Night Build.”
Cursor opensapp/page.tsx
Before<h1>Create Next App</h1>
After<h1>Wednesday Night Build</h1>

You pointed at a thing on screen and said what you wanted. You never had to know the file was called page.tsx — that's the whole idea.

Looking for "Inspect Element"?Cursor names it Select element. It hands the element to the agent rather than opening DevTools.
Drag things around tooThe visual editor lets you reorder and resize elements, then tell the agent to apply it to the code.

Connecting Supabase — keys, env file, tables

StepWhat to do
Get your three values Supabase dashboard → Project Settings → API. Copy the Project URL, the anon public key, and the service_role key.
Make the env file In your project root — the folder with package.json — create a file called .env.local.
Paste them in NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGc...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGc...No quotes, no spaces around the =. Only the first two get NEXT_PUBLIC_ — that prefix means "send to the browser", which the service_role key must never be.
Restart the server Keys only load at startup. Ctrl+C, then npm run dev.
Ask Cursor for the SQL “Write the SQL to create a prayers table with id, name, message and created_at, with Row Level Security enabled and a policy that lets signed-in users read and insert.”
Run it in Supabase Dashboard → SQL Editor → New query → paste → Run. Then open Table Editor to see the table exists.
Keep the SQL Save it in your repo as schema.sql. It's how you rebuild the database if you ever start a fresh project.

Connecting Vercel — repo, region, keys, logs

StepWhat to do
Link your GitHub repo vercel.com → Add New → Project → choose your repo → Import. Vercel spots that it's Next.js and fills in the build settings itself. Every push to your main branch now rebuilds automatically.
Pick your region Settings → Functions → Function Region → Singapore (sin1). Choose the one nearest your users, and match it to your Supabase region so the two aren't talking across the planet.
Copy your keys across (or generate new keys for Production) Settings → Environment Variables. Open .env.local, add each line as a Name / Value pair, tick Production. Your .env.local never leaves your laptop — Vercel has no idea it exists unless you do this.
Redeploy New keys only apply to new builds. Deployments → latest → ⋯ → Redeploy.
Watch the build The Deployments screen shows Building, then Ready or Error. Click any deployment to open its Build Logs.
If it says Error Open Build Logs, scroll to the red line, copy it, paste it into Cursor and ask why the build failed.

Design skills — bolt these onto Cursor so your app doesn't look AI-made

Skills are instruction files your agent reads automatically. Install them from your project root, in this order — each one assumes the last. Save this for week 3 or 4, once you have something real to improve.

Start with 01

Emil Kowalski's Design Eng

emilkowal.ski/skill

UI polish, component design and animation decisions, from a design engineer who worked at Vercel and Linear. Agents left alone pick the wrong easing constantly; this is the fix.

Installnpx skills add emilkowalski/skill
Run/emil-design-eng
/animate

Follow with 02

Impeccable

impeccable.style

A shared design vocabulary between you and the agent. init interviews you about audience and purpose and writes it to a PRODUCT.md; polish then cleans up something that already exists.

Installnpx impeccable install
Run/impeccable init
/impeccable polish

Finish with 03

Taste Skill

tasteskill.dev/docs

Anti-slop rules for landing pages and portfolios. The agent reads your brief and infers a direction — industry, audience, mood — instead of reaching for the same purple-gradient template every time.

Installnpx skills add Leonxlnx/taste-skill
Run/taste
Run from your project rootThe same folder as package.json. Reload Cursor afterwards so it picks the skill up.
One at a time, then lookRun a skill, check the browser, commit. Three skills in a row and you won't know which change did what.

Asking Cursor for things — say what you'd see, not how to code it

"Make a useState hook and a handler"

"When someone types their email and clicks Join, save it to Supabase and show 'You're on the list'."

"Fix my app"

"The Join button does nothing. Here's the whole error from the terminal: …"

Paste the entire error, not your summary of it. The part you'd skip is usually the part that matters.

  • Tell it the stack once per chat. "Next.js App Router, TypeScript, Tailwind, Supabase."
  • One change at a time. Five requests in one message gets you five half-done things.
  • Check it after every change. Look at the browser before you ask for the next thing.
  • Ask it to teach you. "Explain this file to me like I've never seen React." That's a normal thing to ask.
  • Going in circles? Start a fresh chat. A long confused conversation stays confused.

When it breaks — work down this list before asking for help

CheckWhat to do
Did you save the file? Genuinely the most common one. Save, then look again.
Read the error, last line first It usually names the file and the line number.
Is npm run dev still running? Check the terminal tab — it may have stopped.
Restart it In your terminal, press Ctrl+C, then run npm run dev again.
Still nothing obvious? Paste the full error into Cursor chat and ask why it's happening.
Added a new key to .env.local? Restart the server. Keys only load at startup.
Still odd? Stop the server with Ctrl+C, clear the cache by running rm -rf .next, then start up again with npm run dev.
Works locally, broken on Vercel? Your keys could be missing in Vercel. Set up the keys in Environment Variables, then redeploy. Alternatively, go to Deployment logs, copy the error and paste it in Cursor to fix.
Data won't load and there's no error? Possible causes: Row Level Security is on with no policy. That's Supabase doing its job — write the policy. Also, did you check your Supabase keys are set in .env?
Still stuck after 15 minutes? Post it in the group chat with the error and what you already tried. That's the job, not a failure.

Three things to never do (for security reasons)

Never commit .env.local. Check that .gitignore lists it before your first push.

Never put the Supabase service_role key in front-end code. The anon key is designed to be public; service_role bypasses every security rule you've written. Server-side only.

Never leave a table with Row Level Security switched off. Off means anyone with your public key can read and rewrite it.

Appendix — what your screen looks like at the end of each week

One example project carried across all four weeks: a prayer wall for a youth group. Yours will look different — the shape of the progress won't.

http://localhost:3000

Prayer Wall

A place for our youth group to share what they're praying for this week.

Add a request
Only you can see this. It lives on your laptop.
End of week 01One page, your words, running on your own machine. The button doesn't do anything yet — that's expected. Close the laptop and the site is gone.
https://prayer-wall-jia.vercel.app

Prayer Wall

A place for our youth group to share what they're praying for this week.

Add a request
Anyone with the link can open this, on any phone, anywhere.
End of week 02Same page, different address. It's on the internet with a real https link, rebuilt automatically every time you push to GitHub.
https://prayer-wall-jia.vercel.app
Prayer Walljia@example.com · Sign out
What can we pray for?
Post request
Exams next week — praying for a clear head.Posted by Marcus · 2 hours ago
My grandmother's surgery on Friday.Posted by Jia · yesterday
✓ Email sent via Resend
End of week 03People sign in, write something, and it's still there tomorrow — because it's in your Supabase database, not the page. Every new request emails you.
https://prayerwall.yourname.com
Prayer Wall42 requests · 11 people
Safe travels for the team heading to Chiang Mai.Answered · 6 prayed
Exams next week — praying for a clear head.3 prayed
My grandmother's surgery on Friday.Answered · 9 prayed
Built at KOINA.SPACE Build Week · source on GitHub
End of week 04Your own domain, real people using it, and a README a stranger can follow. This is the version you show — and the version someone else can build on.