Frontend Foundations

Trails in This Module

1. Trail 1

   What the Frontend Actually Does

   Does the browser help the user complete the task while the server remains the source of truth? Define which responsibilities belong in the browser and which rules must remain enforced by the backend.

   Open Trail

2. Trail 2

   Pages, Layouts, and Components

   Does the browser help the user complete the task while the server remains the source of truth? Reuse genuine patterns while keeping page-specific logic close to the page that owns it.

   Open Trail

3. Trail 3

   Client State and Server Data

   Does the browser help the user complete the task while the server remains the source of truth? Keep authoritative data on the server and use client state only for interaction that the browser legitimately owns.

   Open Trail

4. Trail 4

   Static Rendering, Server Rendering, and Client Rendering

   Does the browser help the user complete the task while the server remains the source of truth? Choose rendering per route based on freshness, personalisation, search visibility, and interaction rather than one site-wide preference.

   Open Trail

5. Trail 5

   Frontend Frameworks and Next.js

   Does the browser help the user complete the task while the server remains the source of truth? Adopt a framework because its operating model fits the team and product, not because it is currently fashionable.

   Open Trail

6. Trail 6

   Component Libraries and Shadcn UI

   Does the browser help the user complete the task while the server remains the source of truth? Use library components as reviewed foundations and retain a clear policy for customisation, updates, and accessibility.

   Open Trail

7. Trail 7

   Responsive Frontend Architecture

   Does the browser help the user complete the task while the server remains the source of truth? Define component behaviour at constrained widths and with long content before composing full desktop pages.

   Open Trail

8. Trail 8

   Frontend Performance

   Does the browser help the user complete the task while the server remains the source of truth? Measure the user journeys that matter, then reduce the specific code, media, data, or third-party delay responsible.

   Open Trail

9. Trail 9

   Browser Compatibility

   Does the browser help the user complete the task while the server remains the source of truth? Set a support policy from audience evidence and test critical workflows against that policy.

   Open Trail

10. Trail 10

    Auditing a Vibe-Coded Frontend

    Does the browser help the user complete the task while the server remains the source of truth? Trace complete workflows and inspect repeated patterns before extending a generated interface.

    Open Trail