Lesson 1: Setting Up Your IDE 🛠️

Welcome to the BuildLab! We are so excited you’re here. This first lesson covers how to set up your computer with the tools you need for this program. Let’s get you ready to code!

What is an IDE? đź’»

IDE stands for Integrated Development Environment. It is a software application that gives you everything you need to write code in one place: a code editor, a terminal, and debugging tools.
We use Visual Studio Code (VS Code). It is a popular, free, and powerful code editor from Microsoft.

âś… Step 1: Install VS Code

If you don’t already have it, download and install VS Code first.
  1. Go to the official VS Code download page: https://code.visualstudio.com/download
  1. Download the installer for your operating system (macOS, Windows, or Linux).
  1. Run the installer and follow the instructions.
Once installed, open VS Code. You should see a welcome screen!

âś… Step 2: Set up Codex in VS Code

Our AI pair programmer is Codex, an AI coding agent from OpenAI. Codex lives inside VS Code as an extension. It lets you have a conversation, ask it to write code, and have it edit your files directly.
  1. Open the Extensions View: In VS Code, look at the left-hand sidebar. Click the icon that looks like four squares.
  1. Search for Codex: Type “Codex” in the search bar at the top of the Extensions view and press Enter.
  1. Install the Extension: Find the official “OpenAI Codex” extension and click the “Install” button.
  1. Sign In: Sign in with the OpenAI account credentials I sent you via email. Follow the prompts to authorize the extension.
Once you sign in, open the Codex panel from the sidebar.
✏️ Try-It: Open the panel and type “Hello!”

âś… Step 3: The integrated terminal

VS Code has a built-in terminal. We use it to run commands to install software, run our app, and use Git. You don’t need a separate terminal application.
To open the integrated terminal, do one of two things:
OPTION 1: Go to the top menu and select Terminal > New Terminal.
OPTION 2: Use the keyboard shortcut: \ (the backtick key) with Ctrl (Windows/Linux) or Control` (macOS).
You should see a command prompt appear at the bottom of your VS Code window. You will run all your commands here for the rest of the program.
✏️ Try-It: Time to self-validate (meaning check your own setup to confirm it worked)! In your new terminal, type node --version and press Enter. Then type pnpm --version and press Enter. If both commands print out version numbers instead of “command not found” errors, your environment is perfectly configured!

âś… Step 4: Running your project

Now that your tools are set up, let’s get your actual project running! You should have already forked your team’s repository (covered in Lesson 3, but we’ll do the setup here).
  1. Clone the repository: Open your terminal in VS Code and run git clone <your-fork-url>.
  1. Open the folder: In VS Code, go to File > Open Folder and select the folder you just cloned.
  1. Install dependencies: Open a new terminal inside this folder and run:
      2. pnpm install
  1. The secret database file: Look in your project files for a file called .env.local. This file contains your team’s secret database connection string (DATABASE_URL). It connects your app to the Neon Postgres database. Do not delete this file and never commit it to GitHub! If you see an error about DATABASE_URL later, ask your facilitator.
  1. Set up the database (usually one-time): Your program team has likely already done this for your team, but if you ever need to reset things or you see an empty app, run these in your terminal:
      2. pnpm run db:push
pnpm run seed
      db:push creates the tables in your Neon database, and seed adds sample communities, posts, and events so you have data to work with. If you see “table already exists,” that’s fine — it means it’s set up.
  1. Run the app: In your terminal, start the development server:
      2. pnpm run dev
✏️ Try-It: Time to self-validate. Open your web browser and go to http://localhost:3000. You should see a page that lists community names. If you see it, your project is running! Drop a 🚀 in your team’s Slack channel to celebrate.

🛟 Common errors (and how to fix them)

If pnpm run dev doesn’t work, here are the three most common culprits:
  • MODULE_NOT_FOUND: You skipped Step 4 (pnpm install). Run it now and try again.
  • DATABASE_URL error: Your .env.local file is missing or the connection string is wrong. Post in Slack: “My .env.local file is missing — can someone send me the DATABASE_URL for my team?”
  • Port 3000 already in use: Another app is using that port. Close other terminal windows or run pnpm run dev -- -p 3001 and visit localhost:3001 instead.
If you hit something else, screenshot the error and drop it in your team’s Slack channel — your facilitator can help.
That’s it! Your IDE and project are set up and ready to go. In the next lesson, we dive into how to actually use Codex to write code. You’re going to love it!
Â