Mission 4 of 9
Understand the Code Architecture
Explore the directory layout of your generated project to understand where pages, components, styles, and assets reside.
Identify Next.js App Router folder structure
Locate page.tsx, layout.tsx, components, and public assets
Understand component imports and JSX rendering
Mission Prerequisites
Running Dev Server
Mission Tasks (0 / 3)
Click tasks as you execute them locallyTASK 01
Locate Root Page File
Open `app/page.tsx` or `src/app/page.tsx` in your editor.
Expected Output:
File opened showing React component definition.TASK 02
Locate Components Directory
Find components like `Hero.tsx`, `Projects.tsx`, `Navbar.tsx` inside `components/`.
Expected Output:
Component file definitions listed.TASK 03
Locate Styles and Tailwind Config
Inspect `app/globals.css` to view theme color tokens.
Expected Output:
Theme colors and CSS variables displayed.Expected Result
Clear mental map of where components live and how `page.tsx` imports sub-components.
Super Admin Verified Mission (+100 XP)
Submit Proof of Completion
Upload a Screenshot (PNG/JPG) or PDF Document showing your executed code/output. Submitting allows you to immediately continue to the next mission while Super Admin verifies your work!
Tip: You can submit your proof and advance to the next mission immediately.