CLASS 06 / INTRO TO VIBE CODING
Project Studio
One dashboard. Connected ideas.
Project Studio is a tool for planning the things you want to build. Its screens share a backend and database, so an idea can become part of a project instead of getting lost in another document.
Download starter Jump to copyable prompts ↓YOUR FLIGHT PLAN
Try it. Understand it. Make it yours.
- 01
Start in the right folder
Download and extract the starter ZIP. Open the extracted project-studio folder in your editor and local coding agent. Use the copyable prompts below to check the setup and start the app.
- 02
Make it yours
Choose a theme, layout, or dark mode. Ask for a specific change, preview it, and test that adding ideas and projects still works. Change one thing at a time.
- 03
Follow your data
Add an idea. Refresh the page. Ask your coding agent to show you the route, API request, and D1 table involved in saving it. Explain the path in your own words.
COPY ONE PROMPT AT A TIME
From the handout to your coding agent.
Open the correct project folder in your local coding agent first. Read each prompt and replace any bracketed words before sending.
PROMPT 1 — LOCAL SETUP
Open the extracted Project Studio folder containing package.json. Preserve my other projects and existing data. Check Node 22+ (24 LTS preferred) and npm. Run npm ci to install the locked dependencies, including local Wrangler 4.151.1. Run npm run types, npm run db:migrate, and npm run db:seed, then start npm run dev. Use local bindings only. Do not log in, deploy, create cloud resources, or erase .wrangler/state. Give me the actual app URL, Local Explorer URL ending /cdn-cgi/local/explorer, and restart command. If setup fails, explain the exact error and stop for help.
PROMPT 2 — MAKE IT MINE
Help me make Project Studio feel like mine. Ask up to three short questions about my theme, colors, layout, dark mode, and animation. Offer examples if I am unsure, then implement my choices across every route. If I choose a light/dark toggle, remember its setting after reload. Keep animation subtle and respect reduced-motion settings. Preserve the routes, Worker, D1, saved records, and all existing behavior. Keep forms readable, keyboard controls usable, and phone layouts tidy. Show me the changed files and let me test both appearance and behavior.
PROMPT 3 — SEARCH YOUR IDEAS
Keep Project Studio's shared routes, Worker backend, D1 database, and saved records. Add a labeled search box to Idea Lab that filters idea titles and audiences, ignoring letter case. Clearing it must restore every card. Show a useful no-results message. Dashboard totals must still count all saved ideas. Keep the existing add, rename, delete, and linked-project behavior. Match the current visual style. Show me the changed files and explain the search code. Start the local app so I can test it myself.
PROMPT 4 — INVESTIGATE THE SYSTEM
Do not edit files. Trace one saved idea through this actual project: the browser form and request, Worker API handler, parameterized INSERT, D1 ideas table, and dashboard query. Show each real filename and relevant code. Help me open Local Explorer and locate my row's id and title. Explain how projects.source_idea_id links to ideas.id and what happens if that idea is renamed or deleted. Have me point to the files and row myself.
READY TO GO FURTHER?
A little stretch.
Add search to the ideas list, or connect an idea to a project. Test empty results and refresh the page to see whether the information survives.
KEEP THESE HANDY