# maipriyanshuhoooon/crud-app architecture

> Architecture diagram of the GitHub repository maipriyanshuhoooon/crud-app, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-23). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/maipriyanshuhoooon/crud-app
- Repository: https://github.com/maipriyanshuhoooon/crud-app

## Overview

1. **Repository shape**
   - This is a two-part MERN application with a hard split between `Backend/` and `Frontend/`.
   - The runtime boundary is clean: the React SPA talks only to the Express API over HTTP, and the API talks to MongoDB through Mongoose.
   - Top-level `Dockerfile` suggests the project is also intended to be containerized for deployment.

2. **System boundary and main data flow**
   - Primary flow is: browser UI → axios → Express REST endpoints → Mongoose models → MongoDB Atlas.
   - Responses come back as JSON and are used by the frontend to update global state and render task cards, modal views, and auth screens.
   - Authentication is lightweight and client-driven in this repo: the frontend stores a user identifier in `localStorage` and sends it in a custom `user` header.

3. **Backend bootstrap**
   - `Backend/index.js` is the server entry point.
   - It loads environment variables, connects to the database, imports the Express app, and starts listening on the configured port.
   - `Backend/src/app.js` is the Express composition layer: it applies middleware and mounts the API router under `/api/v1`.

4. **Backend infrastructure and configuration**
   - `Backend/src/db.config.js` encapsulates the MongoDB connection via Mongoose.
   - `cors` and JSON body parsing are enabled at the app level, which means the API is designed for cross-origin browser access from the Vite dev server.
   - Environment configuration is externalized through `.env` so database credentials and port are not hardcoded.

5. **Backend domain model**
   - `Backend/src/model/user.model.js` defines the user document shape used for registration and login.
   - `Backend/src/model/task.model.js` defines the task document shape, including a reference back to the owning user.
   - The task collection is the main business data store; most API operations are scoped to the authenticated user.

6. **Backend API contract**
   - `Backend/src/routes.js` contains the application’s REST contract.
   - It exposes endpoints for registration, login, profile retrieval, task listing, task creation, single-task fetch, update, and deletion.
   - A custom auth middleware reads the `user` header, resolves the user, and places it on `req.user` so all task queries can be user-scoped.
   - ObjectId validation is handled before database operations, which protects the API from malformed task IDs.

7. **Frontend runtime and app shell**
   - `Frontend/src/main.jsx` mounts the React app into the Vite-served HTML shell.
   - `Frontend/src/App.jsx` wires together routing, global context, and the common layout pieces like navbar and footer.
   - The app is a single-page client, with page transitions handled by React Router rather than full browser reloads.

8. **Frontend navigation and access control**
   - `Frontend/src/layout/ProtectedLayout.jsx` is the route guard for authenticated areas.
   - If there is no stored user identifier, the layout redirects to `/login`; otherwise it renders nested routes.
   - Public routes include login, registration, and the fallback error page; protected routes cover the dashboard and task creation.

9. **Frontend state boundary**
   - `Frontend/src/context/MainContext.jsx` is the central client state layer for task data.
   - It fetches the full task list, stores it in context, and exposes helpers for adding/removing tasks locally.
   - This context is the main bridge between API responses and UI rendering, reducing prop drilling across the component tree.

10. **Frontend API integration**
    - `Frontend/src/utils/axiosClient.js` is the HTTP client boundary.
    - It sets the backend base URL and includes the stored user identifier in requests, which is how the frontend participates in the app’s auth mechanism.
    - This file is important architecturally because it centralizes all backend communication settings.

11. **Frontend pages and feature screens**
    - `Frontend/src/pages/Dashboard.jsx` is the main task overview; it reads from context and performs client-side filtering/search.
    - `AddTaskPage.jsx` handles task creation, while `loginPage.jsx` and `Register.jsx` handle authentication flows.
    - `errorPage.jsx` serves as the fallback route for unmatched paths.

12. **Frontend task interaction pattern**
    - `TaskCard.jsx` is the compact list item view for a task.
    - `TaskView.jsx` opens a modal and fetches the full task record on demand.
    - `TaskViewChild.jsx` renders the read-only detail view and also handles deletion.
    - `TaskUpdateView.jsx` switches the modal into edit mode and submits updates back to the API.
    - This modal-based design keeps list rendering lightweight while deferring detailed fetch/edit operations until needed.

13. **Frontend UI support components**
    - `Navbar.jsx`, `Footer.jsx`, `Logo.jsx`, `LoaderButton.jsx`, and `LoaderComponent.jsx` are shared UI primitives.
    - They are not separate business subsystems, but they support consistent navigation, feedback, and layout across the SPA.
    - `Frontend/src/utils/constant.js` appears to centralize category-to-style mapping, which keeps presentation rules out of feature screens.

14. **End-to-end behavior**
    - A typical session starts with auth pages, moves into the protected dashboard, then uses the task modal to view, edit, or delete items.
    - Create/update/delete actions are sent to the API; successful responses are reflected in the context state so the UI updates immediately.
    - Search is client-side only, so it operates entirely within the React state layer without extra backend calls.

15. **Technology choices that affect architecture**
    - Vite shapes the frontend development/runtime boundary, giving the SPA its own dev server on port 5173.
    - Express and Mongoose define the backend service boundary on port 4500, with MongoDB Atlas as the external persistence layer.
    - Nodemon, dotenv, and CORS are operational enablers rather than core business logic, but they materially support local development and browser-to-API communication.

Main entry points: [`Frontend/src/App.jsx`](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/App.jsx) (App shell), [`Backend/src/routes.js`](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Backend/src/routes.js) (API routes), [`Frontend/src/utils/axiosClient.js`](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/utils/axiosClient.js) (API client), [`Frontend/src/layout/ProtectedLayout.jsx`](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/layout/ProtectedLayout.jsx) (Protected layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_backend["Backend"]
  node_backend_index(("Server entry<br/>[index.js]"))
  node_backend_app["Express app<br/>composition<br/>[app.js]"]
  node_backend_db[("DB config<br/>mongoose connection<br/>[db.config.js]")]
  node_backend_routes["API routes<br/>rest contract<br/>[routes.js]"]
  node_backend_user_model["User model<br/>mongoose model<br/>[user.model.js]"]
  node_backend_task_model["Task model<br/>mongoose model<br/>[task.model.js]"]
end

subgraph group_frontend["Frontend"]
  node_frontend_main(("App mount<br/>entry<br/>[main.jsx]"))
  node_frontend_app["App shell<br/>spa shell<br/>[App.jsx]"]
  node_frontend_protected["Protected layout<br/>route guard"]
  node_frontend_context["Main context<br/>client state<br/>[MainContext.jsx]"]
  node_frontend_axios["API client<br/>http client<br/>[axiosClient.js]"]
  node_frontend_dashboard["Dashboard<br/>task overview<br/>[Dashboard.jsx]"]
  node_frontend_addtask["Add task<br/>create form<br/>[AddTaskPage.jsx]"]
  node_frontend_login["Login<br/>auth screen<br/>[loginPage.jsx]"]
  node_frontend_register["Register<br/>auth screen<br/>[Register.jsx]"]
  node_frontend_taskcard["Task card<br/>list item<br/>[TaskCard.jsx]"]
  node_frontend_taskview["Task modal<br/>detail modal<br/>[TaskView.jsx]"]
  node_frontend_taskupdate["Edit task<br/>update form<br/>[TaskUpdateView.jsx]"]
  node_frontend_ui["Shared UI<br/>components"]
end

subgraph group_infra["Deployment"]
  node_dockerfile["Docker image<br/>container build"]
end

node_frontend_main -->|"renders"| node_frontend_app
node_frontend_app -->|"routes"| node_frontend_protected
node_frontend_app -->|"uses"| node_frontend_ui
node_frontend_protected -->|"protects"| node_frontend_dashboard
node_frontend_protected -->|"protects"| node_frontend_addtask
node_frontend_app -->|"public"| node_frontend_login
node_frontend_app -->|"public"| node_frontend_register
node_frontend_dashboard -->|"reads"| node_frontend_context
node_frontend_dashboard -->|"lists"| node_frontend_taskcard
node_frontend_taskcard -->|"opens"| node_frontend_taskview
node_frontend_taskview -->|"switches"| node_frontend_taskupdate
node_frontend_context -->|"fetches"| node_frontend_axios
node_frontend_login -->|"auth"| node_frontend_axios
node_frontend_register -->|"auth"| node_frontend_axios
node_frontend_axios -->|"http"| node_backend_routes
node_backend_index -->|"connects"| node_backend_db
node_backend_index -->|"starts"| node_backend_app
node_backend_app -->|"mounts"| node_backend_routes
node_backend_routes -->|"uses"| node_backend_user_model
node_backend_routes -->|"uses"| node_backend_task_model
node_backend_routes -->|"queries"| node_backend_db
node_dockerfile -->|"packages"| node_backend_index
node_dockerfile -->|"packages"| node_frontend_main

click node_backend_index "https://github.com/maipriyanshuhoooon/crud-app/blob/main/Backend/index.js"
click node_backend_app "https://github.com/maipriyanshuhoooon/crud-app/blob/main/Backend/src/app.js"
click node_backend_db "https://github.com/maipriyanshuhoooon/crud-app/blob/main/Backend/src/db.config.js"
click node_backend_routes "https://github.com/maipriyanshuhoooon/crud-app/blob/main/Backend/src/routes.js"
click node_backend_user_model "https://github.com/maipriyanshuhoooon/crud-app/blob/main/Backend/src/model/user.model.js"
click node_backend_task_model "https://github.com/maipriyanshuhoooon/crud-app/blob/main/Backend/src/model/task.model.js"
click node_frontend_main "https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/main.jsx"
click node_frontend_app "https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/App.jsx"
click node_frontend_protected "https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/layout/ProtectedLayout.jsx"
click node_frontend_context "https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/context/MainContext.jsx"
click node_frontend_axios "https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/utils/axiosClient.js"
click node_frontend_dashboard "https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/pages/Dashboard.jsx"
click node_frontend_addtask "https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/pages/AddTaskPage.jsx"
click node_frontend_login "https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/pages/loginPage.jsx"
click node_frontend_register "https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/pages/Register.jsx"
click node_frontend_taskcard "https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/components/TaskCard.jsx"
click node_frontend_taskview "https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/components/TaskView.jsx"
click node_frontend_taskupdate "https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/components/TaskUpdateView.jsx"
click node_dockerfile "https://github.com/maipriyanshuhoooon/crud-app/tree/main/Dockerfile"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_backend_index,node_backend_app,node_backend_db,node_backend_routes,node_backend_user_model,node_backend_task_model toneBlue
class node_frontend_main,node_frontend_app,node_frontend_protected,node_frontend_context,node_frontend_axios,node_frontend_dashboard,node_frontend_addtask,node_frontend_login,node_frontend_register,node_frontend_taskcard,node_frontend_taskview,node_frontend_taskupdate,node_frontend_ui toneAmber
class node_dockerfile toneMint
```

## Components

### Backend

Express API, database access, and domain models

- [Server entry](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Backend/index.js): entry · Loads env, connects DB, and starts the API server · `Backend/index.js`
- [Express app](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Backend/src/app.js): composition · Applies middleware and mounts the API router · `Backend/src/app.js`
- [DB config](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Backend/src/db.config.js): mongoose connection · Encapsulates MongoDB connection setup · `Backend/src/db.config.js`
- [API routes](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Backend/src/routes.js): rest contract · Defines auth and task endpoints plus request guards · `Backend/src/routes.js`
- [User model](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Backend/src/model/user.model.js): mongoose model · User document shape for registration and login · `Backend/src/model/user.model.js`
- [Task model](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Backend/src/model/task.model.js): mongoose model · Task document shape with owner reference · `Backend/src/model/task.model.js`

### Frontend

React SPA, routing, state, and UI

- [App mount](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/main.jsx): entry · Bootstraps the React app into the Vite shell · `Frontend/src/main.jsx`
- [App shell](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/App.jsx): spa shell · Wires routing, context, and shared layout · `Frontend/src/App.jsx`
- [Protected layout](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/layout/ProtectedLayout.jsx): route guard · Redirects unauthenticated users to login · `Frontend/src/layout/ProtectedLayout.jsx`
- [Main context](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/context/MainContext.jsx): client state · Stores task list and exposes client-side mutations · `Frontend/src/context/MainContext.jsx`
- [API client](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/utils/axiosClient.js): http client · Centralizes backend base URL and auth header handling · `Frontend/src/utils/axiosClient.js`
- [Dashboard](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/pages/Dashboard.jsx): task overview · Shows filtered tasks from context · `Frontend/src/pages/Dashboard.jsx`
- [Add task](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/pages/AddTaskPage.jsx): create form · Creates new tasks through the API · `Frontend/src/pages/AddTaskPage.jsx`
- [Login](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/pages/loginPage.jsx): auth screen · Collects credentials and stores the user identifier · `Frontend/src/pages/loginPage.jsx`
- [Register](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/pages/Register.jsx): auth screen · Creates new user accounts · `Frontend/src/pages/Register.jsx`
- [Task card](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/components/TaskCard.jsx): list item · Compact task summary in the dashboard list · `Frontend/src/components/TaskCard.jsx`
- [Task modal](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/components/TaskView.jsx): detail modal · Loads a full task record for view or edit · `Frontend/src/components/TaskView.jsx`
- [Edit task](https://github.com/maipriyanshuhoooon/crud-app/blob/main/Frontend/src/components/TaskUpdateView.jsx): update form · Submits task changes back to the API · `Frontend/src/components/TaskUpdateView.jsx`
- **Shared UI**: components · Common navigation, branding, and loading primitives

### Deployment

Containerization and runtime packaging

- [Docker image](https://github.com/maipriyanshuhoooon/crud-app/tree/main/Dockerfile): container build · Packages the app for containerized deployment · `Dockerfile`

## Connections

- App mount → App shell: renders · Mounts the application shell
- App shell → Protected layout: routes · Separates public and protected areas
- App shell → Shared UI: uses · Shares navbar, footer, and loading components
- Protected layout → Dashboard: protects · Shows authenticated dashboard routes
- Protected layout → Add task: protects · Shows authenticated task creation route
- App shell → Login: public · Exposes the login screen
- App shell → Register: public · Exposes the registration screen
- Dashboard → Main context: reads · Consumes shared task state
- Dashboard → Task card: lists · Renders task summaries
- Task card → Task modal: opens · Drills into task details
- Task modal → Edit task: switches · Enters edit mode for a task
- Main context → API client: fetches · Uses the HTTP client for task loading and mutations
- Login → API client: auth · Stores and sends the user identifier through requests
- Register → API client: auth · Creates accounts through the API client
- API client → API routes: http · Sends browser requests to the REST API
- Server entry → DB config: connects · Initializes the database connection
- Server entry → Express app: starts · Bootstraps the Express application
- Express app → API routes: mounts · Registers the API under /api/v1
- API routes → User model: uses · Resolves and persists users
- API routes → Task model: uses · Reads and writes task documents
- API routes → DB config: queries · Executes MongoDB operations through Mongoose
- Docker image → Server entry: packages · Builds the container runtime around the server
- Docker image → App mount: packages · Includes the SPA build/runtime in the image