# vgvengi/crm-full-stack architecture

> Architecture diagram of the GitHub repository vgvengi/crm-full-stack, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/vgvengi/crm-full-stack
- Repository: https://github.com/vgvengi/crm-full-stack

## Overview

#### Purpose and Shape
This is a small CRM-style dashboard with Companies and Contacts management views, plus dashboard widgets for tasks, meetings, and sales pipeline. It is split into a React/Vite frontend and a Node/TypeScript backend with database-backed resource routes.

#### Runtime Entry Points
- Frontend bootstraps React from `frontend/src/main.tsx`, renders the application shell in `frontend/src/App.tsx`, and defines page selection in `frontend/src/routes/AppRoutes.tsx`.
- Backend starts its HTTP server in `backend/server.ts`; database connectivity is centralized in `backend/config/db.ts`.

#### Frontend Application Shell
- The dashboard layout is the main UI composition boundary in `frontend/src/layouts/dashboard/Dashboard.tsx`.
- Navigation is represented by side-navigation and top-bar components, notably `frontend/src/components/side-nav/SideNav.tsx` and `frontend/src/components/top-bar/TopBar.tsx`.
- The UI uses local reusable primitives under `frontend/@/components/ui/button.tsx` and `frontend/src/ui/tooltip.tsx`; these are presentation infrastructure rather than domain ownership.

#### Companies Domain Flow
- The Companies page is rooted at `frontend/src/pages/companies/Companies.tsx`.
- Table-based display and row rendering are separated into `frontend/src/pages/companies/components/CompaniesTable.tsx` and `frontend/src/pages/companies/components/CompaniesTableRow.tsx`.
- Company creation/editing is represented by `frontend/src/pages/companies/components/CompanyForm.tsx`.
- Backend company HTTP handling is isolated in `backend/routes/companies.routes.ts`, forming the frontend-to-server domain boundary.

#### Contacts Domain Flow
- Contacts are rendered from `frontend/src/pages/contact/Contacts.tsx` and `frontend/src/pages/contact/ContactsTable.tsx`.
- Contact and related company edits have dedicated screens in `frontend/src/pages/contact/EditContacts.tsx` and `frontend/src/pages/contact/EditCompanies.tsx`.
- New-contact/account workflows are grouped under `frontend/src/pages/contact/create-new/CreateNew.tsx` and `frontend/src/pages/contact/create-new/NewAccounts.tsx`.
- Backend contact endpoints are owned by `backend/routes/contacts.routes.ts`.

#### Dashboard Modules
- The home/dashboard content begins at `frontend/src/pages/home/Home.tsx`.
- Domain widgets are independently composed for meetings, tasks, and pipeline: `frontend/src/components/meetings/MeetingCard.tsx`, `frontend/src/components/tasks/Tasks.tsx`, and `frontend/src/components/sales-pipe-line/SalesPipeline.tsx`.
- These appear to be frontend presentation modules; no corresponding backend routes are present in the supplied tree.

#### Data and Infrastructure Boundaries
- Browser navigation and component composition stay in the React frontend; resource persistence/API access should cross to the Node backend only through its Companies and Contacts routes.
- The backend database boundary is `backend/config/db.ts`; the specific database engine and ORM/driver are not identifiable from the supplied tree.
- Material runtimes are Vite/React/TypeScript in `frontend/` and Node/TypeScript in `backend/`, with no external SaaS integrations visible.

Main entry points: [`frontend/src/routes/AppRoutes.tsx`](https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/routes/AppRoutes.tsx) (App routes), [`frontend/src/pages/companies/Companies.tsx`](https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/pages/companies/Companies.tsx) (Companies page), [`backend/routes/companies.routes.ts`](https://github.com/vgvengi/crm-full-stack/blob/main/backend/routes/companies.routes.ts) (Companies API), [`backend/routes/contacts.routes.ts`](https://github.com/vgvengi/crm-full-stack/blob/main/backend/routes/contacts.routes.ts) (Contacts API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["React frontend"]
  node_fe_main(("React bootstrap<br/>entry point<br/>[main.tsx]"))
  node_fe_app["Application shell<br/>React app<br/>[App.tsx]"]
  node_fe_routes["App routes<br/>route selection<br/>[AppRoutes.tsx]"]
  node_fe_dashboard["Dashboard layout<br/>[Dashboard.tsx]"]
  node_fe_navigation["Navigation chrome<br/>UI navigation<br/>[SideNav.tsx]"]
  node_fe_home["Home dashboard<br/>page<br/>[Home.tsx]"]
  node_fe_widgets["Dashboard widgets<br/>presentation modules<br/>[MeetingCard.tsx]"]
  node_fe_companies["Companies page<br/>[Companies.tsx]"]
  node_fe_company_table["Companies table<br/>table view<br/>[CompaniesTable.tsx]"]
  node_fe_company_form["Company form<br/>edit form<br/>[CompanyForm.tsx]"]
  node_fe_contacts["Contacts page<br/>[Contacts.tsx]"]
  node_fe_contact_create["Contact/account workflow<br/>creation flow<br/>[CreateNew.tsx]"]
end

subgraph group_backend["Node backend"]
  node_be_server(("HTTP server<br/>entry point<br/>[server.ts]"))
  node_be_companies["Companies API<br/>resource routes"]
  node_be_contacts["Contacts API<br/>resource routes<br/>[contacts.routes.ts]"]
  node_be_db[("Database connection<br/>persistence boundary<br/>[db.ts]")]
end

node_fe_main -->|"renders"| node_fe_app
node_fe_app -->|"selects pages"| node_fe_routes
node_fe_routes -->|"uses layout"| node_fe_dashboard
node_fe_dashboard -->|"composes"| node_fe_navigation
node_fe_routes -->|"routes to"| node_fe_home
node_fe_home -->|"composes"| node_fe_widgets
node_fe_routes -->|"routes to"| node_fe_companies
node_fe_companies -->|"renders"| node_fe_company_table
node_fe_companies -->|"creates and edits"| node_fe_company_form
node_fe_routes -->|"routes to"| node_fe_contacts
node_fe_contacts -->|"starts creation"| node_fe_contact_create
node_fe_companies -->|"resource requests"| node_be_companies
node_fe_company_form -->|"mutations"| node_be_companies
node_fe_contacts -->|"resource requests"| node_be_contacts
node_fe_contact_create -->|"creates contacts/accounts"| node_be_contacts
node_be_server -->|"registers"| node_be_companies
node_be_server -->|"registers"| node_be_contacts
node_be_companies -->|"persists"| node_be_db
node_be_contacts -->|"persists"| node_be_db

click node_fe_main "https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/main.tsx"
click node_fe_app "https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/App.tsx"
click node_fe_routes "https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/routes/AppRoutes.tsx"
click node_fe_dashboard "https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/layouts/dashboard/Dashboard.tsx"
click node_fe_navigation "https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/components/side-nav/SideNav.tsx"
click node_fe_home "https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/pages/home/Home.tsx"
click node_fe_widgets "https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/components/meetings/MeetingCard.tsx"
click node_fe_companies "https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/pages/companies/Companies.tsx"
click node_fe_company_table "https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/pages/companies/components/CompaniesTable.tsx"
click node_fe_company_form "https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/pages/companies/components/CompanyForm.tsx"
click node_fe_contacts "https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/pages/contact/Contacts.tsx"
click node_fe_contact_create "https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/pages/contact/create-new/CreateNew.tsx"
click node_be_server "https://github.com/vgvengi/crm-full-stack/blob/main/backend/server.ts"
click node_be_companies "https://github.com/vgvengi/crm-full-stack/blob/main/backend/routes/companies.routes.ts"
click node_be_contacts "https://github.com/vgvengi/crm-full-stack/blob/main/backend/routes/contacts.routes.ts"
click node_be_db "https://github.com/vgvengi/crm-full-stack/blob/main/backend/config/db.ts"

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_fe_main,node_fe_app,node_fe_routes,node_fe_dashboard,node_fe_navigation,node_fe_home,node_fe_widgets,node_fe_companies,node_fe_company_table,node_fe_company_form,node_fe_contacts,node_fe_contact_create toneBlue
class node_be_server,node_be_companies,node_be_contacts,node_be_db toneAmber
```

## Components

### React frontend

Vite/React dashboard runtime.

- [React bootstrap](https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/main.tsx): entry point · `frontend/src/main.tsx`
- [Application shell](https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/App.tsx): React app · `frontend/src/App.tsx`
- [App routes](https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/routes/AppRoutes.tsx): route selection · `frontend/src/routes/AppRoutes.tsx`
- [Dashboard layout](https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/layouts/dashboard/Dashboard.tsx): layout · Main UI composition boundary. · `frontend/src/layouts/dashboard/Dashboard.tsx`
- [Navigation chrome](https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/components/side-nav/SideNav.tsx): UI navigation · Side navigation and top bar. · `frontend/src/components/side-nav/SideNav.tsx`
- [Home dashboard](https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/pages/home/Home.tsx): page · `frontend/src/pages/home/Home.tsx`
- [Dashboard widgets](https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/components/meetings/MeetingCard.tsx): presentation modules · Meetings, tasks, and sales pipeline widgets. · `frontend/src/components/meetings/MeetingCard.tsx`
- [Companies page](https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/pages/companies/Companies.tsx): page · `frontend/src/pages/companies/Companies.tsx`
- [Companies table](https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/pages/companies/components/CompaniesTable.tsx): table view · Includes row rendering. · `frontend/src/pages/companies/components/CompaniesTable.tsx`
- [Company form](https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/pages/companies/components/CompanyForm.tsx): edit form · `frontend/src/pages/companies/components/CompanyForm.tsx`
- [Contacts page](https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/pages/contact/Contacts.tsx): page · Contacts table and edit screens. · `frontend/src/pages/contact/Contacts.tsx`
- [Contact/account workflow](https://github.com/vgvengi/crm-full-stack/blob/main/frontend/src/pages/contact/create-new/CreateNew.tsx): creation flow · New contact and account screens. · `frontend/src/pages/contact/create-new/CreateNew.tsx`

### Node backend

HTTP API and database boundary.

- [HTTP server](https://github.com/vgvengi/crm-full-stack/blob/main/backend/server.ts): entry point · `backend/server.ts`
- [Companies API](https://github.com/vgvengi/crm-full-stack/blob/main/backend/routes/companies.routes.ts): resource routes · `backend/routes/companies.routes.ts`
- [Contacts API](https://github.com/vgvengi/crm-full-stack/blob/main/backend/routes/contacts.routes.ts): resource routes · `backend/routes/contacts.routes.ts`
- [Database connection](https://github.com/vgvengi/crm-full-stack/blob/main/backend/config/db.ts): persistence boundary · Database engine is unspecified. · `backend/config/db.ts`

## Connections

- React bootstrap → Application shell: renders
- Application shell → App routes: selects pages
- App routes → Dashboard layout: uses layout
- Dashboard layout → Navigation chrome: composes
- App routes → Home dashboard: routes to
- Home dashboard → Dashboard widgets: composes
- App routes → Companies page: routes to
- Companies page → Companies table: renders
- Companies page → Company form: creates and edits
- App routes → Contacts page: routes to
- Contacts page → Contact/account workflow: starts creation
- Companies page → Companies API: resource requests
- Company form → Companies API: mutations
- Contacts page → Contacts API: resource requests
- Contact/account workflow → Contacts API: creates contacts/accounts
- HTTP server → Companies API: registers
- HTTP server → Contacts API: registers
- Companies API → Database connection: persists
- Contacts API → Database connection: persists