Interface
The React client presents user records and the create, inspect, edit and delete interactions.
Project / 04
Completed
UsersCRUD
A full-stack user management system with explicit client, API and persistence layers.
A full-stack CRUD application built with a React and TypeScript client connected to an Express API and MongoDB persistence through Mongoose.
Visual / 04System view
Project system
UsersCRUD
Status
Completed
Domains
04
Knowledge Nodes
13
Cross-domain
07
01 / System Context
Why this
system exists.
UsersCRUD is a full-stack user-management application built as two separate projects: a React and TypeScript client and an Express and TypeScript API. The project focuses on coordinating forms, client state, HTTP communication, REST operations and persistent user records.
Problem
The system needed to coordinate user management across form validation, client state, asynchronous requests, REST endpoints and persistent document storage.
02 / Architecture
System
structure.
The frontend organizes user behavior around feature-level components, schemas, services and Zustand state. Axios communicates with an Express REST API whose routes delegate to controllers and services before data is persisted through Mongoose in MongoDB.
01React Client
02Form Validation
03Client State
04Axios
05Express API
06Mongoose
07MongoDB
03 / Runtime Flow
From input
to outcome.
Validation
React Hook Form and Zod manage form input and validation before user data is submitted.
Client State
Zustand coordinates user-oriented application state and asynchronous operations.
HTTP
An Axios instance sends requests to the dedicated /api/users REST boundary.
API
Express routes delegate CRUD requests through controller and service responsibilities.
Persistence
Mongoose models user records and persists them in MongoDB.
04 / Decisions
Decisions,
not defaults.
01
Separate frontend and backend repositories
The client and API remain independently structured applications, making their responsibilities and deployment boundaries explicit.
02
Organize frontend behavior by feature
User-specific components, services, schemas, types and state are grouped around the users domain instead of being distributed arbitrarily across the application.
03
Separate API responsibilities
Routes, controllers, services and models prevent HTTP routing, application behavior and persistence logic from collapsing into one layer.
04
Validate forms explicitly
React Hook Form and Zod keep input collection and validation separate from the rest of the user-management workflow.
05 / Knowledge Evidence
Knowledge,
applied.
Engineering Domains
FEFrontend
BEBackend
DAData
QAQuality
DLDelivery
TLTooling
Validated Knowledge Nodes
13ReactTypeScriptViteTailwind CSSReact Hook FormZodZustandNode.jsExpressMongoDBMongooseGitGitHub
06 / Quality
Built to
hold up.
The project emphasizes explicit frontend and backend boundaries, typed application code and separated responsibilities across the complete CRUD flow.
Repositories
02
Client
React 19
API
Express
Persistence
MongoDB
01
TypeScript on frontend and backend
02
Feature-oriented frontend structure
03
Zod form schemas
04
React Hook Form integration
05
Zustand client-state layer
06
Dedicated Axios API boundary
07
Route → controller → service → model backend separation
08
Mongoose persistence model
07 / Outcome
System
result.
The result is a complete CRUD system in which user operations travel through explicit layers from the React interface to validation and state, across an HTTP API and finally into persistent MongoDB records.