LeetVault Pro — Enterprise SaaS LeetCode Solution Organizer

LeetVault Pro is a production-grade personal knowledge base, revision scheduler, and developer productivity platform designed to help software engineers save, catalog, analyze, and master their LeetCode solutions. It is designed to look like a premium SaaS dashboard (blending Notion, GitHub, and VS Code) and is fully optimized for top-tier recruiter portfolios.

---

Key Features

1. Monaco Editor Workbench: VS-Code matching coding workspace equipped with autocomplete, syntax highlighting, and fullscreen tab selectors.
2. Git-like Solution Versioning: Catalog solution revisions (Brute Force $\rightarrow$ Better $\rightarrow$ Optimal DP) and review differences using a commit slider.
3. SuperMemo Spaced Repetition (SRS): Smart spaced repetition scheduler (Again $\rightarrow$ Hard $\rightarrow$ Good $\rightarrow$ Easy) that calculates next due dates based on recall quality.
4. LeetCode Sync & Auto-Fetch:
   • URL Auto-Fetch: Paste a problem link (e.g., two-sum), and the server action auto-fills numbers, titles, difficulty levels, and topic tags.
   • Profile Sync: Connects to public API endpoints to sync solves statistics, streaks, and global rankings in real-time.
5. Framer Motion & Recharts Dashboards: Sleek glassmorphic card grids, GitHub-style coding activity heatmaps, and Recharts topic radar coverage charts.
6. Scalable Firestore Joins: Utilizes a separate join schema (collectionItems/) rather than storing arrays inside collection documents to completely bypass the 1MB Firestore size limit.
7. PWA Installer & Offline Support: Standalone desktop/mobile installer configurations with offline caching.
8. Simulated AI FAANG Interviewer: Compiles Technical interview diagnostic boards (Space/Time audits, alternative architectures, and Google follow-up questions) with dual-mode LLM/mock support.

---

Tech Stack

• Frontend: Next.js 15+ App Router, React 19, TypeScript, Tailwind CSS v4, Zustand, Recharts, Framer Motion, Sonner, React Hook Form, Zod, TanStack Query.
• Backend: Firebase Auth, Cloud Firestore (Compound indexes detailed in firestore.indexes.json), Cloud Storage.
• Code Sandbox: Monaco Editor (@monaco-editor/react).
• Visual diagrams: Mermaid (mermaid.js).

---

Project Structure

src/
├── actions/             # Next.js 15 Server Actions ("use server")
│   ├── ai-actions.ts        # Dynamic interview boards & mock insights
│   ├── collection-actions.ts # Custom folders & checklist toggle operations
│   ├── leetcode-actions.ts  # URL auto-fetch & Profile Sync routines
│   ├── revision-actions.ts  # SuperMemo Spaced repetition (SRS) timeline calcs
│   └── solution-actions.ts  # Problem CRUD & Git version commits
├── app/                 # Next.js App Router Pages & Layouts
│   ├── (auth)/              # Validation portals (Login, Register, Recovery)
│   ├── (dashboard)/         # Protected views (Dashboard, Problems, SRS, Tracks, Stats)
│   ├── globals.css          # Tailwind CSS v4 variables & custom glassmorphisms
│   └── layout.tsx           # Global Providers Wrapper shell
├── components/          # Reusable UI widgets
│   ├── CommandPalette.tsx   # Ctrl+K searching & global theme switcher
│   └── MonacoEditor.tsx     # Client-side VS Code playground wrapper
├── lib/                 # Core Third-Party Configs
│   └── firebase.ts          # Auth & Firestore connection detectors
├── providers/           # Shared Context Providers
│   ├── AuthProvider.tsx     # Dual-mode (Firebase/LocalStorage) Session tracker
│   ├── QueryProvider.tsx    # TanStack request cache mapping
│   ├── SonnerProvider.tsx   # Alert alert overlays
│   └── ThemeProvider.tsx    # Responsive Theme toggles (Dark, Light, System)
├── store/               # Zustand Global State
│   ├── useVaultStore.ts     # In-memory Local Database & filters
│   └── useOfflineStore.ts   # Persisted Offline synchronization buffers
└── types/               # Rigid TypeScript Declarations
    ├── collection.ts        # Folder & collectionItems join schemas
    ├── revision.ts          # Revision log timelines
    ├── solution.ts          # Problem catalog & git history interfaces
    └── user.ts              # Streak stats & settings profile schemas

---

Database Design & Scalability

We define strict collection formats to support thousands of active solutions:

solutions/ (Problems)

interface SolutionEntry {
  id: string;
  userId: string;
  problemNumber: number;
  problemTitle: string;
  leetcodeUrl: string;
  difficulty: 'Easy' | 'Medium' | 'Hard';
  programmingLanguage: string;
  solutionCode: string;
  timeComplexity: string;
  spaceComplexity: string;
  explanation: string;
  notes: string;
  mistakesMade: string;
  topicTags: string[];
  companyTags: string[];
  revisionStatus: 'Need Revision' | 'Learning' | 'Revised' | 'Mastered';
  favoriteStatus: boolean;
  archived: boolean;
  createdAt: number;
  updatedAt: number;
}

solutions/{solutionId}/versions/ (Versions subcollection)

interface SolutionVersion {
  id: string;
  userId: string;
  solutionId: string;
  versionTitle: string;
  code: string;
  timeComplexity: string;
  spaceComplexity: string;
  explanation: string;
  createdAt: number;
}

collectionItems/ (Collections join references)

interface CollectionItem {
  id: string; // generated as collectionId_solutionId
  collectionId: string;
  solutionId: string;
  userId: string;
  createdAt: number;
}

---

Local Sandbox Fallback (Instant Test-Drive)

If no Firebase environment keys are declared in .env.local, the application automatically executes in fallback mode. All page operations (Dashboard widgets, Monaco versioning commits, curating tracks, Spaced-repetition reviews, and stats radar) run on an in-memory client-side database backed by localStorage persistence.

This enables recruiters to open the portal and interact with 100% of the UI immediately without having to register databases first.

---

Vercel Deployment Manual

1. Install Vercel CLI:

   npm install -g vercel

2. Configure Database Indexes: Firestore requires indexes to run compound filtering queries. Apply the schema index defined in firestore.indexes.json inside your Firebase Console, or deploy via Firebase CLI:

   firebase deploy --only firestore:indexes

3. Deploy to Vercel: Run the vercel login and setup routine in the project root:

   vercel

   Follow the CLI wizard to link the workspace.

4. Register Variables: Open Vercel Dashboard $\rightarrow$ Settings $\rightarrow$ Environment Variables, and copy all credentials listed in .env.example:

   • NEXT_PUBLIC_FIREBASE_API_KEY
   • NEXT_PUBLIC_FIREBASE_PROJECT_ID
   • GEMINI_API_KEY

5. Production Build:

   vercel --prod