Generate structured learning roadmaps for any topic. Enter a subject, pick your experience level and preferred resource types, and get a personalised path with concepts, curated resources, projects, and next steps — all powered by Gemini AI with live web search.
- AI-generated roadmaps — topic overview, ordered concepts, prerequisites, projects, and going-ahead suggestions
- Curated resources — Gemini searches the web for real links (videos, courses, books, blogs, papers, threads); broken links are automatically replaced
- Experience levels — beginner / intermediate / advanced / unspecified
- Resource preferences — filter by type; 2 resources per type per concept
- Explore — browse public roadmaps from the community; star favourites
- My Roadmaps — manage your own roadmaps: rename, toggle visibility, delete, filter, search
- Real-time progress — SSE stream shows generation phase live
- Google sign-in — one-click Google OAuth from the nav; avatar dropdown for sign out and account deletion
| Layer | Tech |
|---|---|
| Framework | Next.js 16 (App Router), React 19 |
| Auth | NextAuth v5 beta, Google OIDC |
| Database | MongoDB via Mongoose |
| AI | Gemini 2.5 Flash + Google Search grounding |
| Data fetching | TanStack Query v5 |
| Styling | Tailwind CSS v4 |
- Node.js 20+
- MongoDB connection string
- Google OAuth credentials
- Gemini API key
Create a .env.local:
MONGODB_URI=...
AUTH_SECRET=...
AUTH_GOOGLE_ID=...
AUTH_GOOGLE_SECRET=...
GEMINI_API_KEY=...
YOUTUBE_API_KEY=...npm install
npm run devOpen http://localhost:3000.
npm run build
npm startapp/
api/roadmaps/ # REST API (list, create, PATCH, DELETE, star, stream, more-resources, retry)
explore/ # Public roadmap browser (no auth required)
roadmap/[slug]/ # Roadmap detail page (public roadmaps open to all; private = 404)
roadmaps/ # My Roadmaps (auth required)
components/
home/ # Landing page search form + customise panel
roadmap/ # RoadmapView, ConceptCard, ResourceCard, ProjectCard
roadmaps/ # RoadmapGrid, ExploreGrid, RoadmapCard, ExploreCard
ProfileMenu.tsx # Avatar dropdown — sign out / delete account
QueryProvider.tsx # TanStack Query client wrapper
lib/
ai/ # Generation pipeline, prompts, Gemini calls
auth-actions.ts # Server actions: signInWithGoogle, signOutUser, deleteAccount
db/ # Mongoose models and connection
types/ # Shared TypeScript types
auth.ts # NextAuth config
proxy.ts # Auth middleware (public routes + API bypass)