How sarifali1/my-portfolio works
This is a MERN portfolio site whose main visitor workflow is browsing portfolio sections and submitting a contact message for persistent storage. A separate admin workflow signs in, uses a JWT-protected dashboard, and manages stored messages. The frontend also provides theme, navigation, and analytics features. The graph includes the documented MongoDB-backed API and major portfolio sections; sampled source establishes the frontend contact request and backend routing, while some admin API details are supported by the README and source index rather than excerpts.
Main entry points: Home.jsx Portfolio home · App.jsx App routes · server.js Express server · api.js API client
Components 30
Portfolio experience
- Portfolio home
frontend/src/pages/Home.jsx - Hero
frontend/src/components/Hero.jsx - Skills
frontend/src/components/Skills.jsx - Projects
frontend/src/components/Projects.jsx - Education
frontend/src/components/Education.jsx - Achievements
frontend/src/components/AchievementCounter.jsx - Contact form
frontend/src/components/Contact.jsx - Welcome modal
frontend/src/components/WelcomeModal.jsx - Footer
frontend/src/components/Footer.jsx
Frontend shell
- App routes
frontend/src/App.jsx - Navigation
frontend/src/components/Navbar.jsx - Theme toggle
frontend/src/components/DarkModeToggle.jsx - Theme state
frontend/src/hooks/useDarkMode.js - Analytics
frontend/src/utils/analytics.js
Admin access
- Admin login
frontend/src/pages/AdminLogin.jsx - Route guard
frontend/src/utils/ProtectedRoute.jsx - Message dashboard
frontend/src/pages/AdminDashboard.jsx
API services
- API client
frontend/src/utils/api.js - Express server
backend/server.js - Auth routes
backend/routes/authRoutes.js - Auth controller
backend/controllers/authController.js - JWT guard
backend/middleware/authMiddleware.js - Contact routes
backend/routes/contactRoutes.js - Contact controller
backend/controllers/contactController.js - Error handling
backend/middleware/errorHandler.js
Persistence
- Admin model
backend/models/Admin.js - Contact model
backend/models/Contact.js - Database connection
backend/config/db.js
Other components
- Visitor
- MongoDB
Connections 33
- Visitor → App routes: opens
README.md - App routes → Portfolio home: routes to
frontend/src/App.jsx - Portfolio home → Hero: renders
frontend/src/pages/Home.jsx - Portfolio home → Skills: renders
frontend/src/pages/Home.jsx - Portfolio home → Projects: renders
frontend/src/pages/Home.jsx - Portfolio home → Education: renders
frontend/src/pages/Home.jsx - Portfolio home → Achievements: renders
frontend/src/pages/Home.jsx - Portfolio home → Contact form: renders
frontend/src/pages/Home.jsx - Portfolio home → Welcome modal: renders
frontend/src/pages/Home.jsx - Portfolio home → Footer: renders
frontend/src/pages/Home.jsx - App routes → Navigation: renders
frontend/src/App.jsx - Navigation → Theme toggle: renders
frontend/src/components/Navbar.jsx - Theme toggle → Theme state: uses
frontend/src/components/DarkModeToggle.jsx - App routes → Analytics: initializes
frontend/src/App.jsx - App routes → Admin login: routes to
frontend/src/App.jsx - App routes → Route guard: routes through
frontend/src/App.jsx - Route guard → Message dashboard: protects
- Admin login → API client: requests
frontend/src/pages/AdminLogin.jsx - Message dashboard → API client: requests
frontend/src/pages/AdminDashboard.jsx - Contact form → API client: posts message
frontend/src/components/Contact.jsx - API client → Express server: calls API
README.md - Express server → Auth routes: mounts
backend/server.js - Express server → Contact routes: mounts
backend/server.js - Express server → Error handling: handles errors
backend/server.js - Auth routes → Auth controller: dispatches
backend/routes/authRoutes.js - Contact routes → Contact controller: dispatches
backend/routes/contactRoutes.js - Contact routes → JWT guard: guards reads
backend/routes/contactRoutes.js - Auth controller → Admin model: checks credentials
backend/controllers/authController.js - Contact controller → Contact model: stores messages
backend/controllers/contactController.js - Express server → Database connection: connects
backend/server.js - Database connection → MongoDB: connects to
- Contact model → MongoDB: persists data
README.md - Admin model → MongoDB: persists data
README.md