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

Section 02: Getting Started

Now that you understand the fundamental technologies, it's time to get hands-on! In this section, you'll clone the K12worX repository, install dependencies, run the development server, and make your first code change.

What You'll Do

  1. Clone the repository from GitHub
  2. Install project dependencies
  3. Run the development server
  4. Explore the website on localhost
  5. Make your first visible code change!

Why This Matters

This is where theory meets practice. By the end of this section, you'll:

  • Have the actual codebase on your computer
  • See the website running locally
  • Make a change and see it update live
  • Experience the development workflow

Prerequisites

Before starting, make sure you've completed:

Estimated Time

1-2 hours (including download time)

Sections

Follow these in order:

  1. Cloning the Repository
  2. Running the Dev Server
  3. Exploring Localhost
  4. Your First Code Change

What You'll Learn

Technical Skills

  • How to clone a Git repository
  • How to install npm packages
  • How to run a development server
  • How to make and test code changes

Development Workflow

  • Edit code → Save → Browser updates automatically
  • This is called "hot reload" or "fast refresh"
  • You'll use this workflow constantly!

Success Checkpoint

After completing this section, you should be able to:

  • Clone the repository using git
  • Install dependencies with npm
  • Start the dev server
  • Open the website at localhost:3000
  • Make a text change that appears in the browser
  • Understand the edit-save-refresh cycle

Common Issues

If you run into problems:

  1. Port already in use: Another app is using port 3000

    • Solution: Stop other apps or use a different port

  2. npm install fails: Network or permission issues

    • Solution: Check internet connection, try sudo npm install (Mac/Linux)

  3. Git not found: Git not installed or not in PATH

See Troubleshooting for more help.

Tips for Success

1. Read Error Messages

If something fails, read the entire error message. It usually tells you exactly what's wrong!

2. One Step at a Time

Don't rush ahead. Make sure each step works before moving to the next.

3. Take Notes

Write down:

  • Commands you used
  • Where the project is located on your computer
  • Any issues you encountered and how you solved them

4. Ask for Help

If you're stuck for more than 15 minutes, ask for help! See Getting Help.

Next Steps

Ready to get the code? Let's start by cloning the repository:

Cloning the Repository →