DSA Mastery is a high-performance, developer-centric React application engineered to help software engineers systematically prepare for technical interviews. The platform integrates pattern-based tracking, automated spaced-repetition scheduling, Google Drive study material integration, and real-time cloud synchronization to deliver an optimal preparation workflow.
- 🎯 Key Features
- 📁 Directory Structure
- 💻 Tech Stack & Architecture Rationale
- 🛡️ Security Architecture
- 🚀 Getting Started
- 🛠️ Project Scripts
- 📄 License
- Pattern-Based Tracking: Groups algorithmic problems into foundational mental models (e.g., Two Pointers, Sliding Window, DFS/BFS) rather than arbitrary lists, optimizing conceptual retention.
- Automated Spaced-Repetition Scheduler: Implements structured revision intervals (1, 3, 7, 15, and 30 days) based on cognitive science principles, prompting reviews of solved questions to lock in problem-solving intuition.
- GitHub-Style Solve Heatmap: Provides a visual, calendar-based activity matrix mapping daily solve statistics to cultivate consistency and track streaks.
- Rich Interactive Workspace (Notes): Allows developers to document key insights, optimal time/space complexity benchmarks, potential pitfalls, and clean code snippets directly on each problem.
- Google Drive Study Sync:
- Auto-Folder Structuring: Authenticates via Google Identity Services and automatically creates a structured nested directory path
DSA Mastery / [Topic] / [Question or Concept Name]in the user's Drive. - Concept-Level Study Hubs: Supports creating study notes and syncing files for algorithms themselves (e.g., Two Pointers concept) directly from the Roadmap list.
- Custom Native File Explorer: Queries the active Drive folder, displays user files (Docs, Sheets, Slides, PDFs, drawings, and images) with clean type-specific icons, and renders them in-app via an embeddable iframe preview.
- Backdrop-Blurred Upload Overlay: Renders a premium backdrop blur modal (
rgba(10, 10, 15, 0.75)with12pxblur) that handles drag-and-drop or manual file picking, launching background uploads with concurrent queue statuses.
- Auto-Folder Structuring: Authenticates via Google Identity Services and automatically creates a structured nested directory path
- Custom Question Registry: Enables users to extend the default problem set by registering custom interview questions tagged with difficulty, algorithmic topics, target companies, and urgency levels.
- Real-Time Cloud Sync & Offline Support: Combines local Zustand store state persistence with background Firebase Firestore sync, enabling seamless transitions between online and offline states.
A walk-through of the main codebase directory tree:
dsa-sheet/
├── .env # Local environment variables configuration
├── firestore.rules # Security access control rules for Firestore
├── index.html # Single Page Application root markup
├── vite.config.js # Vite build and plugin configurations
├── src/
│ ├── main.jsx # Application entrypoint
│ ├── App.jsx # Core router and component container layout
│ ├── index.css # Global design system tokens and UI styling
│ ├── firebaseClient.js # Initialization of Firebase App, Auth, and Firestore
│ ├── data/ # Static dataset declarations
│ │ ├── patterns.js # Definitions for algorithm patterns
│ │ ├── questions.js # Master list of curated interview questions
│ │ ├── roadmap.js # Structured topic sequence and guide data
│ │ └── topics.js # Mapping of DSA topics
│ ├── services/ # External service integration logic
│ │ └── dbSync.js # Real-time state syncing wrapper between Zustand & Firestore
│ ├── utils/ # Shared helper modules
│ │ ├── googleDrive.js # REST API wrappers for Drive searching, creation, and uploads
│ │ ├── helpers.jsx # App UI helpers, icons, and links mapping
│ │ └── markdown.js # Lightweight markdown-to-HTML parsing engine
│ └── store/ # Global state managers powered by Zustand
│ ├── useGoogleAuthStore.js # Google OAuth2 access token and session lifecycle store
│ ├── useNotesStore.js # State persistence for problem & concept notes
│ ├── useProgressStore.js # State manager for user status, bookmarks, and streaks
│ ├── useRevisionStore.js # Scheduler logic for upcoming/due reviews
│ └── useThemeStore.js # Management of light/dark theme preference
└── public/ # Static assets directory
- React 19 & React Router DOM 7: Utilizes React's latest engine for rendering optimization and declarative route management.
- Zustand 5: Chosen for high-performance, boilerplate-free state management. It handles client-side updates instantly and persists data locally inside
localStoragefor zero-latency startups. - Google Identity Services (GIS) & Google Drive API v3: Handles seamless user authorization and secure resource syncing directly into their personal cloud storage under granular scopes.
- Firebase Authentication: Handles password verification, session tokens, and user sign-ups securely. Sensitive credentials never hit application databases.
- Cloud Firestore: A scalable document database that acts as a secure, real-time persistence layer. Firestore's client SDK allows offline caching and seamless synchronization when internet connectivity changes.
- Employs a Local-First, Cloud-Synced architecture. User interaction updates are applied instantaneously to the local state (Zustand), followed by non-blocking, asynchronous database writes to Firestore.
- Handles data hydration automatically on user authentication, merging local state with cloud-stored values and healing discrepancies (e.g., re-calculating solve histories or current streaks).
The application implements strict document-level security rules in firestore.rules to ensure data privacy:
- Users Collection (
/users/{uid}): Publicly readable to check profile details, but write operations are limited strictly to the authenticated document owner matching the UID. - Username Reservations (
/usernames/{username}): Serves as a unique lookup registry preventing duplicates during sign-ups. Read-write access is restricted to the username owner, and directly modifying entries is forbidden (they must be deleted and recreated). - Workspace Documents (
/user_progress,/user_notes,/user_revisions,/custom_questions): Protected by query-level filters ensuring that users can only read or write documents whereresource.data.uid == request.auth.uid.
Follow these steps to run the project locally for development:
- Node.js (version 18 or higher recommended)
- A Firebase Project (with Email/Password Authentication and Firestore Database enabled)
- A Google Cloud Developer Console project with the Google Drive API enabled and OAuth 2.0 Web Client credentials configured.
-
Clone the repository:
git clone <repository-url> cd "DSA sheet"
-
Install project dependencies:
npm install
-
Configure Environment Variables: Create a
.envfile in the root directory and populate it with your Firebase and Google project credentials:VITE_FIREBASE_API_KEY=your_api_key VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain VITE_FIREBASE_PROJECT_ID=your_project_id VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id VITE_FIREBASE_APP_ID=your_app_id VITE_GOOGLE_CLIENT_ID=your_google_oauth_client_id
-
Launch the Development Server:
npm run dev
Open your browser and navigate to the local URL (usually
http://localhost:5173). -
Build for Production:
npm run build
The production-ready bundle will be outputted to the
distdirectory.
The following npm scripts are available:
npm run dev: Runs the application in development mode with Hot Module Replacement (HMR).npm run build: Compiles and optimizes the React codebase for production deployment.npm run lint: Analyzes code quality using ESLint configured ineslint.config.js.npm run preview: Statically serves the locally built production output for verification.
This project is private and proprietary. All rights reserved.