# vishaljadhav003/motionpix_website architecture

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

- Interactive diagram: https://gitdiagram.com/vishaljadhav003/motionpix_website
- Repository: https://github.com/vishaljadhav003/motionpix_website

## Overview

MotionPix is a creative-services website with an Express backend for inquiries, careers, administration, and visitor analytics. The main visitor journey enters the React app, browses routed service and company pages, and can submit contact or career information; backend routes and controllers handle those requests. The frontend also provides an AI chatbot and visitor tracking. Source excerpts show several backend integrations directly; other documented-by-index links are limited to imports and routing, so unsampled runtime behavior is not inferred.

Main entry points: [`src/App.jsx`](https://github.com/vishaljadhav003/motionpix_website/blob/main/src/App.jsx) (React app and routes), [`backend/app.js`](https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/app.js) (HTTP and socket server), [`backend/controllers/contactController.js`](https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/controllers/contactController.js) (Inquiry handling), [`backend/config/db.js`](https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/config/db.js) (MySQL pool)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Visitor Website"]
  node_react["React app and routes<br/>[App.jsx]"]
  node_services["Creative service pages<br/>[Animation3D.jsx]"]
  node_company["Company pages<br/>[About.jsx]"]
  node_careerform["Career application<br/>[Career.jsx]"]
  node_contactform["Contact form<br/>[Contact.jsx]"]
end

subgraph group_engagement["Visitor Engagement"]
  node_chatui["Chat interface<br/>[Chatbot.jsx]"]
  node_trackhook["Visitor tracking hooks<br/>[useTrackVisitor.js]"]
  node_presence["Live visitor presence<br/>[liveVisitors.js]"]
end

subgraph group_backend["Backend Operations"]
  node_content["Site content API"]
  node_careerroutes["Career routes<br/>[careerRoutes.js]"]
  node_careerctrl["Career handling"]
  node_contactroutes["Contact and chat routes<br/>[contactRoutes.js]"]
  node_contactctrl["Inquiry handling"]
  node_visitorapi["Visitor tracking API<br/>[visitorRoutes.js]"]
  node_server["HTTP and socket server<br/>[app.js]"]
end

subgraph group_state["Data and Integrations"]
  node_mysql[("MySQL pool<br/>[db.js]")]
  node_mail["Microsoft mail service<br/>[microsoftMail.js]"]
  node_attachments["Contact attachments"]
  node_templates["Inquiry email templates<br/>[emailTemplates.js]"]
end

node_visitor(("Website visitor"))

node_visitor -->|"opens site"| node_react
node_react -->|"routes to"| node_services
node_react -->|"routes to"| node_company
node_react -->|"routes to"| node_careerform
node_react -->|"routes to"| node_contactform
node_react -.->|"renders"| node_chatui
node_react -->|"invokes"| node_trackhook
node_server -->|"mounts"| node_careerroutes
node_server -->|"mounts"| node_contactroutes
node_server -->|"mounts"| node_visitorapi
node_server -.->|"mounts routes"| node_content
node_server -->|"initializes"| node_presence
node_careerroutes -->|"dispatches to"| node_careerctrl
node_careerctrl -->|"queries"| node_mysql
node_careerctrl -->|"sends email"| node_mail
node_contactroutes -->|"dispatches to"| node_contactctrl
node_contactctrl -->|"queries"| node_mysql
node_contactctrl -->|"saves files"| node_attachments
node_contactctrl -->|"builds email"| node_templates
node_contactctrl -->|"sends email"| node_mail
node_templates -->|"uses sender"| node_mail
node_visitorapi -->|"reads and writes"| node_mysql
node_visitorapi -.->|"updates sockets"| node_presence
node_presence -->|"records visits"| node_mysql
node_chatui -.->|"chat request"| node_contactroutes

click node_react "https://github.com/vishaljadhav003/motionpix_website/blob/main/src/App.jsx"
click node_services "https://github.com/vishaljadhav003/motionpix_website/blob/main/src/Animation3D.jsx"
click node_company "https://github.com/vishaljadhav003/motionpix_website/blob/main/src/About.jsx"
click node_careerform "https://github.com/vishaljadhav003/motionpix_website/blob/main/src/Career.jsx"
click node_contactform "https://github.com/vishaljadhav003/motionpix_website/blob/main/src/Contact.jsx"
click node_chatui "https://github.com/vishaljadhav003/motionpix_website/blob/main/src/Chatbot.jsx"
click node_trackhook "https://github.com/vishaljadhav003/motionpix_website/blob/main/src/useTrackVisitor.js"
click node_content "https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/controllers/contentController.js"
click node_careerroutes "https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/routes/careerRoutes.js"
click node_careerctrl "https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/controllers/careerController.js"
click node_contactroutes "https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/routes/contactRoutes.js"
click node_contactctrl "https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/controllers/contactController.js"
click node_visitorapi "https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/routes/visitorRoutes.js"
click node_server "https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/app.js"
click node_presence "https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/services/liveVisitors.js"
click node_mysql "https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/config/db.js"
click node_mail "https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/services/microsoftMail.js"
click node_attachments "https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/services/contactAttachments.js"
click node_templates "https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/services/emailTemplates.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_react,node_services,node_company,node_careerform,node_contactform toneBlue
class node_chatui,node_trackhook,node_presence toneAmber
class node_content,node_careerroutes,node_careerctrl,node_contactroutes,node_contactctrl,node_visitorapi,node_server toneMint
class node_mysql,node_mail,node_attachments,node_templates toneRose
class node_visitor toneIndigo
```

## Components

### Visitor Website

- [React app and routes](https://github.com/vishaljadhav003/motionpix_website/blob/main/src/App.jsx): `src/App.jsx`
- [Creative service pages](https://github.com/vishaljadhav003/motionpix_website/blob/main/src/Animation3D.jsx): `src/Animation3D.jsx`
- [Company pages](https://github.com/vishaljadhav003/motionpix_website/blob/main/src/About.jsx): `src/About.jsx`
- [Career application](https://github.com/vishaljadhav003/motionpix_website/blob/main/src/Career.jsx): `src/Career.jsx`
- [Contact form](https://github.com/vishaljadhav003/motionpix_website/blob/main/src/Contact.jsx): `src/Contact.jsx`

### Visitor Engagement

- [Chat interface](https://github.com/vishaljadhav003/motionpix_website/blob/main/src/Chatbot.jsx): `src/Chatbot.jsx`
- [Visitor tracking hooks](https://github.com/vishaljadhav003/motionpix_website/blob/main/src/useTrackVisitor.js): `src/useTrackVisitor.js`
- [Live visitor presence](https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/services/liveVisitors.js): `backend/services/liveVisitors.js`

### Backend Operations

- [Site content API](https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/controllers/contentController.js): `backend/controllers/contentController.js`
- [Career routes](https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/routes/careerRoutes.js): `backend/routes/careerRoutes.js`
- [Career handling](https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/controllers/careerController.js): `backend/controllers/careerController.js`
- [Contact and chat routes](https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/routes/contactRoutes.js): `backend/routes/contactRoutes.js`
- [Inquiry handling](https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/controllers/contactController.js): `backend/controllers/contactController.js`
- [Visitor tracking API](https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/routes/visitorRoutes.js): `backend/routes/visitorRoutes.js`
- [HTTP and socket server](https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/app.js): `backend/app.js`

### Data and Integrations

- [MySQL pool](https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/config/db.js): `backend/config/db.js`
- [Microsoft mail service](https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/services/microsoftMail.js): `backend/services/microsoftMail.js`
- [Contact attachments](https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/services/contactAttachments.js): `backend/services/contactAttachments.js`
- [Inquiry email templates](https://github.com/vishaljadhav003/motionpix_website/blob/main/backend/services/emailTemplates.js): `backend/services/emailTemplates.js`

### Other components

- **Website visitor**

## Connections

- Website visitor → React app and routes: opens site
- React app and routes → Creative service pages: routes to (evidence: `src/App.jsx`)
- React app and routes → Company pages: routes to (evidence: `src/App.jsx`)
- React app and routes → Career application: routes to (evidence: `src/App.jsx`)
- React app and routes → Contact form: routes to (evidence: `src/App.jsx`)
- React app and routes → Chat interface: renders (evidence: `src/App.jsx`)
- React app and routes → Visitor tracking hooks: invokes (evidence: `src/App.jsx`)
- HTTP and socket server → Career routes: mounts (evidence: `backend/app.js`)
- HTTP and socket server → Contact and chat routes: mounts (evidence: `backend/app.js`)
- HTTP and socket server → Visitor tracking API: mounts (evidence: `backend/app.js`)
- HTTP and socket server → Site content API: mounts routes
- HTTP and socket server → Live visitor presence: initializes (evidence: `backend/app.js`)
- Career routes → Career handling: dispatches to (evidence: `backend/routes/careerRoutes.js`)
- Career handling → MySQL pool: queries (evidence: `backend/controllers/careerController.js`)
- Career handling → Microsoft mail service: sends email (evidence: `backend/controllers/careerController.js`)
- Contact and chat routes → Inquiry handling: dispatches to (evidence: `backend/routes/contactRoutes.js`)
- Inquiry handling → MySQL pool: queries (evidence: `backend/controllers/contactController.js`)
- Inquiry handling → Contact attachments: saves files (evidence: `backend/controllers/contactController.js`)
- Inquiry handling → Inquiry email templates: builds email (evidence: `backend/controllers/contactController.js`)
- Inquiry handling → Microsoft mail service: sends email (evidence: `backend/controllers/contactController.js`)
- Inquiry email templates → Microsoft mail service: uses sender (evidence: `backend/services/emailTemplates.js`)
- Visitor tracking API → MySQL pool: reads and writes (evidence: `backend/routes/visitorRoutes.js`)
- Visitor tracking API → Live visitor presence: updates sockets
- Live visitor presence → MySQL pool: records visits (evidence: `backend/services/liveVisitors.js`)
- Chat interface → Contact and chat routes: chat request