PrepStreak

Stop panicking. Start preparing. Land your dream job.

Comment

Inspiration

Every placement season, we watch our friends spiral into what we call "placement panic" — the dreaded cycle of opening 50 browser tabs of LeetCode, GeeksforGeeks, and random PDFs, only to end up watching YouTube motivation videos at 2 AM. We saw brilliant engineers crumble not because they lacked talent, but because they lacked structure, consistency, and a gamified system that makes daily prep feel achievable rather than overwhelming.

We asked ourselves: What if preparing for placements felt like leveling up in a game instead of drowning in bookmarks? What if an app could understand whether you're targeting a service company (TCS, Infosys — heavy on aptitude + easy DSA), a product giant (Google, Amazon — hard DSA + system design), or a startup (full-stack projects + modern frameworks), and give you a personalized daily mission?

That's how PrepStreak was born — a panic solver disguised as a daily quest engine.

What it does

PrepStreak is a single-player, streak-driven placement preparation platform that turns interview prep into a daily habit loop:

🎯 Smart Company-Type Onboarding

Users select their target:

Service → Aptitude-heavy + easy DSA Product → Hard DSA + system design + algorithm theory Startup → Full-stack problems + modern framework learning 📋 Auto-Generated Daily Tasks

Every day, the app generates a fresh set of tasks from curated problem pools — no more decision fatigue. Tasks include:

MCQ-based aptitude problems with instant feedback LeetCode-style DSA problems with difficulty badges Behavioral interview practice prompts System design case studies (for product track) 🔥 The Streak & Heat System 📊 Real-Time Analytics Dashboard

Powered by Recharts, users see:

Weekly completion bar charts Streak flame counters Daily score rings with bonus indicators AI-style prep insights that change based on their actual performance data

How we built it

Understood. I'm analyzing your instruction and will handle it for you shortly. Our stack was intentionally lean — we wanted to ship a polished, offline-capable product in 24 hours without getting bogged down in backend setup or DevOps.

We chose React with Vite and TypeScript as our core framework. Vite gave us instant hot reload and a zero-config production build, while TypeScript ensured we caught type mismatches early — especially critical when dealing with nested data structures for tasks, scores, and streaks.

For styling, we went with Tailwind CSS. It let us iterate on the UI rapidly and implement our premium dark theme — built around a deep #0a0a0a background with neon #00ff88 green and #00d9ff cyan accents — without writing custom CSS files. The glassmorphism card effects using backdrop-blur and subtle white borders were all done via utility classes.

Animations were handled by Framer Motion. We used it for page transitions, staggered entrance animations on cards, floating gradient orbs in the background, and smooth expand/collapse effects on task items. It gave the app a native-app feel despite being a web project.

For data visualization, we integrated Recharts. It powered the weekly completion bar charts and responsive score visualizations on the progress page. It is composable and worked well with our dark theme out of the box.

Since this is a hackathon project with no backend, we used browser localStorage for all persistence. Every task completion, score update, streak change, and even the list of recently used problems is serialized to localStorage. This means the app works completely offline and loads instantly.

User feedback is delivered through Sonner, a lightweight toast notification library. It provides clean success, info, and warning toasts that match our dark aesthetic without any custom styling overhead.

On the architecture side, all state management is centralized in a single storage service. This service handles generating daily tasks by picking problems from company-specific pools, tracking which problems have been used recently to avoid repetition, toggling task completion, updating streaks when the user hits the 70 percent daily completion threshold, and computing real-time preparation insights based on the last seven days of performance data.

The app routing is handled with a simple page-switcher pattern in the main App component rather than bringing in a heavy router library. This kept the bundle size small and the logic straightforward — the app flows from Landing to Onboarding to Dashboard, with Progress and Settings as secondary pages.

Every design decision prioritized speed of development and offline reliability, letting us focus on building a genuinely useful product rather than wrestling with infrastructure.

Challenges we ran into

  1. TypeScript + Framer Motion Type Mismatches

motion.div doesn't play nicely with Tailwind's dynamic class strings in strict TypeScript mode. We had to cast components:

const MDiv = motion.div as any; Not elegant, but it let us keep our animation layer without fighting the type system for 3 hours.

  1. Problem Deduplication Across Sessions

We needed to ensure users don't see the same aptitude problem two days in a row. We implemented a rotating "used" buffer (last 20 IDs per category) stored in localStorage, but had to handle edge cases where the pool runs dry.

  1. Streak Logic & Date Boundaries

Streak calculation seems simple until you deal with timezone midnight boundaries and local date strings. Our formula:

$$\text{Streak}_{\text{valid}} = \text{lastCompletedDate} = \text{yesterday} \implies \text{streak} + 1$$

Had to be carefully tested across day rollovers.

  1. Responsive Glassmorphism UI

Designing a premium dark theme (#0a0a0a background, #00ff88 neon green, #00d9ff cyan) that looks good on both mobile and desktop while maintaining glass-card aesthetics with backdrop-blur was a visual engineering challenge.

Accomplishments that we're proud of

Zero-backend, fully functional product — Everything works offline. No API keys, no servers, no latency.

Dynamic task generation — The app feels "alive" because every day brings fresh, relevant problems tailored to the user's track.

Real insight engine — Not hardcoded motivational quotes; actual data-driven suggestions based on heat, streak, and today's completion rate.

Polished UX — Floating gradient orbs, staggered entrance animations, animated checkboxes, and toast notifications make it feel like a commercial product, not a hackathon MVP.

Clean state management — Despite no Redux/Zustand, our storage abstraction handles complex cross-cutting concerns (tasks, scores, streaks, used problems) in ~350 lines.

What we learned

TypeScript strict mode is a double-edged sword — It caught real bugs (like isCompleted vs completed field mismatches) but also forced creative workarounds for animation libraries. Gamification actually works — The decision to require $\geq 70%$ completion for streak credit was debated, but it forces users to actually finish their plan, not just tick one checkbox. localStorage is surprisingly powerful — For a personal productivity tool, you don't always need a database. With structured keys and JSON serialization, we built a fully persistent app. Framer Motion + Tailwind = magic — The combination let us create cinema-grade UI in minutes, not days.

What's next for PrepStreak

  • LeetCode API Integration — Auto-sync solved problems to verify task completion instead of manual toggling.

  • Spaced Repetition (SRS) — Re-surface problems the user got wrong after $1, 3, 7, 21$ days using the forgetting curve:.

  • Mock Interview Timer — Add a Pomodoro-style focus mode with camera recording for behavioral practice.

  • Peer Leaderboards — Optional social layer where hostel floors or CS departments compete on weekly heat scores.

  • Export to Notion/Google Calendar — Turn daily tasks into calendar events with deep links.

Built With

Share this project:

Updates