# manojuio/studycircle architecture

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

- Interactive diagram: https://gitdiagram.com/manojuio/studycircle
- Repository: https://github.com/manojuio/studycircle

## Overview

1. **Overall shape**
   StudyCircle is a two-tier monorepo: a Node.js/Express backend that exposes a REST API, and a React/Vite frontend that consumes it. The backend owns authentication, business rules, and persistence; the frontend focuses on route-based screens and API integration.

2. **Backend runtime and entrypoints**
   The backend starts from `backend/src/server.js`, with `app.js` likely assembling middleware and routes. Configuration is split into `config/env.js` and `config/db.js`, which indicates environment-driven settings and a dedicated MongoDB connection layer.

3. **Backend layering**
   The server is organized in a classic MVC-plus-service layout:
   - `routes/` define HTTP endpoints
   - `middlewares/` handle cross-cutting concerns
   - `controllers/` translate requests into service calls
   - `services/` implement domain logic
   - `models/` define MongoDB/Mongoose schemas
   - `utils/` provide shared response, error, and logging helpers  
   This separation is the main backend architectural boundary.

4. **Domain modules**
   The core business domains are split by feature: `auth`, `group`, `resource`, `question`, and `answer`. A separate `User` model plus `member.model.js` suggests membership and role handling are modeled explicitly rather than inferred from groups alone.

5. **Authentication and authorization**
   `auth.controller.js`, `auth.service.js`, and `auth.middleware.js` show a token-based security layer, consistent with the README’s JWT setup. Authorization is enforced at the API boundary, likely based on user identity and role checks such as student, teacher, and admin.

6. **Group-centric collaboration model**
   Groups are the main collaboration container. The presence of `group.model.js`, `member.model.js`, and dedicated group routes/services implies that resources, questions, answers, and membership are all scoped to a group context. The README’s join-code and admin/teacher management features fit this boundary.

7. **Q&A workflow**
   Questions and answers are split into separate modules: users post questions through the question service, and teachers post verified answers through the answer service. This indicates a controlled workflow where question creation and answer creation are not handled by the same API path or same actor role.

8. **Shared resource flow**
   `resource.controller.js` and `resource.service.js` manage link-based study materials shared within a group. Resources are likely persisted as group-linked records in MongoDB and filtered by membership before being returned to clients.

9. **Request validation and error handling**
   `validate.middleware.js` suggests schema or payload validation occurs before controller logic. `error.middleware.js`, together with `ApiError.js` and `ApiResponse.js`, provides a standardized API contract for failures and successes, which keeps the frontend integration predictable.

10. **Frontend structure**
    The frontend is a Vite React app with `main.jsx` as the bootstrap and `App.jsx` as the top-level router/layout shell. Pages are split into `Login`, `Register`, `Dashboard`, `Group`, and `QuestionDetail`, which matches the backend’s auth and group-centric domain model.

11. **Frontend API boundary**
    The `src/api/` folder contains one client module per backend domain: `auth.js`, `groups.js`, `groupDetail.js`, `resources.js`, `questions.js`, `answers.js`, and `user.js`. This indicates the UI does not talk directly to the server ad hoc; instead, it uses a thin API layer over a shared Axios client in `axios.js`.

12. **Data flow end to end**
    A typical request path is: user action in a page → frontend API module → Axios → Express route → auth/validation middleware → controller → service → Mongoose model → MongoDB → formatted response back to the UI. This is the main architectural flow to show in a diagram.

13. **Access control boundaries**
    Role-based behavior spans both layers: the backend enforces it on protected routes, while the frontend likely renders different UI paths and actions depending on whether the user is a student, teacher, or admin. Teacher-only answers and admin-only member management are important policy boundaries.

14. **Operational dependencies**
    The only hard external infrastructure visible from the repo is MongoDB. Node.js/Express powers the API, Mongoose maps domain objects to the database, and Vite/React powers the client build and local dev server. No separate queue, cache, or real-time service is present in the current architecture.

15. **What to diagram**
    If you are drawing the system, the most important boxes are: React UI, Axios API client, Express API, middleware layer, feature services, Mongoose models, and MongoDB. Around those, show the auth boundary, the group-scoped collaboration model, and the distinct question/answer flow controlled by roles.

Main entry points: [`backend/src/app.js`](https://github.com/manojuio/studycircle/blob/main/backend/src/app.js) (App), [`backend/src/controllers`](https://github.com/manojuio/studycircle/tree/main/backend/src/controllers) (Controllers), [`backend/src/services`](https://github.com/manojuio/studycircle/tree/main/backend/src/services) (Services), [`backend/src/routes`](https://github.com/manojuio/studycircle/tree/main/backend/src/routes) (Routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_backend["Backend"]
  node_backend_server["Server<br/>entrypoint<br/>[server.js]"]
  node_backend_app["App<br/>[app.js]"]
  node_backend_config["Config<br/>[env.js]"]
  node_backend_routes["Routes"]
  node_backend_middleware{{"Middleware<br/>request pipeline"}}
  node_backend_controllers["Controllers<br/>request handlers"]
  node_backend_services["Services<br/>domain logic"]
  node_backend_models[("Models<br/>mongoose schemas")]
  node_backend_utils["Utils<br/>shared helpers"]
end

subgraph group_frontend["Frontend"]
  node_frontend_main["Main<br/>react entry<br/>[main.jsx]"]
  node_frontend_app["App Shell<br/>router shell<br/>[App.jsx]"]
  node_frontend_pages["Pages<br/>screens"]
  node_frontend_api["API Layer<br/>client modules"]
  node_frontend_axios["Axios<br/>http client<br/>[axios.js]"]
end

subgraph group_external["External"]
  node_db[("MongoDB<br/>database")]
  node_runtime_node(("Node.js<br/>runtime"))
  node_runtime_react(("React/Vite<br/>ui runtime"))
end

node_runtime_node -->|"runs"| node_backend_server
node_backend_server -->|"initializes"| node_backend_app
node_backend_app -->|"uses"| node_backend_config
node_backend_app -->|"mounts"| node_backend_routes
node_backend_app -->|"applies"| node_backend_middleware
node_backend_routes -->|"dispatches"| node_backend_controllers
node_backend_controllers -->|"calls"| node_backend_services
node_backend_services -->|"reads/writes"| node_backend_models
node_backend_models -->|"persists"| node_db
node_backend_middleware -.->|"guards"| node_backend_controllers
node_backend_controllers -->|"formats"| node_backend_utils
node_runtime_react -->|"runs"| node_frontend_main
node_frontend_main -->|"bootstraps"| node_frontend_app
node_frontend_app -->|"routes to"| node_frontend_pages
node_frontend_pages -->|"calls"| node_frontend_api
node_frontend_api -->|"shares"| node_frontend_axios
node_frontend_axios -->|"requests"| node_backend_routes
node_backend_services -.->|"uses"| node_backend_utils
node_backend_middleware -.->|"protects"| node_backend_services
node_frontend_pages -.->|"integrates"| node_backend_routes

click node_backend_server "https://github.com/manojuio/studycircle/blob/main/backend/src/server.js"
click node_backend_app "https://github.com/manojuio/studycircle/blob/main/backend/src/app.js"
click node_backend_config "https://github.com/manojuio/studycircle/blob/main/backend/src/config/env.js"
click node_backend_routes "https://github.com/manojuio/studycircle/tree/main/backend/src/routes"
click node_backend_middleware "https://github.com/manojuio/studycircle/tree/main/backend/src/middlewares"
click node_backend_controllers "https://github.com/manojuio/studycircle/tree/main/backend/src/controllers"
click node_backend_services "https://github.com/manojuio/studycircle/tree/main/backend/src/services"
click node_backend_models "https://github.com/manojuio/studycircle/tree/main/backend/src/models"
click node_backend_utils "https://github.com/manojuio/studycircle/tree/main/backend/src/utils"
click node_frontend_main "https://github.com/manojuio/studycircle/blob/main/frontend/src/main.jsx"
click node_frontend_app "https://github.com/manojuio/studycircle/blob/main/frontend/src/App.jsx"
click node_frontend_pages "https://github.com/manojuio/studycircle/tree/main/frontend/src/pages"
click node_frontend_api "https://github.com/manojuio/studycircle/tree/main/frontend/src/api"
click node_frontend_axios "https://github.com/manojuio/studycircle/blob/main/frontend/src/api/axios.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_backend_server,node_backend_app,node_backend_config,node_backend_routes,node_backend_middleware,node_backend_controllers,node_backend_services,node_backend_models,node_backend_utils toneBlue
class node_frontend_main,node_frontend_app,node_frontend_pages,node_frontend_api,node_frontend_axios toneAmber
class node_db,node_runtime_node,node_runtime_react toneMint
```

## Components

### Backend

Express API, domain logic, and MongoDB persistence

- [Server](https://github.com/manojuio/studycircle/blob/main/backend/src/server.js): entrypoint · Starts the API process · `backend/src/server.js`
- [App](https://github.com/manojuio/studycircle/blob/main/backend/src/app.js): express app · Assembles middleware and routes · `backend/src/app.js`
- [Config](https://github.com/manojuio/studycircle/blob/main/backend/src/config/env.js): env/db config · Environment and database settings · `backend/src/config/env.js`
- [Routes](https://github.com/manojuio/studycircle/tree/main/backend/src/routes): http routes · API endpoint definitions · `backend/src/routes`
- [Middleware](https://github.com/manojuio/studycircle/tree/main/backend/src/middlewares): request pipeline · Auth, validation, and error handling · `backend/src/middlewares`
- [Controllers](https://github.com/manojuio/studycircle/tree/main/backend/src/controllers): request handlers · Translate HTTP requests into service calls · `backend/src/controllers`
- [Services](https://github.com/manojuio/studycircle/tree/main/backend/src/services): domain logic · Core business rules and orchestration · `backend/src/services`
- [Models](https://github.com/manojuio/studycircle/tree/main/backend/src/models): mongoose schemas · MongoDB domain schemas · `backend/src/models`
- [Utils](https://github.com/manojuio/studycircle/tree/main/backend/src/utils): shared helpers · API response, error, and logging helpers · `backend/src/utils`

### Frontend

React UI and API client layer

- [Main](https://github.com/manojuio/studycircle/blob/main/frontend/src/main.jsx): react entry · Bootstraps the React app · `frontend/src/main.jsx`
- [App Shell](https://github.com/manojuio/studycircle/blob/main/frontend/src/App.jsx): router shell · Top-level layout and route composition · `frontend/src/App.jsx`
- [Pages](https://github.com/manojuio/studycircle/tree/main/frontend/src/pages): screens · Login, register, dashboard, group, and question detail views · `frontend/src/pages`
- [API Layer](https://github.com/manojuio/studycircle/tree/main/frontend/src/api): client modules · Domain-specific API wrappers · `frontend/src/api`
- [Axios](https://github.com/manojuio/studycircle/blob/main/frontend/src/api/axios.js): http client · Shared request client and base configuration · `frontend/src/api/axios.js`

### External

Runtime and database dependencies

- **MongoDB**: database · Persistent store for users, groups, questions, answers, resources, and members
- **Node.js**: runtime · Server runtime for the backend
- **React/Vite**: ui runtime · Client build and development runtime

## Connections

- Node.js → Server: runs · Node executes the backend entrypoint
- Server → App: initializes · Server loads the Express app
- App → Config: uses · App setup depends on env and DB config
- App → Routes: mounts · Routes are attached to the Express app
- App → Middleware: applies · Cross-cutting request handling
- Routes → Controllers: dispatches · Routes forward requests to controllers
- Controllers → Services: calls · Controllers delegate domain work
- Services → Models: reads/writes · Services persist and query domain data
- Models → MongoDB: persists · Mongoose stores data in MongoDB
- Middleware → Controllers: guards · Auth and validation gate controller execution
- Controllers → Utils: formats · Controllers return standardized responses and errors
- React/Vite → Main: runs · Vite serves the client app
- Main → App Shell: bootstraps · Main mounts the app shell
- App Shell → Pages: routes to · App shell selects the active screen
- Pages → API Layer: calls · Pages use domain API modules
- API Layer → Axios: shares · API modules use one HTTP client
- Axios → Routes: requests · Client requests hit REST endpoints
- Services → Utils: uses · Services and controllers rely on shared API helpers
- Middleware → Services: protects · Protected flows are enforced before business logic
- Pages → Routes: integrates · UI actions map to backend feature routes