Back to .md Directory
Data Flow Diagram (DFD) - Dynamic Form Application
Maps data flows between user, admin, frontend, backend, and MongoDB for a dynamic form application.
View sourceWhat this file does
Maps data flows between user, admin, frontend, backend, and MongoDB for a dynamic form application.
When to use it
- Documenting system architecture for a form builder project
- Communicating data flow to new team members or stakeholders
- Planning API endpoints and database interactions for form submission
Assumes this stack
ReactExpressMongoDBJWT
Data Flow Diagram (DFD) - Dynamic Form Application
Context Diagram (Level 0)
┌─────────────────────────────────────────────────────────────────┐
│ │
│ DYNAMIC FORM APPLICATION │
│ │
│ ┌──────────────┐ │
│ │ │ │
│ │ USER │ │
│ │ │ │
│ └──────┬───────┘ │
│ │ │
│ │ 1. Request Form │
│ │ 2. Form Configuration │
│ │ 3. Submit Form Data │
│ │ 4. Response Confirmation │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ FRONTEND (React Application) │ │
│ │ │ │
│ │ • Home Page (Dynamic Form) │ │
│ │ • Admin Dashboard │ │
│ │ • Form Editor │ │
│ │ • Responses Management │ │
│ │ • Analytics Dashboard │ │
│ │ │ │
│ └──────┬───────────────────────────────────────┬───────────┘ │
│ │ │ │
│ │ 5. API Requests │ │
│ │ 6. API Responses │ │
│ │ │ │
│ ▼ ▼ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ BACKEND (Express API) │ │
│ │ │ │
│ │ • Form Routes │ │
│ │ • Response Routes │ │
│ │ • Admin Routes │ │
│ │ • Authentication Middleware │ │
│ │ │ │
│ └──────┬───────────────────────────────────────┬───────────┘ │
│ │ │ │
│ │ 7. Read/Write Form Config │ │
│ │ 8. Read/Write Responses │ │
│ │ │ │
│ ▼ ▼ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ MONGODB DATABASE │ │
│ │ │ │
│ │ • FormConfigs Collection │ │
│ │ • Responses Collection │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────┐ │
│ │ │ │
│ │ ADMIN │ │
│ │ │ │
│ └──────┬───────┘ │
│ │ │
│ │ 9. Login Request │
│ │ 10. JWT Token │
│ │ 11. Manage Forms │
│ │ 12. View Responses │
│ │ 13. View Analytics │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ADMIN DASHBOARD │ │
│ │ │ │
│ │ • Form Management │ │
│ │ • Form Editor │ │
│ │ • Responses Table │ │
│ │ • Analytics Charts │ │
│ │ • Users List │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
External Entities:
- USER: Pengguna yang mengisi form
- ADMIN: Administrator yang mengelola form dan melihat responses
Data Flows:
- Request Form - User meminta form untuk diisi
- Form Configuration - Sistem mengirim konfigurasi form ke user
- Submit Form Data - User mengirim data form yang telah diisi
- Response Confirmation - Sistem mengirim konfirmasi submission
- API Requests - Frontend mengirim request ke backend
- API Responses - Backend mengirim response ke frontend
- Read/Write Form Config - Backend membaca/menulis konfigurasi form
- Read/Write Responses - Backend membaca/menulis data responses
- Login Request - Admin mengirim request login
- JWT Token - Sistem mengirim token autentikasi
- Manage Forms - Admin mengelola form (create, update, delete, archive)
- View Responses - Admin melihat data responses
- View Analytics - Admin melihat analitik data
DFD Level 1
┌─────────────────────────────────────────────────────────────────────────────┐
│ │
│ DYNAMIC FORM APPLICATION │
│ │
│ ┌──────────────┐ │
│ │ │ │
│ │ USER │ │
│ │ │ │
│ └──────┬───────┘ │
│ │ │
│ │ D1: Form Request │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 1.0 LOAD PRIMARY FORM │ │
│ │ │ │
│ │ Input: D1 (Form Request) │ │
│ │ Output: D2 (Form Configuration) │ │
│ │ Process: │ │
│ │ - Request primary form from API │ │
│ │ - Handle form initialization if needed │ │
│ │ - Display form to user │ │
│ │ │ │
│ └──────┬───────────────────────────────────────────────────────────────┘ │
│ │ │
│ │ D2: Form Configuration │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 2.0 RENDER DYNAMIC FORM │ │
│ │ │ │
│ │ Input: D2 (Form Configuration) │ │
│ │ Output: D3 (Rendered Form UI) │ │
│ │ Process: │ │
│ │ - Parse form configuration │ │
│ │ - Render fields based on type │ │
│ │ - Apply validation rules │ │
│ │ - Display form to user │ │
│ │ │ │
│ └──────┬───────────────────────────────────────────────────────────────┘ │
│ │ │
│ │ D3: Rendered Form UI │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 3.0 FILL FORM │ │
│ │ │ │
│ │ Input: D3 (Rendered Form UI) │ │
│ │ Output: D4 (Form Data) │ │
│ │ Process: │ │
│ │ - User fills form fields │ │
│ │ - Client-side validation │ │
│ │ - Data cleaning and normalization │ │
│ │ │ │
│ └──────┬───────────────────────────────────────────────────────────────┘ │
│ │ │
│ │ D4: Form Data │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 4.0 SUBMIT FORM │ │
│ │ │ │
│ │ Input: D4 (Form Data) │ │
│ │ Output: D5 (Submission Confirmation) │ │
│ │ Process: │ │
│ │ - Validate all required fields │ │
│ │ - Clean data (extract option text, normalize) │ │
│ │ - Send to API │ │
│ │ - Show success message │ │
│ │ - Redirect to success page │ │
│ │ │ │
│ └──────┬───────────────────────────────────────────────────────────────┘ │
│ │ │
│ │ D5: Submission Confirmation │
│ │ │
│ ▼ │
│ ┌──────────────┐ │
│ │ │ │
│ │ USER │ │
│ │ │ │
│ └──────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 5.0 API CLIENT │ │
│ │ │ │
│ │ Input: D4 (Form Data), D6 (Form Config Request), etc. │ │
│ │ Output: D7 (API Response), D2 (Form Configuration) │ │
│ │ Process: │ │
│ │ - Format API requests │ │
│ │ - Add authentication headers (JWT) │ │
│ │ - Handle errors │ │
│ │ - Parse responses │ │
│ │ │ │
│ └──────┬───────────────────────────────────────┬───────────────────────┘ │
│ │ │ │
│ │ D8: HTTP Request │ D9: HTTP Response │
│ │ │ │
│ ▼ ▼ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 6.0 BACKEND API SERVER │ │
│ │ │ │
│ │ Input: D8 (HTTP Request) │ │
│ │ Output: D9 (HTTP Response) │ │
│ │ Process: │ │
│ │ - Route requests to appropriate handlers │ │
│ │ - Authenticate admin requests │ │
│ │ - Validate input data │ │
│ │ - Process business logic │ │
│ │ │ │
│ └──────┬───────────────────────────────────────┬───────────────────────┘ │
│ │ │ │
│ │ D10: Form Config Query │ D11: Form Config Data │
│ │ D12: Response Data │ D13: Response Query │
│ │ │ │
│ ▼ ▼ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 7.0 STORAGE SERVICE │ │
│ │ │ │
│ │ Input: D10 (Form Config Query), D12 (Response Data) │ │
│ │ Output: D11 (Form Config Data), D13 (Response Query) │ │
│ │ Process: │ │
│ │ - CRUD operations for FormConfig │ │
│ │ - CRUD operations for Response │ │
│ │ - Primary form management │ │
│ │ - Archive/unarchive forms │ │
│ │ │ │
│ └──────┬───────────────────────────────────────┬───────────────────────┘ │
│ │ │ │
│ │ D14: Database Query │ D15: Database Result │
│ │ │ │
│ ▼ ▼ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 8.0 MONGODB DATABASE │ │
│ │ │ │
│ │ Collections: │ │
│ │ - FormConfigs (id, title, description, fields, isPrimary, │ │
│ │ isArchived, createdAt, updatedAt) │ │
│ │ - Responses (_id, formId, data, email, submittedAt) │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────┐ │
│ │ │ │
│ │ ADMIN │ │
│ │ │ │
│ └──────┬───────┘ │
│ │ │
│ │ D16: Login Credentials │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 9.0 ADMIN AUTHENTICATION │ │
│ │ │ │
│ │ Input: D16 (Login Credentials) │ │
│ │ Output: D17 (JWT Token) │ │
│ │ Process: │ │
│ │ - Verify password │ │
│ │ - Generate JWT token │ │
│ │ - Store active session │ │
│ │ - Return token to frontend │ │
│ │ │ │
│ └──────┬───────────────────────────────────────────────────────────────┘ │
│ │ │
│ │ D17: JWT Token │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 10.0 ADMIN DASHBOARD │ │
│ │ │ │
│ │ Input: D17 (JWT Token) │ │
│ │ Output: D18 (Dashboard UI) │ │
│ │ Process: │ │
│ │ - Verify session │ │
│ │ - Load all forms │ │
│ │ - Load all responses │ │
│ │ - Display dashboard │ │
│ │ │ │
│ └──────┬───────────────────────────────────────────────────────────────┘ │
│ │ │
│ │ D18: Dashboard UI │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 11.0 FORM MANAGEMENT │ │
│ │ │ │
│ │ Input: D19 (Form Management Actions) │ │
│ │ Output: D20 (Form Management Results) │ │
│ │ Process: │ │
│ │ - Create new form │ │
│ │ - Edit existing form │ │
│ │ - Delete form │ │
│ │ - Set form as primary │ │
│ │ - Archive/unarchive form │ │
│ │ │ │
│ └──────┬───────────────────────────────────────────────────────────────┘ │
│ │ │
│ │ D19: Form Management Actions │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 12.0 FORM EDITOR │ │
│ │ │ │
│ │ Input: D21 (Form Edit Actions) │ │
│ │ Output: D22 (Updated Form Config) │ │
│ │ Process: │ │
│ │ - Edit form title and description │ │
│ │ - Add/remove/edit fields │ │
│ │ - Configure field properties │ │
│ │ - Save form configuration │ │
│ │ │ │
│ └──────┬───────────────────────────────────────────────────────────────┘ │
│ │ │
│ │ D21: Form Edit Actions │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 13.0 RESPONSES VIEWER │ │
│ │ │ │
│ │ Input: D23 (Response Query) │ │
│ │ Output: D24 (Response Data Display) │ │
│ │ Process: │ │
│ │ - Load all responses │ │
│ │ - Filter by form │ │
│ │ - Display in table format │ │
│ │ - Export to CSV/Excel │ │
│ │ │ │
│ └──────┬───────────────────────────────────────────────────────────────┘ │
│ │ │
│ │ D23: Response Query │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 14.0 ANALYTICS GENERATOR │ │
│ │ │ │
│ │ Input: D25 (Analytics Query) │ │
│ │ Output: D26 (Analytics Charts) │ │
│ │ Process: │ │
│ │ - Aggregate response data │ │
│ │ - Generate statistics │ │
│ │ - Create charts (bar, pie, line) │ │
│ │ - Display analytics dashboard │ │
│ │ │ │
│ └──────┬───────────────────────────────────────────────────────────────┘ │
│ │ │
│ │ D25: Analytics Query │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 15.0 USERS LIST │ │
│ │ │ │
│ │ Input: D27 (User Query) │ │
│ │ Output: D28 (Users List) │ │
│ │ Process: │ │
│ │ - Extract unique emails from responses │ │
│ │ - Display users list │ │
│ │ │ │
│ └──────┬───────────────────────────────────────────────────────────────┘ │
│ │ │
│ │ D28: Users List │
│ │ │
│ ▼ │
│ ┌──────────────┐ │
│ │ │ │
│ │ ADMIN │ │
│ │ │ │
│ └──────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Process Descriptions:
1.0 LOAD PRIMARY FORM
- Menerima request form dari user
- Memanggil API untuk mendapatkan primary form
- Jika tidak ada, initialize default form
- Mengembalikan form configuration
2.0 RENDER DYNAMIC FORM
- Menerima form configuration
- Parse fields berdasarkan type (text, email, number, textarea, select, checkbox, radio)
- Render UI components sesuai type
- Apply validation rules
3.0 FILL FORM
- User mengisi form fields
- Client-side validation real-time
- Data cleaning dan normalization
4.0 SUBMIT FORM
- Validate semua required fields
- Clean data (extract option text, normalize values)
- Send data ke API
- Show success message dan redirect
5.0 API CLIENT
- Format HTTP requests
- Add JWT token untuk admin requests
- Handle errors dan retries
- Parse JSON responses
6.0 BACKEND API SERVER
- Route requests ke appropriate handlers
- Authenticate admin requests dengan JWT middleware
- Validate input data
- Process business logic
7.0 STORAGE SERVICE
- CRUD operations untuk FormConfig
- CRUD operations untuk Response
- Primary form management (ensure only one primary)
- Archive/unarchive forms
8.0 MONGODB DATABASE
- Store FormConfigs collection
- Store Responses collection
- Indexes untuk performance
9.0 ADMIN AUTHENTICATION
- Verify password
- Generate JWT token
- Store active sessions
- Return token
10.0 ADMIN DASHBOARD
- Verify session
- Load all forms dan responses
- Display dashboard dengan tabs
11.0 FORM MANAGEMENT
- Create, edit, delete forms
- Set primary form
- Archive/unarchive forms
12.0 FORM EDITOR
- Edit form metadata (title, description)
- Add/remove/edit fields
- Configure field properties
- Save configuration
13.0 RESPONSES VIEWER
- Load all responses
- Filter by form
- Display in table
- Export to CSV
14.0 ANALYTICS GENERATOR
- Aggregate response data
- Generate statistics (avg, min, max)
- Create charts (bar, pie, line)
- Display analytics
15.0 USERS LIST
- Extract unique emails from responses
- Display users list
Data Stores:
D1-D28: Data flows antara processes
External Entities:
- USER: Pengguna yang mengisi form
- ADMIN: Administrator yang mengelola sistem
Data Dictionary
Form Configuration
- id: String (unique identifier)
- title: String (form title)
- description: String (form description)
- fields: Array of FormField
- isPrimary: Boolean (primary form flag)
- isArchived: Boolean (archived flag)
- createdAt: Number (timestamp)
- updatedAt: Number (timestamp)
Form Field
- id: String (field identifier)
- name: String (field name)
- label: String (field label)
- type: Enum (text, email, number, textarea, select, checkbox, radio)
- required: Boolean
- placeholder: String (optional)
- options: Array of String (for select/radio/checkbox)
Form Response
- id: String (response identifier)
- formId: String (form identifier)
- data: Object (form data)
- email: String (user email, optional)
- submittedAt: Number (timestamp)
JWT Token
- token: String (JWT token)
- expiresIn: String (expiration time)
- admin: Boolean (admin flag)
Notes
- Authentication Flow: Admin login menggunakan JWT token yang disimpan di localStorage
- Primary Form: Hanya satu form yang bisa menjadi primary pada satu waktu
- Archive System: Form yang di-archive tidak bisa diisi oleh user
- Data Cleaning: Data dari checkbox/radio di-clean untuk extract option text
- Session Management: Active sessions disimpan di memory (backend) dan localStorage (frontend)
What's inside
Context diagram (Level 0) and Level 1 DFD with 13 data flows, 8 processes, 2 external entities, and 2 database collections.
Change this for your project
- Replace
form-survei-wisudawith your own repository name - Replace
MarioSitepuwith your GitHub username - Replace
FormConfigsandResponsescollection schemas with your actual field definitions
Where it goes
Save as AGENTS.md in your repository root. Read by Codex, Cursor and other agents that follow the AGENTS.md convention.
Worth borrowing
- Separating user-facing form flow from admin dashboard flow in the same diagram
- Numbering data flows to trace end-to-end request paths
Related Documents
AGENTS.md
Browser-only development
Guides AI assistants on an Electron + React + TypeScript desktop app for browsing and organizing AI-generated images locally.
airagprompt
0
7
LuqP2AGENTS.md
Claude Agents — Reference & Recommendations
Catalogues 40+ Claude agents and marketing skills for building a cat adoption charity landing page, with a ready-to-paste prompt and backend API reference.
aiagentrag
0
476
magda2307AGENTS.md
Golden DKG Prototype -- Master Plan
Defines an 8-phase implementation plan for a Rust prototype of the Golden non-interactive DKG protocol using BLS12-381 and tokio.
aiagenteval
0
83
farazshaikhAGENTS.md
Swarms Examples Index
Lists 60+ example scripts for building single and multi-agent systems with the Swarms framework, organized by category and use case.
aiagentopenai
0
64
The-Swarm-Corporation