🚀 TUFDsa - DSA Practice Companion

Your Personal DSA Practice Tracker & Problem Recommendation Engine

📋 Table of Contents

🌟 Overview

TUFDsa is a feature-rich Chrome Extension designed for developers and students who want to systematically improve their Data Structures and Algorithms (DSA) skills.

The Problem It Solves

🎯 Decision Fatigue: No more wondering "which problem should I solve today?"
📊 Scattered Progress: Track all your solved problems across multiple platforms in one place
🔥 Motivation Loss: Streak system keeps you accountable with daily practice goals
🧠 Context Switching: Get AI-powered hints without leaving your coding environment

Who Is This For?

💼 Job Seekers preparing for technical interviews
🎓 Students learning DSA fundamentals
👨‍💻 Developers wanting to stay sharp with daily practice
🏆 Competitive Programmers tracking their progress

✨ Key Features

Feature	Description
🎲 Random Problem Generator	Get a random problem based on difficulty, topics, or company tags
📚 A2Z DSA Sheet Integration	Follow the popular TakeUForward A2Z DSA course systematically
🔥 Streak System	Calendar-based streak tracking with "at-risk" warnings
🔍 Multi-Platform Search	Search problems from LeetCode, GeeksforGeeks, and Code360
🤖 AI Assistant	Ask AI for hints, complexity analysis, and explanations
🌙 New Tab Override	Replace Chrome's new tab with your DSA dashboard
⚡ Quick Access	Open problems with id for quick access across 3000+ problem from LeetCode, GeeksforGeeks, and Code360
🎚️ Advanced Filters	Filter by difficulty, topics, company, and solved status
😈 Torture Mode	Hardcore mode that disables skipping problems
📊 Statistics Dashboard	Track total solved, daily progress, and streak history

📸 Screenshots

New Tab Dashboard

Popup Interface

AI Assistant

Options Page

🛠️ Tech Stack

Core Technologies

Technology	Version	Purpose
React	18.2.x	UI Components & State Management
Vite	7.x	Build Tool & Dev Server
@crxjs/vite-plugin	2.0.0-beta	Chrome Extension Integration
Tailwind CSS	4.x	Utility-First Styling

Key Dependencies

Package	Purpose
`react-markdown`	Render AI responses with Markdown formatting
`axios`	HTTP client (used in scrapers)
`puppeteer`	Web scraping for problem data updates

Development Tools

Tool	Purpose
`prettier`	Code formatting
`gulp` + `gulp-zip`	Extension packaging
`glob`	File pattern matching

🏗️ High Level Architecture

┌──────────────────────────────────────────────────────────────────────────────┐
│                            CHROME BROWSER                                    │
├──────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│   ┌──────────────────────────────────────────────────────────────────────┐   │
│   │                       TUFdsa EXTENSION                               │   │
│   │                                                                      │   │
│   │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  ┌────────────┐   │   │
│   │  │   POPUP     │  │   NEWTAB    │  │   OPTIONS   │  │ SIDEPANEL  │   │   │
│   │  │   popup/    │  │   newtab/   │  │   options/  │  │ sidepanel/ │   │   │
│   │  │             │  │             │  │             │  │            │   │   │
│   │  │  ┌───────┐  │  │  ┌───────┐  │  │  ┌───────┐  │  │ ┌───────┐  │   │   │
│   │  │  │ React │  │  │  │ React │  │  │  │ React │  │  │ │ React │  │   │   │
│   │  │  │  App  │  │  │  │  App  │  │  │  │  App  │  │  │ │  App  │  │   │   │
│   │  │  └───┬───┘  │  │  └───┬───┘  │  │  └───┬───┘  │  │ └───┬───┘  │   │   │
│   │  └──────┼──────┘  └──────┼──────┘  └──────┼──────┘  └─────┼──────┘   │   │
│   │         │                │                │               │          │   │
│   │         └────────────────┴──────┼─────────┴───────────────┘          │   │
│   │                                 │                                    │   │
│   │                                 ▼                                    │   │
│   │  ┌─────────────────────────────────────────────────────────────────┐ │   │
│   │  │                    CHROME STORAGE API                           │ │   │
│   │  │                                                                 │ │   │
│   │  │  ┌──────────────────┐        ┌──────────────────────────────┐   │ │   │
│   │  │  │   sync storage   │        │        local storage         │   │ │   │
│   │  │  │                  │        │                              │   │ │   │
│   │  │  │ • solveHistory   │        │ • (currently unused)         │   │ │   │
│   │  │  │ • userSettings   │        │                              │   │ │   │
│   │  │  │ • currentProblem │        │                              │   │ │   │
│   │  │  │ • savedFilters   │        │                              │   │ │   │
│   │  │  └──────────────────┘        └──────────────────────────────┘   │ │   │
│   │  └─────────────────────────────────────────────────────────────────┘ │   │
│   │                          │                                           │   │
│   │                          │ chrome.storage.onChanged                  │   │
│   │                          ▼                                           │   │
│   │  ┌─────────────────────────────────────────────────────────────────┐ │   │
│   │  │                 SERVICE WORKER (background/)                    │ │   │
│   │  │                                                                 │ │   │
│   │  │  • chrome.runtime.onMessage listener                            │ │   │
│   │  │  • Event-driven lifecycle                                       │ │   │
│   │  │  • Minimal code (offloads to UI contexts)                       │ │   │
│   │  └─────────────────────────────────────────────────────────────────┘ │   │
│   │                                                                      │   │
│   └──────────────────────────────────────────────────────────────────────┘   │
│                                                                              │
│   ┌──────────────────────────────────────────────────────────────────────┐   │
│   │                         WEB PAGE CONTEXT                             │   │
│   │                                                                      │   │
│   │  ┌───────────────────────────────────────────────────────────────┐   │   │
│   │  │                     CONTENT SCRIPTS                           │   │   │
│   │  │                                                               │   │   │
│   │  │  contentScript/index.js      contentScript/askAiHelper.js     │   │   │
│   │  │  • Runs on all HTTP(S)       • Runs on LeetCode/GFG/Code360   │   │   │
│   │  │  • Generic injection         • Extracts user code             │   │   │
│   │  │                                (With custom userscript)       │   │   │
│   │  └───────────────────────────────────────────────────────────────┘   │   │
│   │                                                                      │   │
│   └──────────────────────────────────────────────────────────────────────┘   │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

Key Data Entities

┌──────────────────────────────────────────────────────────────────┐
│                       DATA ENTITIES                              │
├──────────────────────────────────────────────────────────────────┤
│                                                                  │
│  ┌──────────────────────────────────────────────────────────┐    │
│  │  SOLVE HISTORY (Source of Truth)                         │    │
│  │                                                          │    │
│  │  {                                                       │    │
│  │    "randomSolveHistory": {                               │    │
│  │      "[problemId]": 1704067200000  // timestamp          │    │
│  │    },                                                    │    │
│  │    "a2zSolveHistory": {                                  │    │
│  │      "[problemId]": 1704153600000                        │    │
│  │    }                                                     │    │
│  │  }                                                       │    │
│  └──────────────────────────────────────────────────────────┘    │
│                                                                  │
│  ┌──────────────────────────────────────────────────────────┐    │
│  │  USER SETTINGS                                           │    │
│  │                                                          │    │
│  │  {                                                       │    │
│  │    darkMode: true,                                       │    │
│  │    tortureMode: false,                                   │    │
│  │    hyperTortureMode: false,                              │    │
│  │    dailyGoal: 1,                                         │    │
│  │    showDifficulty: true,                                 │    │
│  │    showTopics: true,                                     │    │
│  │    ...                                                   │    │
│  │  }                                                       │    │
│  └──────────────────────────────────────────────────────────┘    │
│                                                                  │
│  ┌──────────────────────────────────────────────────────────┐    │
│  │  CURRENT PROBLEM STATE                                   │    │
│  │                                                          │    │
│  │  {                                                       │    │
│  │    "currentRandomProblem": { ...problemObject },         │    │
│  │    "lastA2zIndex": 42,                                   │    │
│  │    "randomProblemDataSource": "leetcode" | "gfg" | ...   │    │
│  │  }                                                       │    │
│  └──────────────────────────────────────────────────────────┘    │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘

Component Breakdown

Component	File	Purpose
Popup	`src/popup/popup.html`	Quick access toolbar popup
New Tab	`src/newtab/newtab.html`	Dashboard replacing Chrome's new tab
Options	`src/options/options.html`	Settings and data management
Side Panel	`src/sidepanel/sidepanel.html`	Chrome side panel integration
DevTools	`src/devtools/devtools.html`	Developer tools panel
Service Worker	`src/background/index.js`	Dummy not used now
Content Scripts	`src/contentScript/`	DOM interaction on coding platforms

Message Passing Flow

User clicks "Ask AI" with code
         │
         ▼
┌─────────────────┐    chrome.tabs.sendMessage      ┌─────────────────┐
│   Popup/UI      │ ─────────────────────────────▶  │ Content Script  │
│                 │                                 │                 │
│                 │ ◀─────────────────────────────  │ Extracts code   │
└─────────────────┘    { type: "USER_CODE", ... }   └─────────────────┘
         │
         ▼
   Sends to Cohere API
         │
         ▼
   Displays AI Response

🚀 Installation & Setup / Build

Prerequisites

Node.js >= 20.19.0
npm or yarn
Google Chrome (latest recommended)

1. Clone the Repository

git clone https://github.com/JitishxD/TUFDsa.git
cd TUFDsa

2. Install Dependencies

npm install
# or
yarn install

3. Development Mode

Start the development server with hot reload:

npm run dev
# or
yarn dev

Vite starts dev server
CRXJS plugin watches for changes
Extension auto-reloads in Chrome

4. Load Unpacked Extension in Chrome

Open Chrome and navigate to chrome://extensions/
Enable Developer mode (toggle in top-right)
Click Load unpacked
Select the build/ folder from this project

Note: During development, the extension will auto-reload when you make changes. You may need to refresh the extension or reload pages for content script changes.

5. Production Build

npm run build
# or
yarn build

Vite builds optimized bundles
CRXJS generates final manifest.json
Assets are hashed for caching
Output goes to an optimized production build in the build/ directory.

6. Package for Distribution

npm run zip

Runs production build
Gulp zips the build/ folder
Creates TUFDsa-{version}.zip in package/

📁 Folder Structure

TUFDsa/
├── 📄 package.json           # Dependencies and scripts
├── 📄 vite.config.js         # Vite + CRXJS configuration
├── 📄 vitest.config.js       # Vitest config file
├── 📄 jsconfig.json          # TypeScript/JS configuration
│
├── 📂 src/                   # Source code
│   ├── 📄 manifest.js        # Dynamic manifest generation
│   ├── 📄 zip.js             # Gulp-based packaging script
│   │
│   ├── 📂 background/        # Service worker
│   │   └── 📄 index.js       # Message listeners, events
│   │
│   ├── 📂 contentScript/     # Content scripts
│   │   ├── 📄 index.js       # Generic content script
│   │   └── 📄 askAiHelper.js # Code extraction for AI
│   │
│   ├── 📂 popup/             # Popup UI
│   │   ├── 📄 popup.html     # HTML entry point (manifest: src/popup/popup.html)
│   │   ├── 📄 index.jsx      # Entry point
│   │   ├── 📄 PopUpHome.jsx  # Main popup component
│   │   ├── 📄 aiIntegration.js # Cohere AI integration
│   │   ├── 📂 Components/    # Popup components
│   │   └── 📂 Styles/        # Popup styles
│   │
│   ├── 📂 newtab/            # New Tab UI
│   │   ├── 📄 newtab.html    # HTML entry point (manifest: src/newtab/newtab.html)
│   │   ├── 📄 index.jsx      # Entry point
│   │   ├── 📄 NewTab.jsx     # Dashboard component
│   │   ├── 📂 Components/    # Dashboard components
│   │   └── 📂 Styles/        # Dashboard styles
│   │
│   ├── 📂 options/           # Options Page
│   │   ├── 📄 options.html   # HTML entry point (manifest: src/options/options.html)
│   │   ├── 📄 index.jsx      # Entry point
│   │   ├── 📄 Options.jsx    # Settings component
│   │   ├── 📂 Components/    # Options components
│   │   └── 📂 Styles/        # Options styles
│   │
│   ├── 📂 sidepanel/         # Chrome Side Panel
│   │   ├── 📄 sidepanel.html # HTML entry point (manifest: src/sidepanel/sidepanel.html)
│   │   └── 📄 SidePanel.jsx  # Side panel component
│   │
│   ├── 📂 devtools/          # Chrome DevTools Panel
│   │   ├── 📄 devtools.html  # HTML entry point (manifest: src/devtools/devtools.html)
│   │   └── 📄 DevTools.jsx   # DevTools component
│   │
│   ├── 📂 problem-data/      # Problem datasets (JSON)
│   │   ├── 📄 DSAa2zProblems.json
│   │   ├── 📄 leetCodeAllProblemDump.json
│   │   ├── 📄 gfg_problems.json
│   │   └── 📄 code360_problems_indexed.json
│   │
│   ├── 📂 utils/             # Shared utilities
│   │   ├── 📄 statsTracker.js    # Streak & stats logic
│   │   ├── 📄 problemFilters.js  # Filter utilities
│   │   ├── 📄 useRandomProblem.js # Shared hook
│   │   └── 📄 uiHelpers.js       # UI utilities
│   │
│   └── 📂 assets/            # Static assets
│
├── 📂 public/                # Public assets
│   ├── 📂 icons/             # Extension icons
│   └── 📂 img/               # Images (logo, etc.)
│
└── 📂 Scrapper/              # Problem data scrapers
    ├── 📂 leetCodeScrape/    # LeetCode scraping
    ├── 📂 geeksforgeeks/     # GFG scraping
    ├── 📂 code360/           # Code360 scraping
    └── 📂 TUFScrape/         # TakeUForward scraping

📜 NPM / Yarn Scripts

Script	Command	Description
dev	`npm run dev`	Start Vite dev server with HMR
build	`npm run build`	Production build to `build/`
preview	`npm run preview`	Preview production build
fmt	`npm run fmt`	Format code with Prettier
zip	`npm run zip`	Build + create distributable ZIP

🔐 Environment Variables

The extension currently doesn't require environment variables for basic functionality.

Optional Configuration

Variable	Purpose	Where Used
API Keys	Stored in Chrome Storage	Options page / AI feature

Note: For security, API keys (like Cohere API key for AI features) are stored in Chrome's sync storage rather than environment variables.

❓ Common Issues / FAQ

🔴 Extension Not Loading

Problem: "Load unpacked" shows errors

Solution:

Ensure you ran npm run build first
Select the build/ folder, not the project root
Check for manifest syntax errors

🔴 Hot Reload Not Working

Problem: Changes don't reflect in the extension

Solution:

For popup/newtab: Close and reopen the popup/tab
For content scripts: Refresh the target page
For background: Reload the extension from chrome://extensions/

🔴 Content Script Not Injecting

Problem: "Could not reach content script" error

Solution:

Refresh the target page after loading the extension
Check if the URL matches patterns in manifest.js
Verify permissions in manifest

🔴 AI Feature Not Working

Problem: "Permission denied" or API errors

Solution:

Grant the https://api.cohere.ai/* permission when prompted
Verify your API key is correct
Check network connectivity

🔴 Storage Quota Exceeded

Problem: Solve history not saving

Solution:

Clear old data from Options page
Use the "Data Management" tab to export/backup
Consider resetting progress if history is too large

🔴 CORS Errors

Problem: API requests blocked

Solution:

Ensure origin permissions are in manifest
Use background script for cross-origin requests

🤝 Contributing

We welcome contributions! Here's how to get started:

Branching Strategy

Branch	Purpose
`main`	Production-ready code
`develop`	Integration branch
`feature/*`	New features
`fix/*`	Bug fixes
`docs/*`	Documentation updates

Testing

The tests are in src/utils/streakCalculator.test.js and imports the implementation from statsTracker.js.

npm run test

Commit Conventions

Follow Conventional Commits:

feat: add new filter option for company tags
fix: resolve streak calculation bug
docs: update README with new screenshots
refactor: simplify useRandomProblem hook

Code Style

Formatting: Run npm run fmt before committing
Components: Use functional components with hooks
Naming:
- Components: PascalCase
- Utilities: camelCase
- CSS classes: Use Tailwind utilities

Pull Request Process

Fork the repository
Create a feature branch
Make your changes
Run npm run fmt
Submit a PR with a clear description

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgements

TakeUForward for the A2Z DSA sheet
LeetCode, GeeksforGeeks, Code360 for problem data
CRXJS for the amazing Vite plugin
Cohere for AI API

Made with ❤️ for the DSA community

Report Bug · Request Feature

Name		Name	Last commit message	Last commit date
Latest commit History 50 Commits
Scrapper		Scrapper
docs/screenshots		docs/screenshots
public		public
src		src
.gitattributes		.gitattributes
.gitignore		.gitignore
.prettierrc		.prettierrc
LICENSE		LICENSE
README.md		README.md
STREAK_SYSTEM.md		STREAK_SYSTEM.md
jsconfig.json		jsconfig.json
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js
vitest.config.js		vitest.config.js

License

JitishxD/TUFdsa

Folders and files

Latest commit

History

Repository files navigation

🚀 TUFDsa - DSA Practice Companion

📋 Table of Contents

🌟 Overview

The Problem It Solves

Who Is This For?

✨ Key Features

📸 Screenshots

New Tab Dashboard

Popup Interface

AI Assistant

Options Page

🛠️ Tech Stack

Core Technologies

Key Dependencies

Development Tools

🏗️ High Level Architecture

Key Data Entities

Component Breakdown

Message Passing Flow

🚀 Installation & Setup / Build

Prerequisites

1. Clone the Repository

2. Install Dependencies

3. Development Mode

4. Load Unpacked Extension in Chrome

5. Production Build

6. Package for Distribution

📁 Folder Structure

📜 NPM / Yarn Scripts

🔐 Environment Variables

Optional Configuration

❓ Common Issues / FAQ

🔴 Extension Not Loading

🔴 Hot Reload Not Working

🔴 Content Script Not Injecting

🔴 AI Feature Not Working

🔴 Storage Quota Exceeded

🔴 CORS Errors

🤝 Contributing

Branching Strategy

Testing

Commit Conventions

Code Style

Pull Request Process

📄 License

🙏 Acknowledgements

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages