# tharun272004/outpro-react-clean architecture

> Architecture diagram of the GitHub repository tharun272004/outpro-react-clean, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/tharun272004/outpro-react-clean
- Repository: https://github.com/tharun272004/outpro-react-clean

## Overview

Outpro India is a corporate services and portfolio website, with a backend for contact-message intake and an admin dashboard for managing messages. Visitors navigate the React site; the listed services page links to service details. Admins can log in and manage contact records through protected API routes. The sampled sources confirm routing, contact APIs, authentication middleware, and database startup; other public page content and the login component’s API wiring were not sampled.

Main entry points: [`Major project Ulx/outpro-react-clean/src/App.js`](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/App.js) (App Router), [`Major project Ulx/outpro-react-clean/backend/server.js`](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/backend/server.js) (API Server), [`Major project Ulx/outpro-react-clean/backend/routes/contactRoutes.js`](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/backend/routes/contactRoutes.js) (Contact Routes), [`Major project Ulx/outpro-react-clean/src/pages/Services.js`](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/Services.js) (Services)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Public Website"]
  node_app["App Router<br/>[App.js]"]
  node_navbar["Navigation<br/>[Navbar.js]"]
  node_footer["Footer<br/>[Footer.js]"]
  node_home["Home<br/>[Home.js]"]
  node_about["About<br/>[About.js]"]
  node_services["Services<br/>[Services.js]"]
  node_service_detail["Service Details<br/>[ServiceDetail.js]"]
  node_portfolio["Portfolio<br/>[Portfolio.js]"]
  node_testimonials["Testimonials<br/>[Testimonials.js]"]
  node_blog["Blog<br/>[Blog.js]"]
  node_careers["Careers<br/>[Careers.js]"]
  node_partners["Partners<br/>[Partners.js]"]
  node_not_found["Not Found<br/>[Notfound.js]"]
end

subgraph group_admin["Admin Console"]
  node_admin_login["Admin Login<br/>[AdminLogin.jsx]"]
  node_protected_route["Protected Route<br/>[ProtectedRoute.jsx]"]
  node_dashboard["Message Dashboard<br/>[Dashboard.jsx]"]
end

subgraph group_api["Backend API"]
  node_server["API Server<br/>[server.js]"]
  node_contact_routes["Contact Routes<br/>[contactRoutes.js]"]
  node_auth_routes["Auth Routes<br/>[authRoutes.js]"]
  node_auth_middleware["JWT Guard<br/>[authMiddleware.js]"]
end

subgraph group_data["Persistence"]
  node_contact_model["Contact Model<br/>[contact.js]"]
  node_admin_model["Admin Model<br/>[auth.js]"]
  node_db_connector["DB Connector<br/>[db.js]"]
end

node_visitor(("Visitor"))
node_mongodb[("MongoDB")]

node_visitor -->|"browses"| node_app
node_app -->|"routes"| node_home
node_app -->|"routes"| node_about
node_app -->|"routes"| node_services
node_app -->|"routes"| node_service_detail
node_app -->|"routes"| node_portfolio
node_app -->|"routes"| node_testimonials
node_app -->|"routes"| node_blog
node_app -->|"routes"| node_careers
node_app -->|"routes"| node_partners
node_app -->|"routes"| node_not_found
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_footer
node_services -->|"links to"| node_service_detail
node_app -->|"routes"| node_admin_login
node_app -->|"guards route"| node_protected_route
node_protected_route -->|"allows access"| node_dashboard
node_dashboard -->|"requests contacts"| node_server
node_server -->|"mounts"| node_contact_routes
node_server -->|"mounts"| node_auth_routes
node_server -->|"connects"| node_db_connector
node_contact_routes -->|"guards admin routes"| node_auth_middleware
node_contact_routes -->|"reads and writes"| node_contact_model
node_auth_routes -->|"reads and writes"| node_admin_model
node_contact_model -->|"persists records"| node_mongodb
node_admin_model -->|"persists accounts"| node_mongodb
node_db_connector -->|"connects"| node_mongodb

click node_app "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/App.js"
click node_navbar "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/components/Navbar.js"
click node_footer "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/components/Footer.js"
click node_home "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/Home.js"
click node_about "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/About.js"
click node_services "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/Services.js"
click node_service_detail "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/ServiceDetail.js"
click node_portfolio "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/Portfolio.js"
click node_testimonials "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/Testimonials.js"
click node_blog "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/Blog.js"
click node_careers "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/Careers.js"
click node_partners "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/Partners.js"
click node_not_found "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/Notfound.js"
click node_admin_login "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/admin/pages/AdminLogin.jsx"
click node_protected_route "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/admin/components/ProtectedRoute.jsx"
click node_dashboard "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/admin/pages/Dashboard.jsx"
click node_server "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/backend/server.js"
click node_contact_routes "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/backend/routes/contactRoutes.js"
click node_auth_routes "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/backend/routes/authRoutes.js"
click node_auth_middleware "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/backend/middleware/authMiddleware.js"
click node_contact_model "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/backend/models/contact.js"
click node_admin_model "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/backend/models/auth.js"
click node_db_connector "https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/backend/config/db.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_app,node_navbar,node_footer,node_home,node_about,node_services,node_service_detail,node_portfolio,node_testimonials,node_blog,node_careers,node_partners,node_not_found toneBlue
class node_admin_login,node_protected_route,node_dashboard,node_mongodb toneAmber
class node_server,node_contact_routes,node_auth_routes,node_auth_middleware toneMint
class node_contact_model,node_admin_model,node_db_connector toneRose
class node_visitor toneIndigo
```

## Components

### Public Website

- [App Router](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/App.js): `Major project Ulx/outpro-react-clean/src/App.js`
- [Navigation](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/components/Navbar.js): `Major project Ulx/outpro-react-clean/src/components/Navbar.js`
- [Footer](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/components/Footer.js): `Major project Ulx/outpro-react-clean/src/components/Footer.js`
- [Home](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/Home.js): `Major project Ulx/outpro-react-clean/src/pages/Home.js`
- [About](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/About.js): `Major project Ulx/outpro-react-clean/src/pages/About.js`
- [Services](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/Services.js): `Major project Ulx/outpro-react-clean/src/pages/Services.js`
- [Service Details](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/ServiceDetail.js): `Major project Ulx/outpro-react-clean/src/pages/ServiceDetail.js`
- [Portfolio](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/Portfolio.js): `Major project Ulx/outpro-react-clean/src/pages/Portfolio.js`
- [Testimonials](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/Testimonials.js): `Major project Ulx/outpro-react-clean/src/pages/Testimonials.js`
- [Blog](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/Blog.js): `Major project Ulx/outpro-react-clean/src/pages/Blog.js`
- [Careers](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/Careers.js): `Major project Ulx/outpro-react-clean/src/pages/Careers.js`
- [Partners](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/Partners.js): `Major project Ulx/outpro-react-clean/src/pages/Partners.js`
- [Not Found](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/pages/Notfound.js): `Major project Ulx/outpro-react-clean/src/pages/Notfound.js`

### Admin Console

- [Admin Login](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/admin/pages/AdminLogin.jsx): `Major project Ulx/outpro-react-clean/src/admin/pages/AdminLogin.jsx`
- [Protected Route](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/admin/components/ProtectedRoute.jsx): `Major project Ulx/outpro-react-clean/src/admin/components/ProtectedRoute.jsx`
- [Message Dashboard](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/src/admin/pages/Dashboard.jsx): `Major project Ulx/outpro-react-clean/src/admin/pages/Dashboard.jsx`

### Backend API

- [API Server](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/backend/server.js): `Major project Ulx/outpro-react-clean/backend/server.js`
- [Contact Routes](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/backend/routes/contactRoutes.js): `Major project Ulx/outpro-react-clean/backend/routes/contactRoutes.js`
- [Auth Routes](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/backend/routes/authRoutes.js): `Major project Ulx/outpro-react-clean/backend/routes/authRoutes.js`
- [JWT Guard](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/backend/middleware/authMiddleware.js): `Major project Ulx/outpro-react-clean/backend/middleware/authMiddleware.js`

### Persistence

- [Contact Model](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/backend/models/contact.js): `Major project Ulx/outpro-react-clean/backend/models/contact.js`
- [Admin Model](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/backend/models/auth.js): `Major project Ulx/outpro-react-clean/backend/models/auth.js`
- [DB Connector](https://github.com/tharun272004/outpro-react-clean/blob/main/Major%20project%20Ulx/outpro-react-clean/backend/config/db.js): `Major project Ulx/outpro-react-clean/backend/config/db.js`

### Other components

- **Visitor**
- **MongoDB**

## Connections

- Visitor → App Router: browses
- App Router → Home: routes
- App Router → About: routes
- App Router → Services: routes
- App Router → Service Details: routes
- App Router → Portfolio: routes
- App Router → Testimonials: routes
- App Router → Blog: routes
- App Router → Careers: routes
- App Router → Partners: routes
- App Router → Not Found: routes
- App Router → Navigation: renders
- App Router → Footer: renders
- Services → Service Details: links to
- App Router → Admin Login: routes
- App Router → Protected Route: guards route
- Protected Route → Message Dashboard: allows access
- Message Dashboard → API Server: requests contacts
- API Server → Contact Routes: mounts
- API Server → Auth Routes: mounts
- API Server → DB Connector: connects
- Contact Routes → JWT Guard: guards admin routes
- Contact Routes → Contact Model: reads and writes
- Auth Routes → Admin Model: reads and writes
- Contact Model → MongoDB: persists records
- Admin Model → MongoDB: persists accounts
- DB Connector → MongoDB: connects