Academy › Vibe Coding for Non-Developers › Lesson 3

Set up a workspace in an hour

Install the four things every project needs, create a project folder with a brief and a secrets file, and see the app run once. · 9 min read

Setup is the lesson most people want to skip and the one that saves the most time later. Done once, properly, it means every future project starts in five minutes.

What you will build

A project folder that runs an empty app in your browser, with a brief file and a safe place for secrets.

A one-hour setup: install Node and Git, pick an editor, add the AI tool, make a GitHub account, create the project folder, run it once Figure 1. Six steps. The first run is the finish line.

Step 1: Install the basics

InstallWhyWhere
Node.js (LTS version)Runs JavaScript projects and the npm package managernodejs.org
GitCheckpoints and undo (lesson 8)git-scm.com, or ships with Xcode tools on a Mac
An editor: VS Code or CursorWhere you look at files and the terminalcode.visualstudio.com or cursor.com
Your AI tool from lesson 2Does the typingIts own install page

Open a terminal (in VS Code: View, then Terminal) and check:

node --version
git --version

Both should print a version number. If either says “command not found”, restart the terminal, then the computer, then reinstall.

Step 2: Five terminal commands you need

You will not become a terminal expert. You need five commands:

cd my-project      # go into a folder
ls                 # list what is here (dir on Windows)
npm install        # install the project's packages
npm run dev        # start the app locally
Ctrl+C             # stop it

Everything else, ask the AI to run for you.

Step 3: Create the project folder

Make a folder for the project and open it in your editor. Then give your AI tool this first prompt:

Set up a new project in this empty folder for a simple web app.
Use a mainstream, well-documented stack that a beginner can run with
"npm run dev". Create:
- a .gitignore that excludes node_modules and .env
- an empty .env.example with a comment explaining what goes in .env
- a README.md with how to install and run
- a PROJECT.md with the headings: Goal, User, Screens, Data,
  Must have, Nice to have, Out of scope, Done means
Do not add features yet. Start the dev server and tell me the URL.

If the tool asks which framework, say “whatever you recommend for a beginner, and tell me why in two sentences”. Astro, Next.js and plain Vite are all fine answers.

Step 4: See it run

Open the URL the tool gives you, usually something like http://localhost:3000 or http://localhost:4321. You should see a placeholder page. That is the whole goal of this lesson.

Step 5: Secrets go in one place

Any password, API key or token goes in a file called .env, which .gitignore keeps out of your checkpoints and off GitHub. .env.example lists the names without the values, so a future you or a developer knows what is needed.

Never paste a key into a prompt, a commit message or a file that is not .env.

Worked example

A coach on Windows got “npm is not recognized” after installing Node. Restarting the terminal fixed it: the installer had updated the system path but open terminals had not noticed. Total setup time including that hiccup: 50 minutes.

Common mistakes

  • Installing a non-LTS “current” Node and hitting odd errors.
  • Running npm run dev in the wrong folder. Always cd in first.
  • Putting a key in .env.example instead of .env.

Checklist

  • node --version and git --version print numbers
  • Project folder runs with npm run dev and opens in the browser
  • .gitignore, .env.example, README.md and PROJECT.md exist