A modern, responsive web application for tracking and mastering Data Structures & Algorithms through pattern-based learning. Built with vanilla JavaScript, HTML, and CSS - no frameworks required.
DSA Pattern Pro helps developers prepare for coding interviews by organizing 141 curated DSA problems into 16 distinct pattern categories. Track your progress, filter by company and difficulty, and access video solutions - all in a beautiful, modern interface.
- Real-time Statistics: Track solved problems, success rate, and daily streak
- Topic-wise Progress: Monitor completion for each of the 16 DSA topics
- Persistent Storage: All progress saved locally (no backend required)
- Visual Progress Bars: See your advancement at a glance
- Professional Design: Clean morphism-inspired interface with gradient SVG icons
- Dark Mode: Full dark mode support with smooth transitions
- Fully Responsive: Works seamlessly on desktop, tablet, and mobile devices
- Sticky Sidebars: Navigation stays accessible while scrolling
- Topic Filter: 16 categories including Arrays, Hashing, Dynamic Programming, Graphs, Trees, etc.
- Company Filter: Filter problems by 13 top companies (Amazon, Google, Microsoft, Facebook, Apple, etc.)
- Difficulty Filter: Easy, Medium, Hard levels
- Combined Filtering: Apply multiple filters simultaneously
- 141 Curated Problems: Hand-picked problems covering all major patterns
- Video Solutions: Embedded YouTube video tutorials for each problem
- Company Tags: See which companies ask each question (top 5)
- Direct Links: Quick access to problem statements on LeetCode/other platforms
- Checkboxes: Mark problems as completed with instant progress updates
- Mobile-Friendly: Touch-optimized interface for smartphones
- Tablet Support: Adaptive layout for medium-sized screens
- Desktop Optimized: Full-featured experience with sidebars
- Floating Action Buttons: Easy sidebar access on mobile
- Embedded Videos: Watch solution videos directly in the app
- Modal Player: Clean, distraction-free video viewing
- Fallback Links: Direct YouTube links if embedding fails
- Streak Tracking: Monitor consecutive days of problem-solving
- Fire Icon: Visual streak indicator with gradient animation
- Achievement System: Unlock badges based on progress milestones
- Motivation: Track your journey from 0 to 141 problems
- Frontend: Vanilla JavaScript (ES6+)
- Styling: Custom CSS with CSS Variables for theming
- Storage: localStorage API for client-side persistence
- Icons: Professional SVG icons with gradient backgrounds
- Responsive: CSS Grid and Flexbox layouts
- No Dependencies: Zero external frameworks or libraries
dsa-pattern-pro/
├── index.html # Main HTML file
├── README.md # Project documentation
└── assets/ # (Optional) Additional assets
-
Clone or Download
git clone <repository-url> cd dsa-pattern-pro
-
Open in Browser
- Simply open
index.htmlin any modern web browser - No build process or server required!
- Simply open
- Browse Problems: Explore 141 problems organized by pattern
- Filter: Use topic, company, and difficulty filters
- Track Progress: Check off problems as you complete them
- Watch Videos: Click video buttons for solution tutorials
- Monitor Stats: View your progress in Quick Stats section
- Topics Section: Scrollable list of 16 DSA patterns with progress
- Quick Stats: Compact cards showing:
- Total Problems (141)
- Solved Count
- Success Rate
- Current Streak
- Filter Controls: Company, Difficulty, and Expand/Collapse button
- Topic Cards: Collapsible cards for each DSA pattern
- Problem List: Each problem shows:
- Checkbox for completion
- Problem name
- Company tags (uncolored, minimal)
- Difficulty badge (Easy/Medium/Hard)
- Video button
- Solve button (direct link)
- Additional Features: Statistics, achievements, etc.
- Sticky Behavior: Stays visible while scrolling
- Branding: DSA Pattern Pro logo
- Streak Display: Current streak with fire icon
- Dark Mode Toggle: Switch between light and dark themes
- Mobile Menu: Hamburger menu for mobile devices
- Arrays - 2-pointers, Sliding Window, Sorting, Merge Sort
- Hashing - Frequency & Set, Subarray patterns
- Binary Search - Bounds, Simple BS, On Answers, 2D
- Recursion - Subsequence problems
- Backtracking - Hard problems
- LinkedList - Pointer techniques, Advanced
- Greedy Algorithms - Interval Scheduling, Optimization
- Sliding Window - Fixed/Variable size, Counting
- Stack/Queue - Monotonic Stack, Cache
- Binary Tree - Traversal, Views, Properties, Construction
- Binary Search Tree - Core operations
- Heaps - Heapify, Kth Element
- Graphs - Traversals, Cycles, Shortest Path, MST
- Dynamic Programming - 1D/2D, Grids, Stocks, Strings, LIS, MCM
- Tries - Basic operations, Pattern matching
- Voting Algorithm - Majority Element
- Morphism Style: Soft shadows and subtle depth
- Gradient Icons: Beautiful SVG icons with linear gradients
- Color Scheme: Professional palette with cream/teal for light mode, slate for dark mode
- Typography: FKGroteskNeue, Geist, Inter font stack
- Spacing: Consistent padding and gaps throughout
- Smooth Transitions: 0.3s ease for all state changes
- Hover Effects: Subtle lifts and shadow enhancements
- Fire Animation: Flickering flame for streak icon
- Card Expansion: Smooth width transitions
- Full Coverage: Every element adapts to dark theme
- CSS Variables: Centralized color management
- Persistence: Theme preference saved to localStorage
- Smooth Transition: No jarring color shifts
All data is stored locally in the browser using localStorage:
// Stored Keys
- completedProblems: Array of problem IDs
- theme: 'light' or 'dark'
- currentStreak: Number
- lastActiveDate: Date string- No Backend: All data stays on your device
- No Tracking: No analytics or external requests
- No Cookies: Uses localStorage only
- Offline Capable: Works without internet (except video playback)
- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
- Mobile: < 768px
- Tablet: 768px - 1199px
- Desktop: 1200px+
Potential features for future updates:
- Notes feature for each problem
- Time tracking per problem
- Random problem selector
- Export/Import progress
- Keyboard shortcuts
- Problem search
- Revision reminders
- Custom goals
Contributions, issues, and feature requests are welcome!
This project is open source and available under the MIT License.
Created with ❤️ for developers preparing for coding interviews
- Problem data curated from top coding interview resources
- Video solutions from various YouTube channels
- Company tags based on interview trends
- Inspired by popular DSA learning platforms
For issues or questions, please open an issue in the repository.
Happy Coding! 🚀
Master patterns, not just problems.