🎵 Vibe Coding 101: Build Apps with Claude Code

🤖 What is AI?

Artificial Intelligence (AI) is about building systems that can perform tasks that typically require human intelligence, including understanding language, recognizing images, making decisions, and generating content.

🎵 Why "Vibe Coding"?

Vibe coding is a new way to build software: instead of writing every line yourself, you describe what you want in plain English and an AI assistant writes the code for you. You guide the direction; the AI handles the syntax.

🏗️ What We'll Build

By the end of this course you will have built and deployed a full web application that lets users explore a world map, click on countries, and learn about them through interactive quizzes, complete with user accounts and progress tracking.

Beyond the guided project, each person will also create their own unique app; you pick the idea, and use the skills from this course to build and deploy it yourself.

📋 Prerequisites

• 💻 A laptop (Mac, Windows, or Linux)
• 🐙 A free GitHub account
• ✨ Curiosity, no prior coding experience needed!

📥 Step 1: Install VS Code

Download and install Visual Studio Code (free). This is the code editor we'll use throughout the course.

🧩 Step 2: Install Claude Code

Open VS Code, go to the Extensions panel (the square icon on the left sidebar), search for "Claude Code", and click Install.

🐍 Step 3: Install Python 3.12+

You'll need Python version 3.12 or higher. Check your version by opening a terminal and running:

python3 --version

If you don't have Python 3.12+ installed:

Mac / Linux:

brew install [email protected]

Windows:

Download the installer from python.org/downloads and run it. Make sure to check "Add Python to PATH" during installation.

📁 Step 4: Create Your Project

Create a new folder for your project and open it in VS Code:

1. Create a folder called my-cool-app on your computer
2. In VS Code, go to File → Open Folder and select my-cool-app

👋 Step 5: Write Your First Code

Create a file called app.py in your project folder and add this line:

print("Hello World!")

Now run it from the terminal:

Mac / Linux:

python3 app.py

Windows:

python app.py

You should see Hello World! printed in the terminal.

📄 Step 6: Add a CLAUDE.md File

Create a file called CLAUDE.md in your project folder. This file guides Claude Code on how to write code for your project, like giving it a rulebook to follow.

Paste the following into CLAUDE.md:

## Core
- Use Flask
- Generate minimal, clean code
- Only write code that is used
...

## Core
- Use Flask
- Generate minimal, clean code
- Only write code that is used

## Structure
- Modular: app.py, routes/, services/, templates/, static/
- Small, single-purpose functions
- No overengineering
- No fallbacks (fail explicitly with clear errors)

## Flask
- Use Blueprints
- Use Jinja templates
- Use `if __name__ == "__main__"`

## Dependencies
- Minimal `requirements.txt`
- Pin versions
- No heavy libs unless needed

## Deployment (Render)
- Must run: `gunicorn app:app`
- Use `PORT` env variable
- No localhost hardcoding

## Env & Secrets
- No hardcoded keys
- Use environment variables

## API / LLM
- Keep prompts concise
- Separate prompt / call / parsing

## Output Rules
- Output only code + file structure + requirements.txt
- No explanations

## Avoid
- No unused code/imports
- No duplicate logic
- No large monolithic files

## Storage & DB
- SQLite (local), Postgres (prod)
- Use SQLAlchemy ORM

## Security
- No raw SQL (use parameterized queries)
- Hash passwords (bcrypt)
- No plaintext secrets
- Validate inputs
- Use env vars for credentials
- Least privilege access

## Data
- Store minimal data
- No sensitive logs
- No error leakage

✅ Step 7: Verify Claude Code

Open the Claude Code panel in VS Code and type:

Hello! Can you describe the files in this project?

If Claude responds, you're all set!

🎯 The Goal

Build a web page that displays an interactive world map. When a user clicks on a country, they get a set of multiple-choice questions to learn fun facts about that country.

💬 Prompting Claude Code

Open Claude Code and try a prompt like this:

Create a website that shows an interactive world map. When the user clicks on a country, show a page with 5 multiple-choice questions about that country (geography, culture, history, etc.). Show the score at the end. Use HTML, CSS, and JavaScript. Make it look modern and colorful.

📦 What to Expect

Claude will generate the files for you. Review what it creates:

• 📄 An HTML page with an SVG or interactive map
• ⚡ JavaScript to handle country clicks and quiz logic
• 🎨 CSS for styling and layout

🔄 Iterate and Improve

This is the magic of vibe coding, just ask for changes:

• "Make the map bigger and center it on the page"
• "Add a flag icon next to each country name"
• "Make the correct answer turn green and wrong answers turn red"

🤔 Why User Accounts?

To track each user's quiz progress, we need a way for users to create an account and log in. This way their scores are saved and they can pick up where they left off.

💬 Prompting Claude Code

Ask Claude to add authentication:

Add a login and signup system to this app. Users should be able to create an account with their email and password, log in, and have their quiz progress saved to their account. Use a simple backend with a database.

🔨 What Claude Will Build

• 📝 A signup page with email and password fields
• 🔑 A login page with session management
• 💾 A database to store user accounts and progress
• 🛡️ Protected routes, so only logged-in users can take quizzes

🧪 Testing It Out

1. Create a test account on the signup page
2. Log in with your credentials
3. Take a quiz and verify your score is saved
4. Log out and log back in; your progress should still be there

🤔 Why GitHub?

GitHub is where developers store and share code. You'll need it to deploy your app later, and it keeps a safe backup of your project.

📦 Step 1: Create a Repository

1. Go to github.com/new
2. Name your repo (e.g., world-quiz-app)
3. Set it to Private and click Create repository

🚀 Step 2: Push with Claude Code

Ask Claude to help you push:

Help me push this project to my GitHub repository at https://github.com/YOUR_USERNAME/world-quiz-app

⚙️ What Happens

Claude will run the Git commands for you:

git init
git add .
git commit -m "Initial commit - world quiz app"
git remote add origin https://github.com/YOUR_USERNAME/world-quiz-app.git
git push -u origin main

Once pushed, visit your GitHub repo URL to see your code live on the web!

🔑 If Git Push Doesn't Work

If you get a permission or authentication error when pushing, you likely need to set up SSH keys. Ask Claude Code for help:

Help me generate SSH keys and add them to my GitHub account so I can push code.

Claude will walk you through generating a key and adding it to your GitHub settings.

☁️ What is Render?

Render is a platform that hosts your app on the internet so anyone can access it, for free.

📝 Step 1: Create a Render Account

Sign up at render.com using your GitHub account for easy integration.

🔗 Step 2: Connect Your GitHub

In your Render dashboard, go to Account Settings → Git and connect your GitHub account. This allows Render to access your private repositories and auto-deploy on every push.

⚡ Step 3: Create a Web Service

1. Click "New +" → "Web Service"
2. Select your GitHub repo from the list
3. Set the Build Command to:

pip install -r requirements.txt

4. Set the Start Command to:

gunicorn app:app

5. Click "Create Web Service"

🎉 Step 4: Go Live!

After a few minutes, Render gives you a live URL like:

https://world-quiz-app.onrender.com

Share it with friends and family; your app is now on the internet! 🎉

🙌 Now It's Your Turn!

You've learned the core skills. Now it's time to build something of your own. Think of an app idea you're excited about and create a landing page for it.

💡 Pick Your App Idea

Choose something you'd actually want to use. Here are some ideas to get you started:

• 🍳 A recipe finder that suggests meals based on ingredients you have
• 📊 A habit tracker with streaks and daily reminders
• 🗣️ A flashcard app for learning a new language
• 📍 A local events board for your neighborhood
• 💪 A fitness log that tracks workouts and progress

🏗️ Build Your Landing Page

Ask Claude Code to create a landing page for your app. Here's an example prompt you can adapt:

Create a beautiful landing page for my [YOUR APP NAME] app. It should have:
- A hero section with a catchy headline and a call-to-action button
- A section explaining how it works in 3 simple steps
- A section highlighting the key features
- A footer with links
Make it modern, colorful, and mobile-friendly.

✨ Make It Yours

Iterate on the design until you love it. Try prompts like:

• "Change the color scheme to [your favorite colors]"
• "Add an illustration or icon that represents [your app's purpose]"
• "Make the hero section more eye-catching"

🔗 From Landing Page to Full App

Take the landing page you built in Module 7 and turn it into a fully working application. Apply everything you've learned in this course:

• 🗺️ Interactive frontend (Module 3)
• 🔐 User accounts and login (Module 4)
• 🐙 Version control with GitHub (Module 5)
• 🌐 Deployment on Render (Module 6)

🔨 Build the Core Features

Ask Claude to build out the main functionality of your app:

Turn my landing page into a working app. Add the core features:
1. A signup/login system so users can create accounts
2. [Describe your app's main feature]
3. Save user data and progress to a database
4. Add a dashboard where users can see their activity
Make the navigation consistent across all pages.

💎 Polish and Ship

• "Make it work great on mobile phones"
• "Add loading animations between pages"
• "Improve the overall look and feel"

When you're happy with it, push to GitHub and deploy on Render, just like you did before.

Share Your App! 🚀

Share your live URL with friends, family, and the VAM! community. You now have a live, full-stack web application that you designed and built yourself, congratulations!