Station 5: Getting Started with Real Projects

Understanding Git and GitHub

Before Grace showed me the workflow, she explained what these tools actually do and why developers use them.

Git vs. GitHub

Three Copies: Original, Fork, and Local

Grace drew me a diagram showing the three versions of a project I'd be working with:

Magic Quotes: A Practice Environment

Grace introduced me to Magic Quotes—a real project intentionally designed for beginners to practice developer workflows.

Two Ways to See the Same Project

Grace said: "Visit both. See how the website works, then look at the code to understand how it was built. That's what developers do—they explore the running version first, then study the code."

Before You Start: What You'll Need

Grace asked me to check that I had the right tools installed before I started practicing. I already had everything, but this was my first time actually using them together.

Tools You'll Use

Step 1: Forking Creates Your Safe Workspace

Grace walked me through forking first. "This creates your own copy on GitHub," she explained. "Whatever you do in your fork cannot affect the original. That's what makes it safe to practice."

How I Forked Magic Quotes

1. I visited github.com/cynthiateeters/magic-quotes
2. I clicked the Fork button in the top-right corner
3. GitHub asked me where to create the fork—I selected my account
4. A few seconds later, I had my own copy at github.com/[my-username]/magic-quotes

HAP's Confession:

I was nervous about forking. "What if I break something?" Grace reminded me: "Your fork is YOUR copy. The original repository cannot be affected by anything you do in your fork. You have complete freedom to experiment." That made me feel safe to try. 😳

What I noticed: My fork looks identical to the original—same files, same structure. But the repository name at the top shows my username, with a note: "forked from cynthiateeters/magic-quotes". That confirmed I was in my own workspace.

Step 2: Cloning Brings Code to Your Computer

After forking, Grace told me: "Now you need a local copy—files on your computer where you can actually explore and run the project. That's what cloning does."

How I Cloned Using VS Code

Grace showed me the VS Code way (no terminal commands needed):

1. On my fork's GitHub page, I clicked the green Code button
2. I copied the HTTPS URL (it looked like https://github.com/[my-username]/magic-quotes.git)
3. In VS Code, I opened the Command Palette (Cmd+Shift+P on Mac, Ctrl+Shift+P on Windows)
4. I typed "Git: Clone" and selected that command
5. I pasted my fork's URL
6. VS Code asked where to save the files—I chose a folder on my computer
7. After a few seconds, VS Code asked if I wanted to open the cloned repository—I clicked "Open"

Three Copies: The Full Picture

What I noticed: Once I opened the cloned repository in VS Code, I could see all the files in the Explorer panel. These were real files on my computer now—not just something I was viewing on GitHub.

Step 3: Exploring Files and Documentation

With Magic Quotes open in VS Code, Grace told me: "Before running anything, explore. Read the README. Look at the folder structure. Understand what you're working with."

What I Found in the Root README

I opened README.md and read the project overview. It explained:

• Purpose: Magic Quotes displays random quotes on a website
• Structure: One JSON file per contributor in the data/ folder
• Commands: npm install, npm run dev, npm run validate
• Contributing: Clear guidelines on creating quote files

Following the Documentation Hierarchy

The root README pointed me to data/README.md for contributor guidelines. I navigated there and found:

• Required JSON fields: author, about, entries
• Schema rules: unique IDs, valid categories, allowed tones
• Example files showing correct patterns

Studying an Example File

I opened data/quote-example.json and saw this structure:

{
  "author": "Example Contributor",
  "about": "Demonstrating the Magic Quotes JSON structure",
  "entries": [
    {
      "id": "example-001",
      "category": "developer-wisdom",
      "tone": "reflective",
      "text": "Code is read more often than it is written.",
      "source": "ai-assisted"
    }
  ]
}

What I noticed: I didn't need to understand the JavaScript files or how Vite works. The JSON structure was clear enough that I could see what I'd need to create later. That made the project feel approachable.

Step 4: Setting Up and Seeing It Work

Grace said: "Now validate your setup. Run the project locally and see it work. That proves everything is configured correctly."

Opening the Integrated Terminal

Grace showed me how to open VS Code's integrated terminal:

• Menu: Terminal → New Terminal
• Keyboard: Ctrl+` (backtick key)

The terminal opened at the bottom of VS Code, already in my magic-quotes folder. No need to navigate—VS Code knew where I was working.

Installing Dependencies

I ran my first command:

npm install

What happened: npm read package.json (the file listing required tools) and downloaded everything the project needs. A node_modules/ folder appeared with hundreds of files—these are the tools Vite and other systems use.

HAP's Confession:

I was terrified to run npm install because I didn't understand what "dependencies" meant. When I finally ran it, I realized it just means "tools this project needs to work." The package manager downloaded them automatically. I had built up anxiety over something that took 30 seconds. 😳

Starting the Development Server

Next, I ran:

npm run dev

What happened: Vite started a local web server. The terminal showed:

VITE v5.0.0  ready in 234 ms

  ➜  Local:   http://localhost:5173/
  ➜  press h + enter to show help

I opened my browser and visited localhost:5173. Magic Quotes appeared—the same website I'd seen at magic-quotes.netlify.app, but running on my computer!

🟠 HAP's breakthrough moment:

Seeing Magic Quotes running on localhost made everything click. This wasn't just reading about code—I was running production-quality code on my laptop. The website worked. The quotes displayed. Everything functioned. That's when I felt like I was practicing being a developer.

Testing the Validation System

With the dev server still running in one terminal, I opened a second terminal (Terminal → New Terminal) and ran:

npm run validate

What happened: The validation script checked all JSON files in data/ against the schema rules. It confirmed:

• All required fields present
• All IDs unique
• All categories and tones valid
• No syntax errors

The terminal showed: ✓ All quote files are valid

What I noticed: These three commands—npm install, npm run dev, npm run validate—are the core developer workflow. Install tools, run the project, check quality. That's what developers do every day.

HAP's Readiness: What I Accomplished

After running npm run validate successfully, I stepped back and realized what I'd done. I hadn't written any code yet—but I'd practiced the entire developer setup workflow.

HAP's reflection:

Before Station 5, Git, GitHub, npm, and Vite were intimidating terms. Now they're tools I've actually used. I forked a real repository. I cloned it to my computer. I ran it locally and saw it work. I didn't just read about the developer workflow—I practiced it. That makes me feel ready for what's next.

What Prof. Teeters Said

After I showed Prof. Teeters my running localhost and successful validation, she smiled:

"HAP, what you did today—forking, cloning, setting up a project, validating your environment—this is what professional developers do every day. You didn't write code yet, but you learned the workflow. That matters more than you think."

"Magic Quotes gave you a low-stress way to practice with real tools. Now you know what it feels like to work like a developer. That confidence will carry you through everything that comes next."

What I'm ready for: In Station 6, I'll create my own quote file (quote-hap.json), use VS Code's Source Control panel to commit my work, and practice the full Git workflow. But I already have everything set up. No friction, no setup time—just practice.