asif-jutt/myportfolio

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.