PrepTrack

Students preparing for placements operate across an overwhelming number of tools simultaneously: LeetCode for problems, Notion for notes, Google Sheets for task tracking, random sticky notes for goals, and WhatsApp groups for resources. This context-switching leads to lost progress data, missed follow-ups, and zero visibility into overall placement readiness.

There was no single authenticated platform purpose-built for students to track everything — DSA grind, skill inventory, study materials, goals, and coding profiles — from one dashboard.

I built PrepTrack — a full-stack MERN application with JWT-based authentication where every piece of preparation data is owned by the user and persisted in MongoDB. The frontend is a React + Vite SPA with Zustand for state management, and the backend is a Node.js + Express REST API with protected routes.

The app is structured as an npm workspaces monorepo where both client/ and backend/ are managed from the project root, enabling a single npm install to wire up all dependencies.

• React + Vite: Fast HMR during development with a lean production bundle; React Router v6 handles client-side navigation across 8+ pages.
• Zustand: Lightweight global state management replacing Redux boilerplate — each module (tasks, goals, leetcode) has its own isolated store.
• Node.js + Express: RESTful API with 7 resource routers, all protected by a custom JWT middleware that verifies the Authorization: Bearer header.
• MongoDB + Mongoose: Flexible document schemas per module (Tasks, LeetCode entries, Goals, Skills, Resources, Profiles) all scoped to the authenticated user.
• JWT Authentication: Stateless auth — tokens are issued on login and verified server-side, enabling secure multi-device access without session storage.
• Tailwind CSS: Utility-first styling for rapid responsive UI iteration with a consistent design system.

• Dashboard Overview: Central hub showing LeetCode problems solved by difficulty, active goals count, tasks completed today, a GitHub-style activity heatmap, and weekly problem-solving trend charts.
• LeetCode Tracker: Log each problem with title, difficulty, topic tag, and status (Solved / Revisit / Skip). Filter by difficulty or topic with visual progress bars.
• Daily Agenda: Task manager with due dates, one-click completion toggle, and a weekly overview to visualise productivity patterns.
• Goals Module: Set SMART goals with numeric targets and an animated circular readiness ring that fills as you progress.
• Study Hub: Organised repository of PDFs, external links, and notes categorised by DSA, Core CS (OS/CN/DBMS), HR prep, and System Design.
• Interview Board: Kanban-style board (Scheduled → In Progress → Done) to log mock interview details — company, round, date, and feedback notes.
• Platform Trackers: Save and quick-launch your profiles on LeetCode, GitHub, Codeforces, GeeksForGeeks, and HackerRank from one page.

Challenge: Managing Parallel Module State Without Redux
With 7+ independent data modules (tasks, goals, leetcode, skills…), a single Redux store would have become a monolithic mess. Prop drilling was not an option either.

Solution: I adopted Zustand with one store per module. Each store co-locates its state, actions, and async API calls — making each feature independently testable and the codebase dramatically easier to navigate.

Challenge: JWT Token Expiry UX
When a JWT expired mid-session, users received cryptic 401 errors across every API call, breaking the entire UI state simultaneously.

Solution: I added an Axios response interceptor that catches 401 errors globally, clears the token from localStorage, and redirects the user to the login page with a toast notification — gracefully handling session expiry without per-component error handling.

Challenge: Activity Heatmap Performance
Rendering 365 daily squares with per-day color intensity from API data caused a noticeable render lag on the dashboard.

Solution: I pre-aggregated the activity data server-side into a date-keyed map before sending it to the frontend, and memoized the heatmap component with React.memo to prevent unnecessary re-renders on unrelated state changes.

PrepTrack consolidates what previously required 4–5 separate tools into a single authenticated dashboard. The readiness score gives students a quantified, at-a-glance view of where they stand — replacing the anxiety of "I don't know how ready I am" with a concrete metric.

Building this project deepened my expertise in full-stack MERN architecture, JWT-based authentication flows, monorepo tooling with npm workspaces, and designing data schemas for multi-module applications.