Master Data Structures and Algorithms with a comprehensive learning platform
- ✅ Progress Tracking - Track your completion status across 1000+ curated DSA problems
- 🏆 Achievement System - Earn XP and unlock achievements as you solve problems
- 🎨 Multiple Themes - Terminal, Zen, Quest, Modern, and Retro modes
- 🌙 Dark Mode - Full dark mode support with smooth transitions
- ⌨️ Keyboard Shortcuts - Navigate efficiently with keyboard controls
- 📝 Personal Notes - Add notes to questions for future reference
- 📊 Statistics Dashboard - Visualize your learning progress with detailed stats
- 🎯 Topic-based Learning - Organized learning paths for all major DSA topics
- 💾 Local Storage - All progress saved locally, no account required
- 📱 PWA Support - Install as a native app on any device
- 🔍 SEO Optimized - Fully optimized for search engines
- Framework: Next.js 16 - React framework with App Router
- UI Library: React 19 - Latest React version
- Language: TypeScript - Type-safe JavaScript
- Styling: Tailwind CSS 4 - Utility-first CSS framework
- State Management: React Context API
- Icons: Heroicons (via inline SVG)
- Fonts: Geist Sans & Geist Mono
- Node.js 20+ and npm/yarn/pnpm/bun
- Clone the repository:
git clone https://github.com/yourusername/devmap.git
cd devmap- Install dependencies:
npm install
# or
yarn install
# or
pnpm install
# or
bun install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev- Open http://localhost:3000 in your browser.
devmap/
├── public/ # Static assets
│ ├── favicon.svg # App favicon
│ ├── og-image.svg # Social share image
│ ├── manifest.json # PWA manifest
│ ├── robots.txt # Search engine directives
│ ├── sitemap.xml # Site structure
│ └── llms.txt # LLM context file
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── layout.tsx # Root layout with metadata
│ │ ├── page.tsx # Homepage
│ │ ├── globals.css # Global styles & themes
│ │ └── stats/ # Statistics page
│ ├── components/ # React components
│ │ ├── DSAWebsite.tsx # Main app component
│ │ ├── ProgressProvider.tsx # Progress state management
│ │ ├── ThemeSwitcher.tsx # Theme controls
│ │ ├── TopicMap.tsx # Topic visualization
│ │ ├── AchievementPopup.tsx # Achievement notifications
│ │ ├── DevMapLogo.tsx # App logo component
│ │ └── ...
│ ├── data/ # DSA content data
│ ├── utils/ # Utility functions
│ ├── hooks/ # Custom React hooks
│ └── lib/ # Library code
└── package.json
DevMap comes with 5 beautiful themes:
- Fusion (Default) - Modern gradient theme
- Terminal - Hacker-style green terminal
- Zen - Minimal, distraction-free
- Quest - Gamified purple theme
- Retro - Pixel art CRT effect
?- Open keyboard shortcuts modalk- Toggle dark modet- Switch themes- Open statisticsEsc- Close modals
Topics are organized hierarchically:
Topic → Categories → QuestionsEach question includes:
- Title and link
- Difficulty level
- Practice platforms (LeetCode, GFG, etc.)
- Progress status
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
- Inspired by popular DSA learning platforms
- Built with amazing open-source technologies
- Community-driven problem curation
For questions or feedback, please open an issue on GitHub.
Made with ❤️ for developers learning DSA
⭐ Star this repo if you find it helpful!