Unit 1: Hello Claude, Hello World, Hello Production

Goal: Install Claude, have your first conversation, create an app, deploy it to the internet.

Time: 2-3 hours

Prerequisites: A computer, an internet connection, willingness to type commands you don't fully understand yet.

---

Where We're Going

You've used Uber. Probably dozens of times.

Open the app. Type a destination. Tap "Request." Watch a car icon glide toward your blue dot. A driver's face appears with a name and rating. The car arrives. You get in. You arrive. You leave without pulling out your wallet.

Simple. Magical. Invisible complexity.

You're going to build this.

Not the billion-dollar version with millions of drivers. But a working rideshare application - one where riders request rides, drivers accept them, locations update in real-time, and the whole thing runs on the internet for anyone to use.

By the end of this course:

Today - Unit 1 - you create the foundation. A live URL. The equivalent of having the Uber app installed and opening it for the first time.

It won't request rides yet. But it will exist. On the internet. Accessible to anyone with the link.

That's not nothing. That's everything else being possible.

---

The Bigger Picture: A New Way to Build

What Just Changed

For fifty years, programming looked like this:

1. Learn a programming language (months to years)
2. Memorize syntax, functions, patterns
3. Type code character by character
4. Run it, see errors, fix errors, repeat
5. Eventually, something works

This created a hard boundary: people who code, and people who don't.

That boundary is dissolving.

You can now describe what you want in plain English to an AI that understands both human language and programming languages. It writes code. You evaluate it. Together, you iterate until it works.

This doesn't mean programming knowledge is useless - the opposite. Understanding what's happening makes you better at directing the AI. But the starting line moved. You can build real things while learning, instead of learning for years before building.

What Claude Is

Claude is a large language model (LLM) - an AI trained on vast amounts of text, including code, documentation, conversations, books, and websites.

When you type to Claude:

• It doesn't search a database for answers
• It doesn't run your code to see what happens
• It predicts what text should come next, based on patterns in its training

This sounds simple. It isn't. The patterns are so complex that Claude can:

• Write working code in dozens of programming languages
• Explain concepts at different levels of complexity
• Debug errors by recognizing patterns it's seen before
• Suggest approaches based on what typically works

Claude is not a search engine. Search engines find existing pages. Claude generates new text - including code that may never have existed before in exactly that form.

Claude is not infallible. It makes mistakes. It hallucinates (confidently states things that aren't true). It can write code that looks right but has subtle bugs. It doesn't know what it doesn't know.

Claude is not conscious. It doesn't have desires, fears, or a sense of self. It's not trying to help you or hurt you. It's generating text that statistically follows from your input.

What Claude Is Good At

What Claude Struggles With

Your Role in This Partnership

You are not the passenger. You are the pilot.

Claude generates options. You decide which to take. Claude writes code. You verify it works. Claude suggests approaches. You evaluate tradeoffs.

Think of it like being Uber's CEO, not Uber's user. You're not just tapping buttons - you're deciding what the app should do and checking that it does it right.

The human responsibilities:

• Define what you're trying to build (the Uber-like experience)
• Evaluate whether output is correct
• Make judgment calls on tradeoffs
• Catch mistakes (Claude won't catch its own)
• Decide when something is "done"

The AI responsibilities:

• Generate code based on your description
• Explain concepts you don't understand
• Suggest approaches you haven't considered
• Do the repetitive typing
• Remember syntax so you don't have to

This is collaboration. Neither of you can build RideShare alone - you don't know the syntax, Claude doesn't know your vision.

---

Why Start by Deploying?

Think about the first time you opened Uber.

You didn't read the documentation. You didn't understand how GPS works. You didn't know what API was routing your request to drivers.

You downloaded it, opened it, and requested a ride. You figured out the details later.

We're doing the same thing with building software.

Deploying first teaches you:

1. The goal is real output. When you open Uber, you don't think about the code - you think about getting somewhere. Code that isn't deployed isn't software yet.

2. The full loop, immediately. Change → Deploy → Live. You'll do this hundreds of times. Start now.

3. That it's not magic. Deployment sounds intimidating. You'll do it in minutes.

4. Motivation through reality. A URL you can share is more motivating than code only you can run.

By tonight, you'll have shipped more software than most "learn to code" students ship in their first month. And you'll understand why that matters.

---

The Recipe

Step 1: Install Node.js

Claude CLI requires Node.js - the runtime that lets JavaScript run outside a browser.

What to do:

1. Go to nodejs.org
2. Download the LTS (Long Term Support) version
3. Run the installer, accept defaults
4. Open a terminal:
   • Mac: Press Cmd+Space, type "Terminal", press Enter
   • Windows: Press Windows key, type "Command Prompt" or "PowerShell", press Enter
5. Verify installation:

   node --version
   

   You should see something like v20.10.0 (exact version may differ)

Why Node.js?

JavaScript was created to run in web browsers. Node.js lets it run anywhere - on servers, on your laptop, in command-line tools. Uber's servers run Node.js. Most web development tools do too.

What success looks like: node --version prints a version number without errors.

If it doesn't work: The installer might need you to restart your terminal, or in some cases restart your computer. If you're still stuck, describe exactly what you see to Claude (once installed) or search the error message.

---

Step 2: Install Claude CLI

What to do:

npm install -g @anthropic-ai/claude-code

What this command means:

What success looks like: After some download progress, the command completes without errors.

If you see permission errors: On Mac/Linux, you might need sudo npm install -g @anthropic-ai/claude-code (and enter your password). On Windows, try running the terminal as Administrator.

---

Step 3: Start Claude

What to do:

claude

That's it. One word.

What happens:

The first time, Claude will ask you to authenticate. This connects your terminal to your Anthropic account. Follow the prompts - it will likely open a browser window where you log in or create an account.

After authentication, you'll see Claude's prompt - a place where you can type and Claude will respond.

What success looks like: You see a prompt waiting for your input. You can type to Claude.

---

Step 4: Your First Conversation

Before we build anything, let's just talk.

Type:

Hi. I'm about to build a rideshare app like a simplified Uber. This is my first
time using Claude CLI. Can you briefly explain what you can do to help me
build this?

Read Claude's response.

Notice:

• Claude understands the context (building a rideshare app)
• It explains its capabilities relevant to that goal
• It's conversational, not robotic

Now ask:

What's different about talking to you here in the CLI versus on the website?

Read the response.

The CLI version can:

• Read files on your computer (with your permission)
• Run commands in your terminal
• Edit code directly
• Interact with your development environment

The web version is just a chat window. The CLI version is a development partner with access to your project.

---

Step 5: Create Your Project Folder

Type to Claude:

I want to create a new folder called "rideshare" for my project.
I'd like it on my Desktop so I can find it easily.
Can you create it and navigate into it?

What Claude will do:

Claude will run commands like:

mkdir ~/Desktop/rideshare
cd ~/Desktop/rideshare

What's happening:

What success looks like: Claude confirms the folder was created and you're now "inside" it.

---

Step 6: Create a Next.js Application

Now we build something real.

Type to Claude:

Create a new Next.js application in this folder. Use TypeScript and Tailwind CSS.
Keep it simple - I want to get something running quickly so I can deploy it today.

What Claude will do:

Claude will run a command like:

npx create-next-app@latest . --typescript --tailwind --eslint --app --use-npm

This takes 1-2 minutes. You'll see lots of text scroll by - packages being downloaded, files being created.

What you're getting:

What success looks like: Claude reports the project was created successfully.

---

Step 7: Run Your Application Locally

Type to Claude:

Start the development server so I can see the app in my browser.

What Claude will do:

npm run dev

What you'll see:

▲ Next.js 14.x.x
- Local:        http://localhost:3000

What to do:

Open your browser. Go to http://localhost:3000.

You should see the default Next.js welcome page.

What "localhost" means:

localhost is your computer talking to itself. Like when you open Uber and it works even when you're offline (showing cached data) - your app is running locally. No one else can see it yet.

What success looks like: You see the Next.js welcome page in your browser.

---

Step 8: Make It RideShare

The default page is generic. Let's make it ours.

Type to Claude:

Replace the default homepage with something that looks like the start of a rideshare app:
- A centered heading that says "RideShare"
- A subtitle: "Get a ride in minutes"
- A button that says "Request Ride"

The button doesn't need to do anything yet - that's for later units.
Make it look clean and modern.

What Claude will do:

Claude will edit app/page.tsx to replace the default content with your design.

What's happening:

You described what you wanted in English. Claude translated that into code. This is the core loop you'll use for the entire course:

You describe → Claude codes → You evaluate → Repeat

What success looks like: Your browser shows "RideShare" with your subtitle and button.

If it doesn't look right: Tell Claude. "The heading is too small." "Make the button blue." "Center it vertically." Iterate until you're satisfied - just like Uber iterated on their design over years.

---

Step 9: Deploy to the Internet

Your app works locally. Now let's make it accessible to anyone.

Type to Claude:

I want to deploy this to Vercel so it's live on the internet.
I've never used Vercel before. Walk me through it.

What Claude will do:

1. Check if Vercel CLI is installed (install if not)
2. Guide you through authentication
3. Deploy your application

What Vercel is:

Vercel is a platform that hosts web applications. They created Next.js, so deployment is seamless. Think of it like the App Store for your code - you submit it, they host it, users can access it.

The deployment:

Once authenticated, Claude runs vercel --yes to deploy.

You'll see:

• Files uploading
• Build process running
• A URL when it's done

What success looks like: Claude gives you a URL like https://rideshare-abc123.vercel.app. Open it. See your app.

Test it:

• Open the URL on your phone
• Text it to a friend
• Open it in a different browser

It works everywhere. You shipped software. That button will eventually request real rides.

---

Checkpoint

You're done with this unit when:

• Node.js is installed (node --version works)
• Claude CLI is installed and authenticated
• You can have a conversation with Claude
• A Next.js project exists in your rideshare folder
• The app runs locally at localhost:3000
• You've customized the homepage with "RideShare" branding
• The app is deployed to Vercel
• You have a public URL that works

---

What Just Happened

You built the foundation of RideShare.

Right now it's like an Uber app that only shows the home screen. No login, no ride requests, no drivers. But the infrastructure exists:

• A codebase that can grow into a full application
• A deployment pipeline that can push updates to users
• A collaboration model with Claude that scales to complex features

Everything else in this course builds on what you just created.

Think about the Uber you know:

• Unit 1 (today): The app exists and opens ✓
• Unit 2: It looks like a real rideshare app
• Unit 3: It can remember ride requests
• Unit 4: Users can type their destinations
• Unit 5: Users can see their ride history
• ...and so on until you have a working rideshare application

The path is clear. Let's keep going.

---

Adapting When Things Differ

Every installation is different. Here's how to handle common variations:

Vercel Authentication Issues

The most common problem. Symptoms:

• "No credentials found"
• Login completes in browser but CLI doesn't recognize it

Tell Claude:

Vercel login isn't working. When I run `vercel whoami`, I get [paste the error].

Common fixes:

• Run vercel login directly in your terminal
• Try a different browser for OAuth
• Check for VPN/firewall issues

Port Already In Use

Symptom: "Port 3000 is already in use"

Tell Claude:

Port 3000 is busy. Can you use a different port or help me free up 3000?

Permission Denied

Symptom: "EACCES" or "Permission denied" during npm install

Tell Claude:

I'm getting permission errors when installing packages: [paste error]

Something Else

Template for productive debugging:

I'm trying to: [goal]
I expected: [what should happen]
What actually happened: [what you saw]
Error message: [exact text]

---

What You Learned

Claude CLI: Your AI development partner with access to your project files and terminal.

Node.js: Runtime that lets JavaScript run outside browsers. The engine under modern web development.

npm: Installs JavaScript packages. npm install downloads code others wrote.

Next.js: A React framework for web applications. Same technology powering major apps.

localhost: Your computer hosting a server for yourself. Only you can see it.

Vercel: A platform that hosts your code so anyone can access it via URL.

Deployment: Moving code from your laptop to a server. Making it real.

---

What's Next

Your app exists but it's static - a billboard, not a service.

In Unit 2, you'll:

• Make it look like a real rideshare landing page
• Set up Git and GitHub for version control
• Connect everything so pushing code automatically deploys

You'll have the workflow that professional developers use. And RideShare will start looking like something people would actually use.

The button still won't work. That's Unit 3 - where we add memory.