Understand the browser-facing architecture behind pages, components, state, rendering, and performance.
Loading progress…
Lesson 1
The frontend presents product information and controls while coordinating navigation, local state, validation, accessibility, and communication with backend services. Learn the founder decision, practical evidence, and warning signs that matter.
Lesson 2
Pages represent routes, layouts provide shared structure, and components package reusable interface content or behaviour. Learn the founder decision, practical evidence, and warning signs that matter.
Lesson 3
Client state records temporary interface conditions, while server data is authoritative product information retrieved from or persisted by a backend. Learn the founder decision, practical evidence, and warning signs that matter.
Lesson 4
Rendering strategies decide whether page output is prepared ahead of time, produced on the server per request, or assembled in the browser. Learn the founder decision, practical evidence, and warning signs that matter.
Lesson 5
A frontend framework supplies conventions for composing interfaces, data access, routing, rendering, and builds; Next.js is a React framework with server and client capabilities. Learn the founder decision, practical evidence, and warning signs that matter.
Lesson 6
A component library provides reusable interface patterns; shadcn/ui supplies editable component source assembled from accessible primitives rather than a sealed package. Learn the founder decision, practical evidence, and warning signs that matter.
Lesson 7
Responsive frontend architecture makes layout, content priority, data density, and interaction adapt coherently across devices. Learn the founder decision, practical evidence, and warning signs that matter.
Lesson 8
Frontend performance is how quickly useful content appears, becomes interactive, and responds under realistic devices and networks. Learn the founder decision, practical evidence, and warning signs that matter.
Lesson 9
Browser compatibility is the degree to which a product's required features and interactions work across the browsers and devices its audience uses. Learn the founder decision, practical evidence, and warning signs that matter.
Lesson 10
A vibe-coded frontend audit checks generated code for structure, accessibility, state handling, responsiveness, security boundaries, and maintainability. Learn the founder decision, practical evidence, and warning signs that matter.