# jashanpreet-82099/ai-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/jashanpreet-82099/ai-portfolio
- Repository: https://github.com/jashanpreet-82099/ai-portfolio

## Overview

AI Builder turns a user’s prompt into an editable website: authenticated users create projects, generate and refine HTML using AI, preview it safely, then publish through Vercel or GitHub. The surrounding product adds project management, community browsing/likes, account verification and settings, and credit purchases. The graph follows sampled routing, controller, generation, payment, and preview code; several README-described UI and community details have only tree-level evidence, so uncertain internal calls are omitted.

Main entry points: [`FrontEnd/src/App.jsx`](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/App.jsx) (App routes), [`FrontEnd/src/utils/api.js`](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/utils/api.js) (API client), [`BackEnd/controllers/project.controller.js`](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/controllers/project.controller.js) (Project and generation logic), [`BackEnd/server.js`](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/server.js) (API server)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_app["App routes<br/>[App.jsx]"]
  node_authstate["Auth and theme state<br/>[AuthContext.jsx]"]
  node_dashboard["Dashboard<br/>[DashboardPage.jsx]"]
  node_builder["Website builder<br/>[BuilderPage.jsx]"]
  node_preview["Live preview<br/>[PreviewPage.jsx]"]
  node_previewguard["Safe HTML preview<br/>[safePreview.js]"]
  node_communityui["Community gallery<br/>[CommunityPage.jsx]"]
  node_pricingui["Pricing and credits<br/>[PricingPage.jsx]"]
  node_settingsui["Profile settings<br/>[SettingsPage.jsx]"]
  node_api["API client<br/>[api.js]"]
end

subgraph group_identity["Identity"]
  node_authroutes["Auth routes<br/>[auth.routes.js]"]
  node_authcontroller["Auth and account logic<br/>[auth.controller.js]"]
  node_authmiddleware["JWT auth guard<br/>[Auth.js]"]
  node_user["User records<br/>[User.js]"]
  node_emailotp["OTP and email services<br/>[services.js]"]
end

subgraph group_creation["Site creation"]
  node_projectroutes["Project routes<br/>[project.routes.js]"]
  node_projectcontroller["Project and generation logic"]
  node_projectmodel["Project records<br/>[Project.js]"]
  node_aiservices["AI generation services<br/>[services.js]"]
  node_mockgen["Fallback site generator<br/>[mockGenerator.js]"]
end

subgraph group_publishing["Publishing and community"]
  node_deployroutes["Deploy routes<br/>[project.deploy.js]"]
  node_communityroutes["Community routes"]
  node_communitycontroller["Community logic"]
  node_serviceintegrations["External service helpers<br/>[services.js]"]
end

subgraph group_billing["Credits and billing"]
  node_paymentsroutes["Payment routes<br/>[payment.routes.js]"]
  node_paymentcontroller["Payment and credit logic"]
  node_paymentmodel["Payment records<br/>[Payment.js]"]
end

node_visitor(("Visitor / creator"))
node_server["API server<br/>[server.js]"]
node_mongodb[("MongoDB")]
node_ai{{"AI model APIs"}}
node_emailprovider{{"Brevo email"}}
node_stripe{{"Stripe"}}
node_vercel{{"Vercel"}}

node_visitor -->|"uses"| node_app
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_builder
node_app -->|"routes to"| node_preview
node_app -->|"routes to"| node_communityui
node_app -->|"routes to"| node_pricingui
node_app -->|"routes to"| node_settingsui
node_dashboard -.->|"requests projects"| node_api
node_builder -.->|"requests generation"| node_api
node_preview -->|"loads project"| node_api
node_preview -->|"sanitizes HTML"| node_previewguard
node_communityui -.->|"requests gallery"| node_api
node_pricingui -.->|"requests billing"| node_api
node_settingsui -.->|"requests account"| node_api
node_app -->|"provides state"| node_authstate
node_api -->|"HTTP requests"| node_server
node_server -->|"mounts"| node_authroutes
node_server -->|"mounts"| node_projectroutes
node_server -->|"mounts"| node_communityroutes
node_server -->|"mounts"| node_paymentsroutes
node_authroutes -->|"dispatches"| node_authcontroller
node_authroutes -->|"guards routes"| node_authmiddleware
node_authcontroller -->|"reads and writes"| node_user
node_authcontroller -->|"reads activity"| node_projectmodel
node_authcontroller -->|"issues and verifies OTP"| node_emailotp
node_emailotp -->|"sends mail"| node_emailprovider
node_authmiddleware -->|"loads identity"| node_user
node_projectroutes -->|"guards routes"| node_authmiddleware
node_projectroutes -->|"dispatches"| node_projectcontroller
node_projectroutes -->|"dispatches deploy"| node_deployroutes
node_projectcontroller -->|"reads and writes"| node_projectmodel
node_projectcontroller -->|"checks and updates credits"| node_user
node_projectcontroller -->|"enhances and generates"| node_aiservices
node_projectcontroller -->|"generates fallback"| node_mockgen
node_aiservices -.->|"calls model APIs"| node_ai
node_projectmodel -->|"persists"| node_mongodb
node_user -->|"persists"| node_mongodb
node_deployroutes -->|"publishes project"| node_serviceintegrations
node_serviceintegrations -.->|"deploys site"| node_vercel
node_communityroutes -->|"dispatches"| node_communitycontroller
node_communitycontroller -->|"reads and updates"| node_projectmodel
node_paymentsroutes -->|"guards routes"| node_authmiddleware
node_paymentsroutes -->|"dispatches"| node_paymentcontroller
node_paymentcontroller -->|"reads and writes"| node_paymentmodel
node_paymentcontroller -->|"adds purchased credits"| node_user
node_paymentcontroller -->|"creates and verifies checkout"| node_serviceintegrations
node_serviceintegrations -.->|"handles checkout"| node_stripe
node_paymentmodel -->|"persists"| node_mongodb

click node_app "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/App.jsx"
click node_authstate "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/context/AuthContext.jsx"
click node_dashboard "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/Pages/DashboardPage.jsx"
click node_builder "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/Pages/BuilderPage.jsx"
click node_preview "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/Pages/PreviewPage.jsx"
click node_previewguard "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/utils/safePreview.js"
click node_communityui "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/Pages/CommunityPage.jsx"
click node_pricingui "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/Pages/PricingPage.jsx"
click node_settingsui "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/Pages/SettingsPage.jsx"
click node_api "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/utils/api.js"
click node_server "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/server.js"
click node_authroutes "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/routes/auth.routes.js"
click node_authcontroller "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/controllers/auth.controller.js"
click node_authmiddleware "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/middleware/Auth.js"
click node_user "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/models/User.js"
click node_emailotp "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/utils/services.js"
click node_projectroutes "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/routes/project.routes.js"
click node_projectcontroller "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/controllers/project.controller.js"
click node_projectmodel "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/models/Project.js"
click node_aiservices "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/utils/services.js"
click node_mockgen "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/utils/mockGenerator.js"
click node_deployroutes "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/routes/project.deploy.js"
click node_communityroutes "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/routes/community.routes.js"
click node_communitycontroller "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/controllers/communityController.js"
click node_paymentsroutes "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/routes/payment.routes.js"
click node_paymentcontroller "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/controllers/payment.controller.js"
click node_paymentmodel "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/models/Payment.js"
click node_serviceintegrations "https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/utils/services.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_authstate,node_dashboard,node_builder,node_preview,node_previewguard,node_communityui,node_pricingui,node_settingsui,node_api toneBlue
class node_authroutes,node_authcontroller,node_authmiddleware,node_user,node_emailotp,node_mongodb toneAmber
class node_projectroutes,node_projectcontroller,node_projectmodel,node_aiservices,node_mockgen,node_server,node_ai toneMint
class node_deployroutes,node_communityroutes,node_communitycontroller,node_serviceintegrations toneRose
class node_paymentsroutes,node_paymentcontroller,node_paymentmodel,node_visitor,node_emailprovider,node_stripe,node_vercel toneIndigo
```

## Components

### Web client

- [App routes](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/App.jsx): `FrontEnd/src/App.jsx`
- [Auth and theme state](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/context/AuthContext.jsx): `FrontEnd/src/context/AuthContext.jsx`
- [Dashboard](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/Pages/DashboardPage.jsx): `FrontEnd/src/Pages/DashboardPage.jsx`
- [Website builder](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/Pages/BuilderPage.jsx): `FrontEnd/src/Pages/BuilderPage.jsx`
- [Live preview](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/Pages/PreviewPage.jsx): `FrontEnd/src/Pages/PreviewPage.jsx`
- [Safe HTML preview](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/utils/safePreview.js): `FrontEnd/src/utils/safePreview.js`
- [Community gallery](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/Pages/CommunityPage.jsx): `FrontEnd/src/Pages/CommunityPage.jsx`
- [Pricing and credits](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/Pages/PricingPage.jsx): `FrontEnd/src/Pages/PricingPage.jsx`
- [Profile settings](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/Pages/SettingsPage.jsx): `FrontEnd/src/Pages/SettingsPage.jsx`
- [API client](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/FrontEnd/src/utils/api.js): `FrontEnd/src/utils/api.js`

### Identity

- [Auth routes](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/routes/auth.routes.js): `BackEnd/routes/auth.routes.js`
- [Auth and account logic](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/controllers/auth.controller.js): `BackEnd/controllers/auth.controller.js`
- [JWT auth guard](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/middleware/Auth.js): `BackEnd/middleware/Auth.js`
- [User records](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/models/User.js): `BackEnd/models/User.js`
- [OTP and email services](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/utils/services.js): `BackEnd/utils/services.js`

### Site creation

- [Project routes](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/routes/project.routes.js): `BackEnd/routes/project.routes.js`
- [Project and generation logic](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/controllers/project.controller.js): `BackEnd/controllers/project.controller.js`
- [Project records](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/models/Project.js): `BackEnd/models/Project.js`
- [AI generation services](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/utils/services.js): `BackEnd/utils/services.js`
- [Fallback site generator](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/utils/mockGenerator.js): `BackEnd/utils/mockGenerator.js`

### Publishing and community

- [Deploy routes](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/routes/project.deploy.js): `BackEnd/routes/project.deploy.js`
- [Community routes](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/routes/community.routes.js): `BackEnd/routes/community.routes.js`
- [Community logic](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/controllers/communityController.js): `BackEnd/controllers/communityController.js`
- [External service helpers](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/utils/services.js): `BackEnd/utils/services.js`

### Credits and billing

- [Payment routes](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/routes/payment.routes.js): `BackEnd/routes/payment.routes.js`
- [Payment and credit logic](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/controllers/payment.controller.js): `BackEnd/controllers/payment.controller.js`
- [Payment records](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/models/Payment.js): `BackEnd/models/Payment.js`

### Other components

- **Visitor / creator**
- [API server](https://github.com/jashanpreet-82099/ai-portfolio/blob/main/BackEnd/server.js): `BackEnd/server.js`
- **MongoDB**
- **AI model APIs**
- **Brevo email**
- **Stripe**
- **Vercel**

## Connections

- Visitor / creator → App routes: uses
- App routes → Dashboard: routes to
- App routes → Website builder: routes to
- App routes → Live preview: routes to
- App routes → Community gallery: routes to
- App routes → Pricing and credits: routes to
- App routes → Profile settings: routes to
- Dashboard → API client: requests projects
- Website builder → API client: requests generation
- Live preview → API client: loads project
- Live preview → Safe HTML preview: sanitizes HTML
- Community gallery → API client: requests gallery
- Pricing and credits → API client: requests billing
- Profile settings → API client: requests account
- App routes → Auth and theme state: provides state
- API client → API server: HTTP requests
- API server → Auth routes: mounts
- API server → Project routes: mounts
- API server → Community routes: mounts
- API server → Payment routes: mounts
- Auth routes → Auth and account logic: dispatches
- Auth routes → JWT auth guard: guards routes
- Auth and account logic → User records: reads and writes
- Auth and account logic → Project records: reads activity
- Auth and account logic → OTP and email services: issues and verifies OTP
- OTP and email services → Brevo email: sends mail
- JWT auth guard → User records: loads identity
- Project routes → JWT auth guard: guards routes
- Project routes → Project and generation logic: dispatches
- Project routes → Deploy routes: dispatches deploy
- Project and generation logic → Project records: reads and writes
- Project and generation logic → User records: checks and updates credits
- Project and generation logic → AI generation services: enhances and generates
- Project and generation logic → Fallback site generator: generates fallback
- AI generation services → AI model APIs: calls model APIs
- Project records → MongoDB: persists
- User records → MongoDB: persists
- Deploy routes → External service helpers: publishes project
- External service helpers → Vercel: deploys site
- Community routes → Community logic: dispatches
- Community logic → Project records: reads and updates
- Payment routes → JWT auth guard: guards routes
- Payment routes → Payment and credit logic: dispatches
- Payment and credit logic → Payment records: reads and writes
- Payment and credit logic → User records: adds purchased credits
- Payment and credit logic → External service helpers: creates and verifies checkout
- External service helpers → Stripe: handles checkout
- Payment records → MongoDB: persists