#1
Structure
How a request reaches a page
app/(site) · layouts, prerender
architectureapi
Continue
AI writes your code in minutes.
Understanding it still takes weeks.
Crux reads a real repository and writes short, interactive courses from the code that is actually in it. Then it checks, by asking, that the people shipping that code can explain it.
How Crux works
crux.kiasm.dev/courses
Your courses
Connect a repository
Pick a repo and Crux generates guided courses from it in about a minute.
Repositories
Connect a repository
Pick a repo and Crux generates guided courses from it in about a minute. Already generated one? Pick it again to open it.
kiasm/crux-web
maincrux.kiasm.dev/courses
Your courses
kiasm/crux-webmain
how sessions and the auth guard workAuto ▾
To do
#2
Concepts
Talking to GitHub without write access
modules/github
integrationsauth
Start
#3
General
Next.js App Router
12 steps · as kiasm/crux-web uses it
uiapi
Continue
#4
Structure
The datastore port and its two adapters
shared/server/datastore
datainfra
Start
#5
Code
What the test suite actually covers
vitest · *.test.ts
testing
Start
#6
General
Firebase Auth and Firestore rules
10 steps · as kiasm/crux-web uses it
authdata
Start
crux.kiasm.dev/courses/onboarding_…_main_architecture
How a request reaches a page
architectureapiPage 1 of 3
Every page on this site goes through the same few steps between a URL and the HTML you get back. This course follows one of them.
After this course you'll be able to
- ·Say which file renders a given URL
- ·Explain what the (site) layout adds around every page
- ·Tell what happens at build time from what happens in the browser
app/(site)/layout.tsxStep 1 of 4
export default function SiteLayout({children,}: Readonly<{ children: React.ReactNode }>) {return (<div className="crux-scope-cream min-h-screen bg-bg"><AnnouncementBar /><SiteHeader />{children}<ClosingCta /><SiteFooter /></div>);}
A layout is a component that receives the page as children.
- ·The URL picks a page file; the route group picks the layout around it.
- ·The layout wraps the page before it is rendered, at build time.
- ·Hydration in the browser comes last, and only for client components.
Files to remember
app/(site)/layout.tsxapp/(site)/page.tsx
crux.kiasm.dev/courses/onboarding_…_main_architecture
4 of 4 questions
Put the request path in the order it actually runs.
Put the steps in the sequence they actually run in.
- 1The page renders to HTML at build time
- 2Next matches the URL to app/(site)/page.tsx
- 3The browser hydrates the client components
- 4The (site) layout wraps it in header and footers
← Previous
crux.kiasm.dev/mastery
Your mastery
Comprehension by domain over the last year
AugSepOctNovDecJanFebMarAprMayJunJulArchitectureAuth & SecurityAPIDataInfra & DevOpsUI & FrontendTestingIntegrationsConcepts
lessmore
“Not understanding the way someone chose to solve a problem”
“Interactive overview of the codebase showing architecture, module relationships, data flow, dependencies. Explain why design decisions were made.”
No. Read-only GitHub access, on the branch you pick, and you can delete your repository data whenever you want.