Architecture
This page documents the stack, data flow, and folder structure of
fe-serenity-code-landing-page.
Stack
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript (strict) |
| Package Manager | Bun |
| Styling | Tailwind CSS v4 |
| Global State | Zustand |
| Server State | TanStack Query |
| API Client | Orval (generated from OpenAPI) + native fetch mutator |
| i18n | next-intl (EN/ID) |
| Forms | React Hook Form + Zod |
| Resend + React Email |
Data Flow
FE never accesses Payload CMS directly. All data flows through BE Landing Page.
Folder Structure
src/
├── app/ # Next.js App Router pages & layouts
├── components/ # UI components (kebab-case files)
├── hooks/ # Custom hooks (camelCase files)
├── lib/
│ ├── api/ # Orval-generated client (read-only)
│ ├── constants/
│ └── utils/
├── types/ # Shared TypeScript types
└── store/ # Zustand stores (global UI state only)