008
LVL 00 — CADET PILOT SESSION 008 DAY 8

CLONING PIXELCRAFT

← PREV NEXT →
SYS.SCENARIO
🏢 Your team lead sends you a link: the PixelCraft repository on GitHub. "Clone it. Set up your development environment. Get it running locally. If the README doesn't help, use your terminal skills and figure it out."
CONCEPTS.UNLOCKED
☁
Remote Repositories
Code hosted on GitHub/GitLab — not just your machine. The single source of truth the whole team shares.
📥
Clone, Pull, Push
git clone (download repo + history), git pull (get latest changes), git push (send your changes). The sync triad.
📦
package.json
The project manifest: name, version, dependencies, and scripts. The recipe that tells npm what the project needs.
📂
node_modules/
Downloaded dependency code. NEVER commit this. Generated by npm install from package.json. Can contain hundreds of packages.
$
npm Scripts
npm install (download dependencies), npm run dev (start dev server). Scripts defined in package.json automate common tasks.
🗂
Project Structure
src/ (source code), public/ (static assets), config files at root. Every project follows a structure — learn to read it.
HANDS-ON.TASKS
01
Clone the Repo
▶
git clone <pixelcraft-repo-url> cd pixelcraft
git clone downloads the entire repository including all history — every commit, every branch, everything. You now have a complete copy.
02
Explore with Terminal
▶

Use your Session 2–3 skills to map the codebase:

ls -la # All files including .git, .gitignore # Count source files find . -name "*.js" -not -path "*/node_modules/*" | wc -l find . -name "*.css" -not -path "*/node_modules/*" | wc -l # Read the project manifest cat package.json # See remotes git remote -v
03
Understand the Structure
▶
pixelcraft/ ├── public/ ← Static assets (images, favicon) ├── src/ ← Source code │ ├── index.html ← Entry point HTML │ ├── styles/ ← CSS files │ │ ├── main.css │ │ ├── toolbar.css │ │ └── settings.css │ ├── scripts/ ← JavaScript files │ │ ├── app.js ← Main application logic │ │ ├── filters.js ← Image filter functions │ │ ├── canvas.js ← Canvas operations │ │ ├── toolbar.js ← Toolbar UI logic │ │ └── utils.js ← Helper functions │ └── assets/ ← Icons, fonts ├── package.json ← Dependencies & scripts ├── .gitignore ← Files Git ignores ├── .eslintrc.json ← Linting configuration ├── .prettierrc ← Formatting configuration └── README.md ← Documentation
04
Install & Run
▶
npm install # Downloads all packages ls node_modules | wc -l # How many packages? (hundreds!) npm run dev # Start development server

Open the local URL in the browser. PixelCraft is running on your machine.

npm install reads package.json, downloads every dependency (and their dependencies), and puts them all in node_modules/. This is why node_modules is huge and never committed.
05
Read 5 Source Files
▶

Open 5 files in src/scripts/. For each, write a comment at the top:

// I think this file does: _________________________

Don't worry about understanding every line. Read the function names, variable names, and comments. Build a rough mental model.

06
Terminal Codebase Challenge
▶

Answer these using only terminal commands:

# (a) Find the largest file in src/ find src/ -type f -exec ls -la {} \; | sort -k5 -rn | head -1 # (b) Which JS file contains the word "filter"? grep -rl "filter" src/scripts/ # (c) How many total lines of JavaScript? find src/ -name "*.js" | xargs wc -l
CS.DEEP-DIVE

Dependency Graphs.

PixelCraft's package.json lists ~10 direct dependencies. But npm install downloads 300+ packages because each dependency has its own dependencies. This forms a dependency tree (actually a DAG — Directed Acyclic Graph).

// Dependency graphs appear everywhere:

University      → course prerequisites form
                  a dependency graph
Build systems   → Makefiles resolve task dependencies
OS libraries    → libA depends on libB depends on libC
npm packages    → 10 direct → 300+ total

// Circular dependencies (A needs B, B needs A)
// cause deadlocks — a classic CS problem.
// npm resolves the graph automatically,
// but understanding it helps you debug installs.
"Codebase Map"
[A] Create a Markdown file (codebase-map.md) documenting every directory and key file in PixelCraft with one-sentence descriptions.
[B] List all direct dependencies from package.json. For each, write what you think it does (guess first, then look it up).
[C] Run npm ls --depth=0 and npm ls --depth=1 to see the dependency tree. How deep does it go?
REF.MATERIAL
VIDEO
Git and GitHub for Beginners — Full Course
freeCodeCamp
Comprehensive walkthrough covering clone, push, pull, pull requests, and remote workflows. Covers everything from Sessions 6–8.
GITGITHUBREMOTES
ARTICLE
About package.json — npm Docs
npm
Official reference for every field in package.json: dependencies, devDependencies, scripts, version, license.
NPMPACKAGE.JSONREFERENCE
VIDEO
Node.js and npm in 100 Seconds
Fireship
Lightning-fast overview of what Node.js and npm actually are. Context for why npm install downloads 300 packages.
NODENPMQUICK
ARTICLE
Hello World — GitHub Docs
GitHub
GitHub's official getting started guide — creating repos, branches, commits, and pull requests through the web interface.
GITHUBOFFICIAL
VIDEO
Dependency Hell — Fireship
Fireship
Why node_modules is so massive, what dependency resolution looks like, and the left-pad incident that broke the internet.
DEPENDENCIESNPM
// LEAVE EXCITED BECAUSE
You're inside the real codebase. It's big — 50+ files, hundreds of dependencies — but you navigated it with terminal commands, found specific files, and GOT IT RUNNING. You're looking at the product you'll build for the next 120 sessions.