# asif-jutt/myportfolio architecture

> Architecture diagram of the GitHub repository asif-jutt/myportfolio, 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/asif-jutt/myportfolio
- Repository: https://github.com/asif-jutt/myportfolio

## Overview

#### Purpose and Deployment Shape
MyPortfolio is a full-stack personal portfolio and lightweight content-management application. It exposes public portfolio content and a contact channel, while restricting content mutations to JWT-authenticated administrators. The React/Vite SPA is intended for Vercel; the Django REST API is configured for Render and connects to MongoDB Atlas.

Key deployment/runtime files: `frontend/package.json`, `frontend/vercel.json`, `backend/render.yaml`, `backend/Procfile`, `backend/portfolio/settings.py`.

#### Frontend Entry and Composition
The browser application starts at `frontend/src/main.tsx`, renders the application shell from `frontend/src/App.tsx`, and uses `frontend/src/layouts/RootLayout.tsx` to establish shared page structure. The primary public route is represented by `frontend/src/pages/HomePage.tsx`; unmatched routes use `frontend/src/pages/NotFoundPage.tsx`.

The homepage assembles section-oriented portfolio UI rather than separate feature pages: hero, projects, skills, experience timeline, and contact.

#### Portfolio Content Presentation
Projects, skills, and experiences are independently fetched and rendered as public content domains. Each domain has a service layer, React data hook, and section/component layer:
- Projects: `frontend/src/services/projectsApi.ts`, `frontend/src/hooks/useProjects.ts`, `frontend/src/components/Projects/ProjectsSection.tsx`
- Skills: `frontend/src/services/skillsApi.ts`, `frontend/src/hooks/useSkills.ts`, `frontend/src/components/Skills/SkillsSection.tsx`
- Experience: `frontend/src/services/experiencesApi.ts`, `frontend/src/hooks/useExperiences.ts`, `frontend/src/components/Timeline/TimelineSection.tsx`

Project filtering and modal selection are client-side UI state concerns, separated into `frontend/src/stores/useFilterStore.ts` and `frontend/src/stores/useModalStore.ts`.

#### Client Data and Interaction Boundary
`frontend/src/lib/api.ts` is the API-client boundary, with endpoint-specific adapters in `frontend/src/services/`. React Query is centralized through `frontend/src/lib/queryClient.ts`, allowing hooks to own request lifecycle, caching, loading, and error behavior. Type contracts are collected in `frontend/src/types/api.ts`.

Contact submission follows a dedicated flow: `frontend/src/components/Contact/ContactForm.tsx` delegates form state/submission to `frontend/src/hooks/useContactForm.ts`, which calls `frontend/src/services/contactApi.ts`. Toast state is separated in `frontend/src/stores/useToastStore.ts`.

#### Django API Composition
Django starts through `backend/manage.py`; WSGI deployment enters via `backend/portfolio/wsgi.py`. Global settings and root API routing reside in `backend/portfolio/settings.py` and `backend/portfolio/urls.py`.

The API is organized as domain apps with the consistent model → serializer → view → URL boundary:
- Projects: `backend/apps/projects/models.py`, `backend/apps/projects/views.py`, `backend/apps/projects/urls.py`
- Skills: `backend/apps/skills/models.py`, `backend/apps/skills/views.py`, `backend/apps/skills/urls.py`
- Experiences: `backend/apps/experiences/models.py`, `backend/apps/experiences/views.py`, `backend/apps/experiences/urls.py`
- Contact: `backend/apps/contact/models.py`, `backend/apps/contact/views.py`, `backend/apps/contact/urls.py`

#### Security and Write Control
Cross-cutting API policy belongs to the core app. JWT authentication is implemented through `backend/apps/core/authentication.py`; authorization rules through `backend/apps/core/permissions.py`; and request protection/rate limiting through `backend/apps/core/middleware.py` and `backend/apps/core/throttling.py`.

Public clients read portfolio content and submit contact messages. Administrative clients use `frontend/src/services/authApi.ts` to obtain credentials, then make authenticated write requests against protected Django endpoints.

#### Persistence and External Services
MongoDB Atlas is the intended persistence system for portfolio entities and contact submissions, with data model definitions in each backend domain app. Email handling associated with contact processing is isolated in `backend/apps/contact/email.py`. Initial or repeatable portfolio content population is provided by `backend/apps/core/management/commands/seed_data.py`.

Main entry points: [`backend/portfolio/urls.py`](https://github.com/asif-jutt/myportfolio/blob/main/backend/portfolio/urls.py) (Root API router), [`backend/apps/contact/views.py`](https://github.com/asif-jutt/myportfolio/blob/main/backend/apps/contact/views.py) (Contact API), [`frontend/src/lib/api.ts`](https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/lib/api.ts) (API client boundary), [`frontend/src/App.tsx`](https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/App.tsx) (App shell and routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["React SPA"]
  node_spa_entry["SPA entry<br/>React entry<br/>[main.tsx]"]
  node_app_shell["App shell and routes<br/>React composition<br/>[App.tsx]"]
  node_root_layout["Shared layout<br/>React layout<br/>[RootLayout.tsx]"]
  node_home["Portfolio homepage<br/>public route<br/>[HomePage.tsx]"]
  node_portfolio_hooks["Portfolio data hooks<br/>React Query hooks<br/>[useProjects.ts]"]
  node_portfolio_services["Portfolio API adapters<br/>service layer<br/>[projectsApi.ts]"]
  node_portfolio_sections["Portfolio sections<br/>React components"]
  node_contact_flow["Contact submission<br/>form flow<br/>[ContactForm.tsx]"]
  node_api_client["API client boundary<br/>HTTP client<br/>[api.ts]"]
  node_admin_auth["Admin authentication<br/>auth service<br/>[authApi.ts]"]
end

subgraph group_backend["Django API"]
  node_django_entry["Django runtime<br/>WSGI application<br/>[wsgi.py]"]
  node_api_router["Root API router<br/>Django URL routing<br/>[urls.py]"]
  node_api_policy["JWT and request policy<br/>cross-cutting security<br/>[authentication.py]"]
  node_portfolio_api["Portfolio content APIs<br/>Django domain apps<br/>[views.py]"]
  node_contact_api["Contact API<br/>Django domain app<br/>[views.py]"]
  node_email_handler["Contact email handler<br/>email integration<br/>[email.py]"]
  node_seed_command["Portfolio seed command<br/>Django management command<br/>[seed_data.py]"]
end

subgraph group_external["External Services"]
  node_mongodb[("MongoDB Atlas<br/>database")]
  node_vercel{{"Vercel<br/>frontend hosting<br/>[vercel.json]"}}
  node_render{{"Render<br/>API hosting<br/>[render.yaml]"}}
end

node_spa_entry -->|"renders"| node_app_shell
node_app_shell -->|"uses"| node_root_layout
node_app_shell -->|"routes to"| node_home
node_home -->|"composes"| node_portfolio_sections
node_portfolio_sections -->|"reads through"| node_portfolio_hooks
node_portfolio_hooks -->|"calls"| node_portfolio_services
node_portfolio_services -->|"uses"| node_api_client
node_home -->|"includes"| node_contact_flow
node_contact_flow -->|"submits via"| node_api_client
node_admin_auth -->|"supplies JWT for"| node_api_client
node_api_client -->|"HTTP requests"| node_api_router
node_django_entry -->|"serves"| node_api_router
node_api_router -->|"applies"| node_api_policy
node_api_router -->|"routes content requests"| node_portfolio_api
node_api_router -->|"routes contact requests"| node_contact_api
node_api_policy -->|"protects writes"| node_portfolio_api
node_api_policy -->|"protects requests"| node_contact_api
node_portfolio_api -->|"reads and writes"| node_mongodb
node_contact_api -->|"persists messages"| node_mongodb
node_contact_api -->|"notifies through"| node_email_handler
node_seed_command -.->|"populates"| node_mongodb
node_vercel -->|"hosts"| node_spa_entry
node_render -->|"hosts"| node_django_entry

click node_spa_entry "https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/main.tsx"
click node_app_shell "https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/App.tsx"
click node_root_layout "https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/layouts/RootLayout.tsx"
click node_home "https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/pages/HomePage.tsx"
click node_portfolio_hooks "https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/hooks/useProjects.ts"
click node_portfolio_services "https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/services/projectsApi.ts"
click node_portfolio_sections "https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/components/Projects/ProjectsSection.tsx"
click node_contact_flow "https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/components/Contact/ContactForm.tsx"
click node_api_client "https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/lib/api.ts"
click node_admin_auth "https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/services/authApi.ts"
click node_django_entry "https://github.com/asif-jutt/myportfolio/blob/main/backend/portfolio/wsgi.py"
click node_api_router "https://github.com/asif-jutt/myportfolio/blob/main/backend/portfolio/urls.py"
click node_api_policy "https://github.com/asif-jutt/myportfolio/blob/main/backend/apps/core/authentication.py"
click node_portfolio_api "https://github.com/asif-jutt/myportfolio/blob/main/backend/apps/projects/views.py"
click node_contact_api "https://github.com/asif-jutt/myportfolio/blob/main/backend/apps/contact/views.py"
click node_email_handler "https://github.com/asif-jutt/myportfolio/blob/main/backend/apps/contact/email.py"
click node_seed_command "https://github.com/asif-jutt/myportfolio/blob/main/backend/apps/core/management/commands/seed_data.py"
click node_vercel "https://github.com/asif-jutt/myportfolio/blob/main/frontend/vercel.json"
click node_render "https://github.com/asif-jutt/myportfolio/blob/main/backend/render.yaml"

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_spa_entry,node_app_shell,node_root_layout,node_home,node_portfolio_hooks,node_portfolio_services,node_portfolio_sections,node_contact_flow,node_api_client,node_admin_auth toneBlue
class node_django_entry,node_api_router,node_api_policy,node_portfolio_api,node_contact_api,node_email_handler,node_seed_command toneAmber
class node_mongodb,node_vercel,node_render toneMint
```

## Components

### React SPA

Vite browser application deployed to Vercel.

- [SPA entry](https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/main.tsx): React entry · `frontend/src/main.tsx`
- [App shell and routes](https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/App.tsx): React composition · `frontend/src/App.tsx`
- [Shared layout](https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/layouts/RootLayout.tsx): React layout · `frontend/src/layouts/RootLayout.tsx`
- [Portfolio homepage](https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/pages/HomePage.tsx): public route · Assembles hero, portfolio sections, and contact. · `frontend/src/pages/HomePage.tsx`
- [Portfolio data hooks](https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/hooks/useProjects.ts): React Query hooks · Own caching and request lifecycle for public content. · `frontend/src/hooks/useProjects.ts`
- [Portfolio API adapters](https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/services/projectsApi.ts): service layer · Projects, skills, and experience endpoint adapters. · `frontend/src/services/projectsApi.ts`
- [Portfolio sections](https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/components/Projects/ProjectsSection.tsx): React components · Projects, skills, and experience presentation. · `frontend/src/components/Projects/ProjectsSection.tsx`
- [Contact submission](https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/components/Contact/ContactForm.tsx): form flow · Form hook submits messages and triggers toast state. · `frontend/src/components/Contact/ContactForm.tsx`
- [API client boundary](https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/lib/api.ts): HTTP client · `frontend/src/lib/api.ts`
- [Admin authentication](https://github.com/asif-jutt/myportfolio/blob/main/frontend/src/services/authApi.ts): auth service · Obtains JWT credentials for protected writes. · `frontend/src/services/authApi.ts`

### Django API

REST API deployed to Render.

- [Django runtime](https://github.com/asif-jutt/myportfolio/blob/main/backend/portfolio/wsgi.py): WSGI application · `backend/portfolio/wsgi.py`
- [Root API router](https://github.com/asif-jutt/myportfolio/blob/main/backend/portfolio/urls.py): Django URL routing · `backend/portfolio/urls.py`
- [JWT and request policy](https://github.com/asif-jutt/myportfolio/blob/main/backend/apps/core/authentication.py): cross-cutting security · Authentication, authorization, protection, and throttling. · `backend/apps/core/authentication.py`
- [Portfolio content APIs](https://github.com/asif-jutt/myportfolio/blob/main/backend/apps/projects/views.py): Django domain apps · Projects, skills, and experiences expose model-to-view endpoints. · `backend/apps/projects/views.py`
- [Contact API](https://github.com/asif-jutt/myportfolio/blob/main/backend/apps/contact/views.py): Django domain app · Persists submissions and invokes email handling. · `backend/apps/contact/views.py`
- [Contact email handler](https://github.com/asif-jutt/myportfolio/blob/main/backend/apps/contact/email.py): email integration · `backend/apps/contact/email.py`
- [Portfolio seed command](https://github.com/asif-jutt/myportfolio/blob/main/backend/apps/core/management/commands/seed_data.py): Django management command · Populates repeatable initial portfolio content. · `backend/apps/core/management/commands/seed_data.py`

### External Services

- **MongoDB Atlas**: database · Persistence for portfolio entities and contact messages.
- [Vercel](https://github.com/asif-jutt/myportfolio/blob/main/frontend/vercel.json): frontend hosting · `frontend/vercel.json`
- [Render](https://github.com/asif-jutt/myportfolio/blob/main/backend/render.yaml): API hosting · `backend/render.yaml`

## Connections

- SPA entry → App shell and routes: renders
- App shell and routes → Shared layout: uses
- App shell and routes → Portfolio homepage: routes to
- Portfolio homepage → Portfolio sections: composes
- Portfolio sections → Portfolio data hooks: reads through
- Portfolio data hooks → Portfolio API adapters: calls
- Portfolio API adapters → API client boundary: uses
- Portfolio homepage → Contact submission: includes
- Contact submission → API client boundary: submits via
- Admin authentication → API client boundary: supplies JWT for
- API client boundary → Root API router: HTTP requests
- Django runtime → Root API router: serves
- Root API router → JWT and request policy: applies
- Root API router → Portfolio content APIs: routes content requests
- Root API router → Contact API: routes contact requests
- JWT and request policy → Portfolio content APIs: protects writes
- JWT and request policy → Contact API: protects requests
- Portfolio content APIs → MongoDB Atlas: reads and writes
- Contact API → MongoDB Atlas: persists messages
- Contact API → Contact email handler: notifies through
- Portfolio seed command → MongoDB Atlas: populates
- Vercel → SPA entry: hosts
- Render → Django runtime: hosts