React Client
The web application owns presentation, interaction and client-side application composition.
Project / 01
In progress
FlowBoard
A full-stack workspace designed as a modular engineering system across client, API, data and delivery layers.
A full-stack application being built as a monorepo with an independent React client and Express API, focusing on explicit boundaries between frontend, backend, data and infrastructure concerns.
Visual / 01System view
Project system
FlowBoard
Status
In progress
Domains
06
Knowledge Nodes
26
Cross-domain
10
01 / System Context
Why this
system exists.
FlowBoard is an active full-stack consolidation project designed to move beyond isolated frontend concerns and model a larger application across client, API, persistence, authentication, quality and delivery boundaries.
Problem
The project explores how a larger application can remain understandable as responsibilities expand across routing, server state, authentication, persistence, testing and deployment.
02 / Architecture
System
structure.
The project uses an npm-workspaces monorepo with two independently structured applications: a React SPA in apps/web and an Express REST API in apps/api. Each layer has explicit responsibilities while remaining part of one development system.
01React Client
02Router
03REST API
04Express
05Auth
06MongoDB
03 / Runtime Flow
From input
to outcome.
Router
React Router Data APIs provide explicit application routing and route-level behavior.
Server State
TanStack Query separates remote server state from local interface state.
REST API
The frontend communicates with a separately structured Express API through explicit HTTP contracts.
Authentication
JWT and refresh-token flows form the authentication boundary between client and server.
Persistence
MongoDB and Mongoose provide the initial persistence layer for application data.
04 / Decisions
Decisions,
not defaults.
01
Use a monorepo without merging application boundaries
The web client and API share one repository for development coordination while remaining independently structured applications that can be deployed separately.
02
Separate server, client and form state
TanStack Query, Zustand and React Hook Form solve different state problems and are intentionally not collapsed into a single global state mechanism.
03
Use React Router Data APIs
The project deliberately practices modern standalone React routing instead of relying on framework-provided routing.
04
Introduce backend responsibilities explicitly
Authentication, persistence, request validation and API boundaries are modeled as backend concerns rather than hidden behind frontend abstractions.
05 / Knowledge Evidence
Knowledge,
applied.
Engineering Domains
FEFrontend
BEBackend
DAData
QAQuality
DLDelivery
TLTooling
Validated Knowledge Nodes
26ReactTypeScriptViteReact RouterTanStack QueryZustandReact Hook FormZodTailwind CSSshadcn/uiMotion / Framer MotionNode.jsExpressMongoDBMongooseJWTVitestReact Testing LibraryESLintPrettierGitHub ActionsGitGitHubnpmHuskylint-staged
06 / Quality
Built to
hold up.
Quality infrastructure is introduced as part of the system from the beginning rather than being added only after feature implementation.
Repository
Monorepo
Applications
02
Web
React SPA
API
Express REST
01
TypeScript strict mode
02
Vitest + React Testing Library
03
ESLint and Prettier
04
Husky and lint-staged
05
GitHub Actions
06
Explicit feature and application boundaries
07 / Outcome
System
result.
FlowBoard is being used as a progressive full-stack engineering system in which frontend architecture, backend services, persistence, authentication, quality automation and delivery practices can be consolidated inside one coherent project.
Current state
Active development. The repository foundation and initial engineering phases are complete while the application continues evolving through the remaining full-stack feature phases.