DSA Interview Roadmap

A structured learning path for technical interviews — built with Next.js 14, React, and TailwindCSS.

What's inside

• 14 DSA topics with concept explanations, patterns, brute→optimal thinking, and curated LeetCode problems
• Interactive visualizations — step through Sliding Window, Binary Search, and Two Pointers
• Progress tracking — checkboxes persisted to localStorage, topic completion bars
• Pattern Cheatsheet — signal → technique quick-reference
• Common Mistakes and Interview Guide pages
• Fully responsive — sidebar on desktop, drawer on mobile

---

Getting started locally

Prerequisites

• Node.js 18+ (download)
• npm 9+ (comes with Node)

1. Install dependencies

cd dsa-roadmap
npm install

2. Run the development server

npm run dev

Open http://localhost:3000 in your browser.

3. Build for production (optional)

npm run build
npm run start

---

Deploying to Vercel

Option A — Vercel CLI (fastest)

npm install -g vercel
vercel

Follow the prompts. Your site will be live in ~60 seconds.

Option B — GitHub + Vercel dashboard

1. Push this repo to GitHub
2. Go to vercel.com → New Project
3. Import your repository
4. Leave all settings as default — Vercel auto-detects Next.js
5. Click Deploy

---

Project structure

dsa-roadmap/
├── src/
│   ├── app/                        # Next.js App Router pages
│   │   ├── layout.tsx              # Root layout (sidebar, fonts, providers)
│   │   ├── page.tsx                # Homepage — roadmap grid
│   │   ├── not-found.tsx           # 404 page
│   │   ├── topics/
│   │   │   └── [slug]/
│   │   │       ├── page.tsx        # Static route generation
│   │   │       └── TopicPageClient.tsx  # Client component (tabs, progress)
│   │   ├── cheatsheet/
│   │   │   └── page.tsx            # Pattern recognition cheatsheet
│   │   ├── mistakes/
│   │   │   └── page.tsx            # Common interview mistakes
│   │   └── interview/
│   │       └── page.tsx            # Interview preparation guide
│   │
│   ├── components/
│   │   ├── ui/
│   │   │   ├── Sidebar.tsx         # Desktop sidebar with nav + topic list
│   │   │   ├── MobileHeader.tsx    # Mobile top bar + drawer
│   │   │   ├── TopicCard.tsx       # Roadmap grid card
│   │   │   ├── ProgressBar.tsx     # Reusable progress bar
│   │   │   ├── DifficultyBadge.tsx # Easy/Medium/Hard colored badge
│   │   │   ├── ThinkingStep.tsx    # Brute→Optimal step card
│   │   │   └── ProblemList.tsx     # Checkboxes + LeetCode links
│   │   └── visualizations/
│   │       ├── SlidingWindowViz.tsx  # Step-through window animation
│   │       ├── BinarySearchViz.tsx   # Step-through binary search
│   │       └── TwoPointersViz.tsx    # Step-through two pointer
│   │
│   ├── data/
│   │   └── topics.ts               # ALL topic content — edit this to add/update
│   │
│   ├── lib/
│   │   ├── utils.ts                # cn(), getDifficultyClasses(), localStorage helpers
│   │   └── progress-context.tsx    # React context for solved problem state
│   │
│   └── styles/
│       └── globals.css             # CSS variables, Tailwind base, fonts
│
├── public/                         # Static assets
├── package.json
├── tailwind.config.ts
├── tsconfig.json
├── next.config.js
└── vercel.json

---

Adding a new topic

All topic content lives in src/data/topics.ts. To add or update a topic:

1. Add a TopicMeta entry to the TOPICS array
2. Add a TopicDetail entry to the TOPIC_DETAILS object with the same id
3. The route /topics/your-id will be automatically generated

// In TOPICS array:
{ id: "your-topic", num: 15, title: "Your Topic", ... }

// In TOPIC_DETAILS:
"your-topic": {
  ...TOPICS[14],
  concept: "...",
  whenToUse: [...],
  patterns: [...],
  thinkingSteps: [...],
  problems: [...],
  pitfalls: [...],
}

Adding a visualization

1. Create src/components/visualizations/YourTopicViz.tsx
2. Import it in TopicPageClient.tsx
3. Add your topic id to the HAS_VIZ set
4. Add the component to the <Visualization> function's switch

---

Tech stack

Tool	Version	Purpose
Next.js	14	App Router, static generation, routing
React	18	UI components, hooks, context
TailwindCSS	3.4	Utility-first styling
TypeScript	5	Type safety across all data and components
Lucide React	0.383	Icons (available, used optionally)
clsx	2.1	Conditional className merging