# harmannmahna/planify architecture

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

- Interactive diagram: https://gitdiagram.com/harmannmahna/planify
- Repository: https://github.com/harmannmahna/planify

## Overview

1. **Overall shape**
   - Planify is a two-tier MERN application: a React frontend talks to an Express API backend, and the backend persists users, tasks, points, and room state in MongoDB via Mongoose.
   - The product boundary is clean: the frontend handles interaction and UI state; the backend owns authentication, business rules, and persistence.

2. **Backend as the system of record**
   - `backend/server.js` is the entry point that likely wires Express middleware, routes, database connection, and deployment configuration.
   - All durable application state lives here through MongoDB models, not in the browser.

3. **Core backend domains**
   - `models/User.js` represents the authenticated user and appears to hold user-specific game state such as points and room ownership/progression.
   - `models/Task.js` represents task records with fields for title, description, status, and priority.
   - These models support the two primary product loops: task completion and room progression.

4. **API surface**
   - `routes/auth.js` handles registration, login, and user-centric endpoints such as points or room-related user data.
   - `routes/tasks.js` exposes task CRUD and completion flows.
   - `routes/room.js` handles shop/purchase/room customization behavior.
   - This routing split maps closely to the app’s functional areas and is the main backend decomposition.

5. **Authentication and access control**
   - `middleware/authMiddleware.js` is the gatekeeper for protected routes, enforcing JWT-based access.
   - The backend validates the token before allowing access to task, room, or user-state operations.
   - This creates a server-side security boundary; the frontend does not own authorization.

6. **Frontend shell and routing**
   - `frontend/src/main.jsx` boots the React app, and `frontend/src/App.jsx` likely defines top-level routing and layout composition.
   - `react-router-dom` is used to separate public auth screens from protected application pages.
   - `components/ProtectedRoute.jsx` is the client-side route guard that complements server-side JWT enforcement.

7. **State management on the client**
   - `frontend/src/app/store.js` configures Redux Toolkit as the central state container.
   - `features/auth/authSlice.js` manages login/register/session state.
   - `features/tasks/tasksSlice.js` manages task data and task-related async operations.
   - This keeps API-backed data and auth state consistent across pages and components.

8. **Client-to-server data flow**
   - `frontend/src/api/axios.js` is the API boundary for HTTP calls to the backend.
   - Pages and slices dispatch actions that call the Express routes through Axios, then update Redux state from responses.
   - The main data loop is: user action in UI → Redux async request → API route → MongoDB update → response → store/UI refresh.

9. **Primary user experiences**
   - `pages/Login.jsx` and `pages/Register.jsx` are the public entry points for account creation and sign-in.
   - `pages/Dashboard.jsx` is the main working surface for tasks, Pomodoro, points, and room preview.
   - `pages/Room.jsx` is the dedicated room/shop experience for buying and placing items.

10. **Dashboard feature composition**
   - `components/Pomodoro.jsx` is a self-contained productivity timer that contributes points when sessions complete.
   - `components/TaskFormModal.jsx` and `components/TaskCard.jsx` support task creation and task lifecycle operations.
   - `components/Navbar.jsx` provides global navigation and likely surfaces user state such as points or session status.
   - The dashboard is therefore a composition of several feature widgets rather than a monolithic page.

11. **Gamification loop**
   - Completing a task or a Pomodoro session awards points, which are stored persistently in MongoDB.
   - Those points are then spent in the room/shop flow to unlock or place items.
   - This creates a closed loop between the task domain and the room domain, with the user record acting as the shared ledger.

12. **Frontend styling and build tooling**
   - The frontend uses Vite for development/build, Tailwind CSS for styling, and PostCSS/Tailwind config files for CSS processing.
   - The `public/` and `index.html` structure indicates a standard single-page app deployment model.
   - Styling is heavily theme-driven, with a pixel-art/dark UI aesthetic.

13. **Deployment/runtime boundary**
   - The backend runs as a Node/Express service and the frontend as a static SPA build, both deployed on Render per the README.
   - MongoDB Atlas is the external persistence service, so database connectivity is an architectural dependency rather than local state.
   - The repo’s `.env` files show that secrets and connection details are environment-driven, not hard-coded.

14. **Key architectural takeaway**
   - The app is organized around three persistent domains: identity, tasks, and room ownership/progression.
   - The backend centralizes validation and persistence, while the frontend focuses on interaction, route protection, and real-time user experience.
   - If you draw the architecture, the most important arrows are: browser → Axios → Express routes → Mongoose models/MongoDB, with JWT auth protecting the path.

Main entry points: [`frontend/src/App.jsx`](https://github.com/harmannmahna/planify/blob/main/frontend/src/App.jsx) (App Shell), [`frontend/src/pages/Dashboard.jsx`](https://github.com/harmannmahna/planify/blob/main/frontend/src/pages/Dashboard.jsx) (Dashboard), [`backend/server.js`](https://github.com/harmannmahna/planify/blob/main/backend/server.js) (Server), [`backend/routes/tasks.js`](https://github.com/harmannmahna/planify/blob/main/backend/routes/tasks.js) (Tasks API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend"]
  node_main["Entry<br/>frontend boot<br/>[main.jsx]"]
  node_app["App Shell<br/>routing shell<br/>[App.jsx]"]
  node_protected["Protected Route<br/>route guard<br/>[ProtectedRoute.jsx]"]
  node_store["Store<br/>[store.js]"]
  node_authslice["Auth Slice<br/>redux auth<br/>[authSlice.js]"]
  node_taskslice["Tasks Slice<br/>redux tasks<br/>[tasksSlice.js]"]
  node_axios["API Client<br/>http client<br/>[axios.js]"]
  node_login["Login<br/>page<br/>[Login.jsx]"]
  node_register["Register<br/>page<br/>[Register.jsx]"]
  node_dashboard["Dashboard<br/>page<br/>[Dashboard.jsx]"]
  node_roompage["Room<br/>page<br/>[Room.jsx]"]
  node_navbar["Navbar<br/>ui nav<br/>[Navbar.jsx]"]
  node_pomodoro["Pomodoro<br/>timer widget<br/>[Pomodoro.jsx]"]
  node_taskui["Task UI<br/>task widgets<br/>[TaskCard.jsx]"]
end

subgraph group_backend["Backend"]
  node_server["Server<br/>express entry<br/>[server.js]"]
  node_authroute["Auth API<br/>route<br/>[auth.js]"]
  node_tasksroute["Tasks API<br/>route<br/>[tasks.js]"]
  node_roomroute["Room API<br/>route<br/>[room.js]"]
  node_authmw["Auth Guard<br/>middleware<br/>[authMiddleware.js]"]
  node_user[("User Model<br/>mongoose model<br/>[User.js]")]
  node_taskmodel[("Task Model<br/>mongoose model<br/>[Task.js]")]
end

node_browser(("Browser<br/>client"))

node_browser -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_app -->|"routes"| node_login
node_app -->|"routes"| node_register
node_app -->|"wraps"| node_protected
node_protected -->|"allows"| node_dashboard
node_protected -->|"allows"| node_roompage
node_app -->|"provides"| node_store
node_store -->|"contains"| node_authslice
node_store -->|"contains"| node_taskslice
node_authslice -->|"calls"| node_axios
node_taskslice -->|"calls"| node_axios
node_dashboard -->|"composes"| node_navbar
node_dashboard -->|"composes"| node_pomodoro
node_dashboard -->|"composes"| node_taskui
node_roompage -->|"calls"| node_axios
node_axios -->|"requests"| node_server
node_server -->|"mounts"| node_authroute
node_server -->|"mounts"| node_tasksroute
node_server -->|"mounts"| node_roomroute
node_authroute -->|"uses"| node_authmw
node_tasksroute -->|"uses"| node_authmw
node_roomroute -->|"uses"| node_authmw
node_authroute -->|"reads/writes"| node_user
node_tasksroute -->|"reads/writes"| node_taskmodel
node_roomroute -->|"reads/writes"| node_user
node_tasksroute -->|"updates"| node_user
node_pomodoro -->|"reads"| node_authslice
node_taskui -->|"dispatches"| node_taskslice

click node_main "https://github.com/harmannmahna/planify/blob/main/frontend/src/main.jsx"
click node_app "https://github.com/harmannmahna/planify/blob/main/frontend/src/App.jsx"
click node_protected "https://github.com/harmannmahna/planify/blob/main/frontend/src/components/ProtectedRoute.jsx"
click node_store "https://github.com/harmannmahna/planify/blob/main/frontend/src/app/store.js"
click node_authslice "https://github.com/harmannmahna/planify/blob/main/frontend/src/features/auth/authSlice.js"
click node_taskslice "https://github.com/harmannmahna/planify/blob/main/frontend/src/features/tasks/tasksSlice.js"
click node_axios "https://github.com/harmannmahna/planify/blob/main/frontend/src/api/axios.js"
click node_login "https://github.com/harmannmahna/planify/blob/main/frontend/src/pages/Login.jsx"
click node_register "https://github.com/harmannmahna/planify/blob/main/frontend/src/pages/Register.jsx"
click node_dashboard "https://github.com/harmannmahna/planify/blob/main/frontend/src/pages/Dashboard.jsx"
click node_roompage "https://github.com/harmannmahna/planify/blob/main/frontend/src/pages/Room.jsx"
click node_navbar "https://github.com/harmannmahna/planify/blob/main/frontend/src/components/Navbar.jsx"
click node_pomodoro "https://github.com/harmannmahna/planify/blob/main/frontend/src/components/Pomodoro.jsx"
click node_taskui "https://github.com/harmannmahna/planify/blob/main/frontend/src/components/TaskCard.jsx"
click node_server "https://github.com/harmannmahna/planify/blob/main/backend/server.js"
click node_authroute "https://github.com/harmannmahna/planify/blob/main/backend/routes/auth.js"
click node_tasksroute "https://github.com/harmannmahna/planify/blob/main/backend/routes/tasks.js"
click node_roomroute "https://github.com/harmannmahna/planify/blob/main/backend/routes/room.js"
click node_authmw "https://github.com/harmannmahna/planify/blob/main/backend/middleware/authMiddleware.js"
click node_user "https://github.com/harmannmahna/planify/blob/main/backend/models/User.js"
click node_taskmodel "https://github.com/harmannmahna/planify/blob/main/backend/models/Task.js"

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_main,node_app,node_protected,node_store,node_authslice,node_taskslice,node_axios,node_login,node_register,node_dashboard,node_roompage,node_navbar,node_pomodoro,node_taskui toneBlue
class node_server,node_authroute,node_tasksroute,node_roomroute,node_authmw,node_user,node_taskmodel toneAmber
class node_browser toneNeutral
```

## Components

### Frontend

React SPA, state, and UI flows

- [Entry](https://github.com/harmannmahna/planify/blob/main/frontend/src/main.jsx): frontend boot · Bootstraps the React app · `frontend/src/main.jsx`
- [App Shell](https://github.com/harmannmahna/planify/blob/main/frontend/src/App.jsx): routing shell · Top-level routes and layout composition · `frontend/src/App.jsx`
- [Protected Route](https://github.com/harmannmahna/planify/blob/main/frontend/src/components/ProtectedRoute.jsx): route guard · Client-side access gate for private pages · `frontend/src/components/ProtectedRoute.jsx`
- [Store](https://github.com/harmannmahna/planify/blob/main/frontend/src/app/store.js): redux store · Central client state container · `frontend/src/app/store.js`
- [Auth Slice](https://github.com/harmannmahna/planify/blob/main/frontend/src/features/auth/authSlice.js): redux auth · Session and login state · `frontend/src/features/auth/authSlice.js`
- [Tasks Slice](https://github.com/harmannmahna/planify/blob/main/frontend/src/features/tasks/tasksSlice.js): redux tasks · Task data and async task actions · `frontend/src/features/tasks/tasksSlice.js`
- [API Client](https://github.com/harmannmahna/planify/blob/main/frontend/src/api/axios.js): http client · HTTP boundary to the backend · `frontend/src/api/axios.js`
- [Login](https://github.com/harmannmahna/planify/blob/main/frontend/src/pages/Login.jsx): page · Sign-in screen · `frontend/src/pages/Login.jsx`
- [Register](https://github.com/harmannmahna/planify/blob/main/frontend/src/pages/Register.jsx): page · Account creation screen · `frontend/src/pages/Register.jsx`
- [Dashboard](https://github.com/harmannmahna/planify/blob/main/frontend/src/pages/Dashboard.jsx): page · Primary task and productivity workspace · `frontend/src/pages/Dashboard.jsx`
- [Room](https://github.com/harmannmahna/planify/blob/main/frontend/src/pages/Room.jsx): page · Shop and customization screen · `frontend/src/pages/Room.jsx`
- [Navbar](https://github.com/harmannmahna/planify/blob/main/frontend/src/components/Navbar.jsx): ui nav · Global navigation and user status · `frontend/src/components/Navbar.jsx`
- [Pomodoro](https://github.com/harmannmahna/planify/blob/main/frontend/src/components/Pomodoro.jsx): timer widget · Productivity timer that drives points · `frontend/src/components/Pomodoro.jsx`
- [Task UI](https://github.com/harmannmahna/planify/blob/main/frontend/src/components/TaskCard.jsx): task widgets · Task card and task creation UI · `frontend/src/components/TaskCard.jsx`

### Backend

Express API, auth, and persistence

- [Server](https://github.com/harmannmahna/planify/blob/main/backend/server.js): express entry · Express app bootstrap and runtime wiring · `backend/server.js`
- [Auth API](https://github.com/harmannmahna/planify/blob/main/backend/routes/auth.js): route · Registration, login, and user-state endpoints · `backend/routes/auth.js`
- [Tasks API](https://github.com/harmannmahna/planify/blob/main/backend/routes/tasks.js): route · Task CRUD and completion endpoints · `backend/routes/tasks.js`
- [Room API](https://github.com/harmannmahna/planify/blob/main/backend/routes/room.js): route · Shop, purchase, and customization endpoints · `backend/routes/room.js`
- [Auth Guard](https://github.com/harmannmahna/planify/blob/main/backend/middleware/authMiddleware.js): middleware · JWT protection for private routes · `backend/middleware/authMiddleware.js`
- [User Model](https://github.com/harmannmahna/planify/blob/main/backend/models/User.js): mongoose model · Identity plus points and room state · `backend/models/User.js`
- [Task Model](https://github.com/harmannmahna/planify/blob/main/backend/models/Task.js): mongoose model · Task records and lifecycle state · `backend/models/Task.js`

### Other components

- **Browser**: client · User interaction surface

## Connections

- Browser → Entry: loads · User opens the SPA
- Entry → App Shell: mounts · React bootstraps the app shell
- App Shell → Login: routes · Public auth route
- App Shell → Register: routes · Public auth route
- App Shell → Protected Route: wraps · Private app pages are guarded
- Protected Route → Dashboard: allows · Authenticated access to dashboard
- Protected Route → Room: allows · Authenticated access to room
- App Shell → Store: provides · Redux store available to pages
- Store → Auth Slice: contains · Auth state slice
- Store → Tasks Slice: contains · Task state slice
- Auth Slice → API Client: calls · Auth requests go through API client
- Tasks Slice → API Client: calls · Task requests go through API client
- Dashboard → Navbar: composes · Dashboard shell includes global nav
- Dashboard → Pomodoro: composes · Timer drives productivity loop
- Dashboard → Task UI: composes · Task creation and display widgets
- Room → API Client: calls · Room actions submit to API
- API Client → Server: requests · Client talks to Express backend
- Server → Auth API: mounts · Auth route handler
- Server → Tasks API: mounts · Tasks route handler
- Server → Room API: mounts · Room route handler
- Auth API → Auth Guard: uses · Protected user endpoints are gated
- Tasks API → Auth Guard: uses · Task endpoints require valid JWT
- Room API → Auth Guard: uses · Room endpoints require valid JWT
- Auth API → User Model: reads/writes · User identity and points state
- Tasks API → Task Model: reads/writes · Task persistence
- Room API → User Model: reads/writes · Room purchases update user state
- Tasks API → User Model: updates · Completions affect points
- Pomodoro → Auth Slice: reads · Session and points context
- Task UI → Tasks Slice: dispatches · Task interactions update Redux state