K
K12worX Education501(c)(3) Public Charity
Jamboree

Your First Code Change

Congratulations! You're about to make your first contribution to the K12worX codebase. This is a significant milestone in your coding journey!

What We'll Do

Make a simple, visible change to the homepage:

  1. Find the code that generates the homepage
  2. Change some text
  3. See it update in the browser
  4. Understand what just happened

Before You Start

Make sure:

  • ✅ Dev server is running (npm run dev)
  • ✅ Browser open at http://localhost:3000
  • ✅ VS Code open with the project

Step 1: Open the Homepage File

In VS Code:

  1. Open the file explorer (left sidebar)
  2. Navigate to: app/page.tsx
  3. Click to open the file

You'll see TypeScript/React code with JSX.

Step 2: Find the Text to Change

Look for the main headline. Around line 20-30, you'll find something like:

<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
  Every Student Can Achieve Their Full Academic Potential
</h1>

Tip: Use Cmd+F (Mac) or Ctrl+F (Windows) to search for "Every Student"

Step 3: Make the Change

Original:

Every Student Can Achieve Their Full Academic Potential

Change to:

Empowering Students Through Peer Tutoring

Or any message you like! This is your practice change.

Step 4: Save the File

Press Cmd+S (Mac) or Ctrl+S (Windows)

Watch what happens:

  1. Terminal: Shows "compiled successfully"
  2. Browser: Updates automatically (< 1 second!)
  3. No manual refresh needed!

Step 5: Verify the Change

Look at your browser - the headline should now show your new text!

If it doesn't update:

  1. Check the terminal for errors
  2. Try hard refresh: Cmd+Shift+R (Mac) / Ctrl+Shift+R (Windows)
  3. Make sure you saved the file

Understanding What Happened

The Code You Changed

<h1 className="...">
  Every Student Can Achieve Their Full Academic Potential
</h1>

Breaking this down:

  • <h1>: HTML heading element (level 1, largest)
  • className="...": Tailwind CSS classes for styling
  • Text inside: What displays in browser

The Build Process

When you saved:

  1. Next.js detected the file change
  2. TypeScript compiled the code (checking types)
  3. React rendered the new component
  4. Browser updated via hot reload

All in < 1 second!

Why It Works

Next.js Fast Refresh:

  • Watches all files for changes
  • Only re-compiles what changed
  • Preserves your application state
  • Updates browser automatically

This is the modern development experience!

More Changes to Try

Change 2: Update the Subtitle

Find the subtitle (below the headline):

Original:

<p className="mt-6 text-lg leading-8 text-gray-600">
  The K12worX Learning Jamboree connects motivated high school student
  tutors with underserved K-8 students.
</p>

Try changing:

  • The text content
  • Save and watch it update!

Change 3: Modify a Color

Find a Tailwind class like text-gray-600

Change to: text-blue-600

Save - the text color changes to blue!

Other colors to try:

  • text-red-600
  • text-green-600
  • text-purple-600
  • text-pink-600

Change 4: Adjust Text Size

Find text-lg (large text)

Change to:

  • text-xl (extra large)
  • text-2xl (2x large)
  • text-sm (small)

Save and see the difference!

Change 5: Add Your Name

Add a comment to the code:

{/* Modified by [Your Name] on [Date] */}
<h1 className="...">
  Your changed text here
</h1>

Comments in JSX:

  • Use {/* comment */} syntax
  • Won't appear in browser
  • Good for leaving notes in code

Making Mistakes (On Purpose!)

It's important to see what errors look like.

Mistake 1: Remove a Closing Tag

Delete a </h1> tag and save.

What happens:

  • ❌ Browser shows error overlay
  • ❌ Terminal shows error message
  • Both tell you the line number!

Fix it: Add the tag back, save - error gone!

Mistake 2: Typo in className

Change className to classname (lowercase n)

What happens:

  • Browser still works (it ignores it)
  • But styling disappears!
  • TypeScript might warn you

Fix it: Correct to className

Mistake 3: Break the JSX

Delete a > from an opening tag:

<h1 className="..." 
  Broken!
</h1>

What happens:

  • ❌ Syntax error in browser and terminal
  • Tells you exactly where the problem is

Fix it: Add the > back

Reading Error Messages

When you make a mistake, you'll see:

Browser Error Overlay

Error: Unexpected token
  at page.tsx:25:5

<h1 className="..."
    ^^^ Expected >

Reading this:

  • File: page.tsx
  • Line: 25
  • Column: 5
  • What's wrong: Missing >

Terminal Error

./app/page.tsx:25:5
Syntax error: Unexpected token

  23 | <div>
  24 |   <h1 className="..."
> 25 |     Broken!
     |     ^
  26 |   </h1>
  27 | </div>

Reading this:

  • Shows surrounding code
  • > marks the error line
  • ^ points to exact location

Key lesson: Error messages are helpful! Read them carefully.

Best Practices You Just Learned

1. Save Often

Get in the habit: Edit → Save → Check Browser

2. Small Changes

Make one change at a time. If something breaks, you know what caused it!

3. Test Immediately

Don't make 10 changes without testing. Test after each one!

4. Read Errors

When red text appears, don't panic. Read what it says!

5. Use Hot Reload

Trust the hot reload. No need to manually refresh the browser!

Undoing Changes

Made a change you don't like?

Option 1: Manual Undo

Press Cmd+Z (Mac) or Ctrl+Z (Windows) in VS Code

Option 2: Git Reset

# Discard all changes in current file
git checkout -- app/page.tsx

# Or discard all changes in project
git checkout -- .

The file returns to its original state!

Committing Your Change (Optional)

Want to save your change in Git? We'll learn Git in detail later, but here's a preview:

# Check what changed
git status

# See the actual changes
git diff app/page.tsx

# Stage the change
git add app/page.tsx

# Commit with a message
git commit -m "Update homepage headline"

Don't worry if this seems complex - we'll cover it thoroughly in Section 07: Git Basics!

Common Questions

Q: Can I break the production website?

A: No! You're working on localhost (your computer only). The live site is separate and safe.

Q: What if I break something and can't fix it?

A: Use git checkout -- . to reset everything. Or ask for help!

Q: Should I change actual content or just practice?

A: For now, just practice! Make changes, then undo them. When you're ready for real contributions, you'll follow the Git workflow (Section 07).

Q: Why do some changes require page refresh?

A: Most don't! But changes to certain files (like layout.tsx or config files) might need a manual refresh or server restart.

Celebration Checklist

You should have:

  • Opened app/page.tsx in VS Code
  • Found the homepage headline in the code
  • Changed the headline text
  • Saved and saw it update in the browser
  • Tried changing a color
  • Tried changing text size
  • Purposely broke something and saw the error
  • Fixed it and saw the error disappear
  • Understood the edit-save-refresh cycle

If you checked all these, congratulations! 🎉

What You've Accomplished

You've just:

  • ✅ Made your first code change
  • ✅ Experienced hot reload
  • ✅ Learned to read error messages
  • ✅ Understood the development workflow
  • ✅ Connected browser output to code files

This is huge! You're now officially contributing to the codebase!

Next Steps

You've completed the Getting Started section! Now let's deepen your understanding of how the codebase is structured:

Continue to Section 03: Understanding Structure →

Quick Reference

Open homepage file:

app/page.tsx

Save file:

Cmd+S (Mac) or Ctrl+S (Windows)

Undo changes:

Cmd+Z (Mac) or Ctrl+Z (Windows)

Reset file to original:

git checkout -- app/page.tsx

Search in file:

Cmd+F (Mac) or Ctrl+F (Windows)