Project Setup
Create the first folder and files.
6% track progress
📂 Step 1 — Open the Project for This Track
Open this folder in VS Code or your editor:
tracks/react/final-project/
Open Final Project Folder📄 Step 2 — Files to Edit
For this track, these are the important files:
Start with the yellow file, then update the others only when the task asks you to.
🎯 Step 3 — Learning Objective
Students create the foundation of the KBC project.
🔨 Step 4 — Fully Defined Student Task
What to build
- Create/open the final-project folder for this track.
- Create the core files listed in the file section if they do not exist.
- Add a visible heading: KBC Quiz.
- Add a short subtitle: JSON powered quiz project.
- Run the project and confirm the heading appears.
Acceptance Criteria
- The project opens without error.
- The page/app shows KBC Quiz clearly.
- The main files exist in the correct folder.
What to submit to the teacher
- Screenshot of first screen.
- List of created files.
- One sentence explaining the purpose of each file.
Do not move ahead until
- The project runs without errors.
- You can explain which files changed.
- The acceptance criteria above are satisfied.
▶ Step 5 — Run the Project
Use this command or method:
cd tracks/react/final-project npm install npm run dev
✅ Step 6 — Checkpoint Output
KBC Quiz
Project Setup should now work.
A. Sample optionB. Sample optionC. Sample optionD. Sample option🧠 Step 7 — Mini Quiz
- What exact feature did this milestone add?
- Which file changed the most and why?
- Which acceptance criterion proves the work is complete?
🆘 Full Code Fallback
👀 View / Copy Complete Help
Open this only after trying.
// Milestone 01: Project Setup
// Open: tracks/react/final-project/
// Complete every item under "What to build".
// Test every item under "Acceptance Criteria".Create/open the final-project folder for this track.
Create the core files listed in the file section if they do not exist.
Add a visible heading: KBC Quiz.
Add a short subtitle: JSON powered quiz project.
Run the project and confirm the heading appears.Ask the student to demonstrate the running output, then ask which file changed and why.🌐 GitHub Commit
After the milestone works, commit it:
git add . git commit -m "Complete React milestone 01: Project Setup" git push