How yashh0225/job-prep-platform works
1. Overall shape
- This is a two-tier job-prep platform: a React/Vite SPA in client/ and an Express/MongoDB API in server/.
- The frontend owns the user experience and route transitions; the backend owns authentication, AI workflows, persistence, and history.
2. Frontend shell and navigation
- client/src/App.jsx and client/src/main.jsx are the SPA entry points.
- Pages are organized by product flow: Landing, Login, Register, VerifyOTP, AuthCallback, Dashboard, ResumeAnalyzer, RoadmapGenerator, RoadmapView, MockSetup, MockInterview, MockResult, History.
- ProtectedRoute.jsx indicates that most product features are gated behind authentication.
3. Frontend state and cross-cutting UI
- AuthContext.jsx centralizes signed-in state and user/session handling.
- ToastContext.jsx handles user-facing notifications.
- Shared UI components such as Navbar, Sidebar, and SkillGauge support the app shell and progress visualization.
4. Frontend feature components
- FileUpload.jsx is the main entry point for resume/doc ingestion.
- AudioRecorder.jsx supports voice-based interview responses.
- CodeEditor.jsx supports coding/DSA interview questions.
- These components map directly to the platform’s core workflows: resume analysis and multi-format mock interviews.
5. Frontend-to-backend communication
- client/src/services/api.js is the main HTTP boundary from the SPA to the API.
- The frontend is configured for deployment separately (client/vercel.json), and the runtime target backend is injected via environment variables like VITE_API_URL.
6. Backend application structure
- server/server.js is the API entry point.
- Express routes are split by domain:
- routes/auth.js
- routes/analysis.js
- routes/roadmap.js
- routes/interview.js
- This suggests a clear domain boundary between identity, AI analysis, learning plans, and interview sessions.
7. Authentication subsystem
- Authentication is a mix of JWT, Google OAuth, and OTP email verification.
- config/passport.js handles Google OAuth integration.
- middleware/auth.js protects API routes that require a valid session/token.
- models/User.js persists accounts and auth-related user state.
- services/email.js supports OTP delivery and verification flows.
8. AI-powered resume analysis
- routes/analysis.js likely orchestrates resume vs job-description evaluation.
- services/gemini.js is the AI integration point; the README identifies Google Gemini 2.5 Flash as the model provider.
- models/AnalysisSession.js stores the output/history of analysis runs, so results can be revisited later.
9. Roadmap generation and tracking
- routes/roadmap.js and models/Roadmap.js form the study-plan subsystem.
- The flow is: user context + AI generation -> persisted roadmap -> view/update in the UI (RoadmapGenerator, RoadmapView).
- This subsystem is distinct from interview evaluation: it produces a longer-lived learning plan rather than a one-off assessment.
10. Mock interview subsystem
- routes/interview.js and models/MockInterview.js power the interview experience and its saved results.
- The frontend supports multiple interaction modes: coding/DSA, technical text/audio, HR/behavioral text/audio, and CS fundamentals MCQ/descriptive.
- MockSetup configures the session, MockInterview runs it, and MockResult shows scoring and recommendation output.
11. Persistence and data flow
- MongoDB is the system of record, accessed through Mongoose models in server/models/.
- Core persisted entities are users, analysis sessions, roadmaps, and mock interview sessions.
- The main data flow is: user input in React → API request → Express route → auth/validation → AI/service call → MongoDB write/read → results returned to UI.
12. Infrastructure and deployment
- The backend is containerized with server/Dockerfile, which matters for Render-style deployment.
- The README describes a split deployment model: Vercel for the frontend and Render for the backend.
- CLIENT_URL and other environment variables are used to bind the two halves together securely across origins.
13. What to show in an architecture diagram
- Draw three main boundaries: browser SPA, API server, and MongoDB/externals.
- Inside the API boundary, separate Auth, AI/Analysis, Roadmaps, and Interview Evaluation.
- External services to show explicitly: Google Gemini for AI, Google OAuth for login, and email delivery for OTP verification.
Main entry points: App.jsx Routes · server.js Server entry · auth.js Auth API · api.js API client
Components 24
Browser SPA
React/Vite frontend for user flows and authenticated product screens.
- App shell · SPA bootstrap and top-level routing.
client/src/main.jsx - Routes · Coordinates landing, auth, dashboard, and product pages.
client/src/App.jsx - Auth state · Signed-in session and user state shared across the app.
client/src/context/AuthContext.jsx - Toasts · User-facing notifications and transient feedback.
client/src/context/ToastContext.jsx - Protected route · Blocks access to authenticated product flows.
client/src/components/ProtectedRoute.jsx - Shell UI · Shared navigation and progress UI for the authenticated experience.
client/src/components/Navbar.jsx - Resume upload · Ingests resume or document files for analysis workflows.
client/src/components/FileUpload.jsx - Voice input · Captures spoken interview answers.
client/src/components/AudioRecorder.jsx - Code editor · Supports coding and DSA-style interview responses.
client/src/components/CodeEditor.jsx - API client · Main frontend service layer for backend requests.
client/src/services/api.js
API Server
Express backend for auth, AI workflows, and persisted user data.
- Server entry · Starts the API and wires routes and middleware.
server/server.js - Auth API · Login, registration, OAuth, OTP, and session validation.
server/routes/auth.js - Analysis API · Resume and job-description analysis workflows.
server/routes/analysis.js - Roadmap API · Generates and serves learning plans.
server/routes/roadmap.js - Interview API · Runs mock interview sessions and stores outcomes.
server/routes/interview.js - Mongo models · Mongoose models for users, analysis sessions, roadmaps, and interviews.
server/models/User.js - Gemini service · Google Gemini-powered generation and scoring logic.
server/services/gemini.js - Email service · Sends OTP and verification emails.
server/services/email.js - Google OAuth · Passport integration for Google sign-in.
server/config/passport.js - Auth middleware · Protects API routes that require valid auth.
server/middleware/auth.js
External Services
Third-party and infrastructure dependencies used by the app.
- MongoDB · System of record for user accounts and saved product artifacts.
- Google Gemini · LLM provider used for analysis, roadmap, and interview generation.
- Google OAuth · Third-party identity provider for social login.
- Email provider · Outbound email infrastructure for OTP delivery.
Connections 31
- App shell → Routes: bootstraps · Initializes the SPA and renders route structure.
- Routes → Auth state: reads session · Uses auth state to decide which flows are available.
- Routes → Protected route: protects · Wraps authenticated pages behind access checks.
- Routes → Shell UI: renders shell · Provides shared navigation and layout on product screens.
- Routes → Resume upload: resume flow · Routes to the analysis entry point.
- Routes → Voice input: interview flow · Supports spoken interview answers.
- Routes → Code editor: interview flow · Supports coding interview answers.
- Routes → Toasts: notifies · Surfaces success and error feedback.
- API client → Server entry: requests · Frontend API calls target the backend entry point.
- Server entry → Auth API: mounts · Registers authentication routes.
- Server entry → Analysis API: mounts · Registers analysis routes.
- Server entry → Roadmap API: mounts · Registers roadmap routes.
- Server entry → Interview API: mounts · Registers interview routes.
- Auth API → Auth middleware: uses · Protects authenticated auth endpoints where needed.
- Auth API → Google OAuth: delegates OAuth · Uses Passport for Google sign-in.
- Auth API → Email service: sends OTP · Triggers verification email delivery.
- Analysis API → Gemini service: calls AI · Generates or evaluates resume analysis outputs.
- Roadmap API → Gemini service: calls AI · Builds personalized learning plans.
- Interview API → Gemini service: calls AI · Produces questions, scoring, or recommendations.
- Analysis API → Mongo models: reads/writes · Persists analysis sessions and history.
- Roadmap API → Mongo models: reads/writes · Stores roadmap plans for later viewing.
- Interview API → Mongo models: reads/writes · Stores mock interview sessions and results.
- Auth API → Mongo models: reads/writes · Persists user accounts and auth state.
- Mongo models → MongoDB: persists to · All core entities are stored in MongoDB.
- Gemini service → Google Gemini: depends on · Uses Google Gemini as the model provider.
- Google OAuth → Google OAuth: delegates to · Authenticates users through Google.
- Email service → Email provider: delivers via · Sends OTP messages through external email infrastructure.
- Auth state → API client: auth headers · Session state informs authenticated requests.
- Resume upload → API client: submits file · Uploads resume content to analysis endpoints.
- Voice input → API client: submits audio · Sends recorded interview responses.
- Code editor → API client: submits code · Sends code interview responses.