05-first-build.md

🔥 SECTION 4 — Your First Real Build (Tiny but Real)

This is where it gets real. You're going to build something. It won't be perfect. It might be ugly. But it will be yours, and it will be live.

This section walks you through building your first app from idea to working prototype.

---

Lesson 4.1 — Picking a "Stupid Simple" Idea

Why Simple Wins

Most beginners make this mistake:

They try to build:

• A social media platform
• An e-commerce site
• A complex SaaS product

Result: They get overwhelmed, give up, and never ship.

Vibe coding rule: Start stupid simple. Make it work. Then make it better.

What "Stupid Simple" Means

A stupid simple idea:

• Takes 1 sentence to explain
• Has 1-2 core features
• Can be built in a few hours
• Solves 1 specific problem

Examples of stupid simple ideas:

✅ Note Saver

• "An app where users can save notes and see them later"
• Core feature: Save and view notes
• That's it. Nothing else.

✅ Daily Checklist

• "An app where users can create a daily checklist and check off items"
• Core feature: Create and check off items
• That's it.

✅ Idea Tracker

• "An app where users can save ideas and view them later"
• Core feature: Save and view ideas
• That's it.

✅ Resource Bookmarker

• "An app where users can save links to resources they want to remember"
• Core feature: Save and view links
• That's it.

The Rule

If it takes more than 1 sentence to explain, it's too big.

Your first build should be so simple that you feel almost embarrassed by it. That's perfect.

You're not building the next Facebook. You're building something that works.

How to Pick Your Idea

Option 1: Use your idea from Section 0

• You already wrote down what you want to build
• Use that, but simplify it
• Strip it down to 1 core feature

Option 2: Pick from the examples above

• Note Saver
• Daily Checklist
• Idea Tracker
• Resource Bookmarker

Option 3: Think of your own

• What's one thing you wish you had?
• What's one problem you face daily?
• What's one tool that would make your life easier?

Then simplify it until it's 1 sentence.

The Mindset

Your first version is supposed to be bad:

• It will be ugly
• It will be messy
• It will be wrong

That's normal. That's expected. That's how you learn.

Vibe coding is not about perfection. It's about momentum.

---

Lesson 4.2 — Building the Project Bones in Firebase Studio

Start with Project Bones

For vibe coding, we always start in Firebase Studio. This is where we build what I call the "project bones" — the basic structure and skeleton of your app.

Here's the process:

Step 1: Create Your Project in Firebase Studio

1. Go to Firebase Studio
2. Create a new project
3. Name it something simple (like my-note-app)

Step 2: Build the Project Bones with Prompts

Use prompts in Firebase Studio to get the basic structure:

Example prompts to get started:

1. "Create a simple web app structure with HTML, CSS, and JavaScript files"
2. "Set up a basic login page with email and password fields"
3. "Create a simple form to add notes with a title and content field"
4. "Set up a basic page to display a list of notes"

You're not building the full app yet. You're building the bones — the structure that everything else will attach to.

Get a few prompts in to get it moving. Don't try to build everything at once. Just establish the foundation.

Step 3: Publish from Firebase Studio

This is crucial: Publish your project from Firebase Studio.

1. Click "Publish" or "Deploy" in Firebase Studio
2. This creates your project folder in Firebase Console
3. This is what enables you to configure services

Why publish first? Because this creates your project in the Firebase ecosystem, which allows you to enable all the services you need.

Step 4: Enable Services in Firebase Console

Now go to Firebase Console (the project you just published):

1. Enable Authentication:

   • Go to Authentication → Sign-in method
   • Enable "Email/Password"
   • Save

2. Enable Firestore Database:

   • Go to Firestore Database
   • Click "Create database"
   • Start in test mode (we'll set up security rules later)
   • Choose a location (pick the closest to you)

3. Enable Hosting:

   • Go to Hosting
   • Click "Get started"
   • Follow the setup (Firebase will guide you)

This step makes your life much easier later. All your services are configured and ready to go. When you move to Cursor, everything is already set up.

Step 5: Sync to GitHub

Now sync your code to GitHub:

1. In Firebase Studio, click "Sync" or "Publish to GitHub"
2. Firebase Studio will ask you to create a GitHub repo
3. Enter a repo name (like my-note-app)
4. Make it private (don't commit secret keys)
5. Firebase Studio automatically creates the repo and syncs your code

Your project bones are now in GitHub, and all your Firebase services are enabled.

Step 6: Clone to Cursor

Now you're ready to build fast:

1. Clone the GitHub repo to your computer
2. Open the project folder in Cursor
3. Start building with AI

Why this order matters:

• Project bones are established
• All Firebase services are enabled and configured
• Cursor can immediately work with your Firebase setup
• No configuration headaches later

The key: Build bones → Publish → Enable services → Sync to GitHub → Build in Cursor. This order makes everything easier.

Accepting "Ugly First"

The code Cursor generates won't be perfect:

• The styling might be basic
• The structure might not be ideal
• There might be some inefficiencies

That's fine. You're not building perfect code. You're building something that works.

You can always refactor later. First, make it work.

Running the App Early

Don't wait until everything is perfect to run it.

As soon as Cursor generates the structure:

1. Run the app
2. See what works
3. See what doesn't
4. Fix what's broken
5. Repeat

The faster you see it running, the faster you'll understand what you're building.

The Iterative Process

Step 1: Scaffold

• Ask Cursor to create the basic structure
• Run it
• See what you have

Step 2: Fix

• What's broken?
• What's missing?
• Ask Cursor to fix it

Step 3: Improve

• What could be better?
• What's confusing?
• Ask Cursor to improve it

Step 4: Repeat

• Keep iterating
• Keep improving
• Keep building

You're not building everything at once. You're building, testing, and improving in cycles.

---

Lesson 4.3 — Connecting Firebase (High Level)

Auth Basics

Firebase Authentication handles:

• User sign-up
• User login
• Password reset
• Email verification
• Session management

You don't code this. You configure it.

In Firebase Studio:

1. Enable Authentication
2. Choose sign-in methods (Email/Password is the simplest)
3. That's it

In your app:

• Cursor will generate the auth code
• Users can sign up and log in
• Firebase handles the rest

No deep theory needed. It just works.

Database Basics

Firebase Firestore is a NoSQL database:

• You store data in "collections"
• Each item is a "document"
• Documents have "fields"

Think of it like this:

Collection: notes
  Document 1:
    - title: "My first note"
    - content: "This is the content"
    - userId: "user123"
  Document 2:
    - title: "My second note"
    - content: "More content"
    - userId: "user123"

That's it. No SQL. No complex queries. Just collections and documents.

In your app:

• Cursor will generate the database code
• You save notes to the "notes" collection
• You read notes from the "notes" collection
• Firebase handles the rest

No Deep Firebase Theory Yet

You don't need to understand:

• How Firebase works under the hood
• Database optimization
• Security rules (yet)
• Complex queries

You just need to know:

• Users can sign up and log in (auth)
• You can save data (database)
• You can read data (database)

That's enough to build your first app.

Focus on Working, Not Perfect

Your first version:

• Might not have perfect security rules
• Might not be optimized
• Might not scale to millions of users

That's fine. You're building version 1, not version 100.

Get it working. Then make it better.

The Connection Flow

Here's how it works:

1. User signs up/logs in → Firebase Auth handles it
2. User creates a note → App saves it to Firestore
3. User views notes → App reads from Firestore
4. User deletes a note → App removes it from Firestore

Firebase handles the infrastructure. Your app handles the logic.

You don't need to understand everything. You just need to make it work.

---

🎯 Action Step: Build Your First App

Right now, do this (in this exact order):

1. Pick your stupid simple idea (from Lesson 4.1)

2. Go to Firebase Studio:

   • Create a new project
   • Name it something simple

3. Build the project bones with prompts:

   • "Create a simple web app structure"
   • "Set up a basic login page"
   • "Create a form for [YOUR CORE FEATURE]"
   • Get a few prompts in to establish the structure

4. Publish from Firebase Studio:

   • Click "Publish" or "Deploy"
   • This creates your project in Firebase Console

5. Enable services in Firebase Console:

   • Enable Authentication (Email/Password)
   • Enable Firestore Database
   • Enable Hosting
   • Get everything configured

6. Sync to GitHub:

   • In Firebase Studio, sync to GitHub
   • Create a private repo
   • Firebase Studio handles it automatically

7. Clone to Cursor:

   • Clone the GitHub repo to your computer
   • Open the project folder in Cursor
   • Now build fast with AI

8. Keep building and iterating:

   • Use Cursor to add features
   • Commit changes to GitHub
   • Sync back to Firebase Studio when ready

Don't skip steps. This order makes everything easier.

Remember: Build bones first. Enable services. Then build fast in Cursor. Your first version is supposed to be bad. That's how you learn.

---

Next: SECTION 5 — Shipping (Most People Never Get Here)

Having issues? Check out the Troubleshooting Guide for common fixes.