Day 4 of 28 · Vibe Coding Challenge

Setting Up Your Environment

⏱ 7 min 📊 Beginner

Today you set up the tools you'll use throughout this challenge. We'll install an AI code editor, set up an app builder account, and make sure everything works.

By the end of today, you'll be ready to build.

What you'll set up

We'll configure two tools — one from each category:

Cursor (in-editor assistant) — for when you want control over your code, to build complex projects, and to work with existing codebases.

Bolt (app builder) — for when you want to go from idea to working app in minutes, with zero setup.

You don't need both right away. If you just want to get started fast, set up Bolt first — it runs in your browser with nothing to install.

Setting up Bolt

Bolt runs entirely in your browser. Setup takes about 60 seconds:

1. Go to bolt.new

2. Sign up with your Google or GitHub account

3. That's it — you're ready to build

Bolt gives you free credits to start. You can build several projects before needing to upgrade.

⚡

Bolt

online

Build me a simple to-do app with a clean design.

Setting up your project... Done ✓ Your to-do app is ready: ✅ Add new tasks with Enter key ✅ Check off completed tasks ✅ Delete tasks with swipe or click ✅ Tasks persist in local storage ✅ Clean, minimal design Preview is running in the right panel. Try adding a task!

↻ Replay conversation

Knowledge Check

What do you need to install to use Bolt?

A

Docker and a local server

B

Node.js and npm

C

Nothing — it runs entirely in your browser

D

A special IDE plugin

That's the beauty of app builders like Bolt — zero setup. Open a browser, sign in, start building. Everything runs in the cloud. No local installation required.

Setting up Cursor

Cursor requires a local install, but it's straightforward:

1. Go to cursor.com and download the installer for your operating system

2. Run the installer — it works like any other app

3. Open Cursor. If you've used VS Code before, it'll feel immediately familiar (it's built on VS Code)

4. Sign in to Cursor and choose a plan (the free tier works for learning)

5. Enable the AI features when prompted

If you have VS Code extensions and settings, Cursor can import them automatically.

The Cursor code editor with a dark theme, file explorer on the left, code in the center, and AI chat panel on the right

Cursor — it looks like VS Code, but with AI superpowers built in.

Your first Cursor test

Let's make sure everything works. Open Cursor and try the AI chat:

1. Press Cmd+L (Mac) or Ctrl+L (Windows) to open the AI chat panel

2. Type a simple request

🤖

Cursor AI

online

Create a simple HTML page that says "Hello, Vibe Coding!" with centered text and a gradient background.

I've created `index.html` with: 🎨 Full-screen gradient background (purple to blue) 📝 "Hello, Vibe Coding!" centered on the page ✨ Modern font (Inter from Google Fonts) 📱 Responsive — looks good on any screen size Open the file in your browser to see it. Want me to add anything — animations, a subtitle, a button?

↻ Replay conversation

Knowledge Check

What keyboard shortcut opens the AI chat in Cursor?

A

Cmd+K / Ctrl+K

B

Cmd+L / Ctrl+L

C

Cmd+Shift+P / Ctrl+Shift+P

D

Cmd+Space / Ctrl+Space

Cmd+L (Mac) or Ctrl+L (Windows) opens the AI chat panel in Cursor. There are other shortcuts too — Cmd+K for inline edits, Tab for autocomplete — but the chat panel is where you'll have most of your conversations.

Optional extras

These aren't required for the challenge, but they'll make your life easier:

Node.js — If you want to run JavaScript projects locally. Download from nodejs.org. Most projects we build will work without it (Bolt handles everything in the cloud), but it's useful if you want to run things on your own machine.

Git — Version control for your code. We'll cover this on Day 17. If you don't have it, don't worry about it yet.

A deployment account — We'll deploy projects later using Vercel or Netlify. Both have free tiers. Set up accounts when we get to Day 14.

Knowledge Check

Which tool should you set up first if you want the fastest path to building something?

A

Cursor — install the editor and configure everything

B

Bolt — sign up in your browser and start building immediately

C

Git — set up version control before anything else

D

Node.js — install the runtime first

Bolt runs in your browser with zero installation. If you want to build something in the next 60 seconds, Bolt is the fastest path. You can always add Cursor, Node.js, and Git later as you need more control.

Troubleshooting

Cursor won't install? Make sure you have enough disk space (about 500 MB) and that your OS is up to date. Cursor supports macOS 10.15+, Windows 10+, and most Linux distros.

Bolt isn't loading? Try a different browser. Chrome and Edge work best. Disable ad blockers if the preview panel isn't rendering.

AI features aren't working? Make sure you're signed in and have an active plan. Both Cursor and Bolt have free tiers, but you need to create an account.

Final Check

What two categories of tools did you set up today?

A

A database and a server

B

An in-editor assistant (Cursor) and an app builder (Bolt)

C

A design tool and a testing tool

D

A frontend framework and a backend framework

You now have both types of AI coding tools ready. Cursor for when you want to control every file, and Bolt for when you want to build fast from a prompt. Tomorrow, you'll put them to work.

⚙️

Day 4 Complete

"Tools are set up. The hardest part is starting — and you just did."

Tomorrow — Day 5

Your First Vibe-Coded Project

Time to build something real — you'll create your first project from a single prompt and watch it come to life.

Continue to Day 5 →