Technology Stack (Frontend Standard)

This document defines the standard technology stack for Flow Create Solutions frontend projects.

Core framework

• Next.js: App Router (required)
• React: (as used by Next.js)
• TypeScript: required (no new JS-only projects)

Styling

• Tailwind CSS: required
• No default external UI library (e.g., no MUI/Chakra/shadcn by default). Build and maintain a project’s reusable components in src/components/.

Data & forms

• TanStack Query (React Query): standard for client-side caching and async state (when client fetching is needed).
• React Hook Form + Zod: standard for forms and runtime validation.
• Client state: React state + context by default (introduce a state library only when justified and documented).

BFF architecture (required)

Frontends must follow a Backend-for-Frontend (BFF) shape:

• The browser talks to the Next.js app over same-origin endpoints.
• Next.js Route Handlers proxy to backend services.
• Authentication credentials (JWTs) are stored in HttpOnly Secure cookies and are read server-side only.

See the Frontend Architecture and Security sections for the complete boundary and flow.

Package management and version pinning (required)

Package manager

• npm only.
• package-lock.json is required and must be committed.

Node version pinning (single source of truth)

Each repo must make the supported Node version obvious and consistent across dev + CI.

Acceptable patterns (pick one and document it in the repo):

• .nvmrc (common), or
• package.json engines.node

Rule: Do not introduce multiple competing version sources without explicitly documenting an intentional transition.

Code quality toolchain (required)

• Formatter: Prettier
• Linter: ESLint
• Type check: tsc

Rule: these checks must run in CI for every PR.