DataStructor: LeetCode Companion Extension

DataStructor is a modern Chrome extension designed to supercharge your LeetCode problem-solving experience. It provides AI-driven hints, code reviews, and motivational feedback directly on LeetCode problem pages, helping you learn data structures and algorithms more effectively.

---

🚀 Features

• AI-Powered Chatbot: Get instant, context-aware help and hints for any LeetCode problem using Gemini 2.5 Pro.
• Personalized Experience: Greets you by your LeetCode username and remembers your chat history per problem.
• Predefined Prompts: One-click access to common queries like "Explain problem", "Time & space complexity", "Review my code", and more.
• Code Review & Hints: Receive step-by-step feedback, code suggestions, and motivational tips tailored to your code and the problem.
• Top Solution Extraction: Automatically includes the top community solution as context for the AI.
• Modern UI: Beautiful, responsive chatbox with Markdown support, code highlighting, and smooth animations.
• Persistent Storage: Chat history is saved per problem using IndexedDB.
• Easy Setup: Just add your API key and get started—no complex configuration required.

---

🛠️ Tech Stack

• Frontend: React (TypeScript), Tailwind CSS, shadcn/ui (Radix UI)
• Build Tool: Vite
• AI Integration: Gemini 2.5 Pro (via API key)
• Chrome Extension APIs: For storage, messaging, and content scripts
• Markdown Rendering: react-markdown + rehype-raw
• Syntax Highlighting: prism-react-renderer
• State Management: React hooks, custom hooks for Chrome storage and IndexedDB

---

📦 Installation & Setup

1. Clone the repository:

   git clone https://github.com/yourusername/leetcode-companion-extension.git
   cd leetcode-companion-extension

2. Install dependencies:

   npm install
   # or
   pnpm install

3. Build the extension:

   npm run build

4. Load the extension in Chrome:

   • Go to chrome://extensions/
   • Enable "Developer mode"
   • Click "Load unpacked" and select the dist/ folder

5. Get your API key:

   • Obtain a Gemini 2.5 Pro API key (see provider documentation)

6. Configure the extension:

   • Click the extension icon in Chrome
   • Enter your API key and click Get Started
   • The chatbot will open automatically on any LeetCode problem page

---

💡 Usage

• On any LeetCode problem page:

  • Click the floating logo to open the chatbox
  • Use predefined prompt buttons or type your own question
  • Get instant feedback, hints, and code reviews
  • Your chat history is saved per problem for future reference

• Settings:

  • Access settings via the chatbox dropdown menu
  • Change your API key or model (if more are added in the future)
  • Clear chat history for the current problem

---

🤝 Contributing

Contributions are welcome! To contribute:

1. Fork the repository
2. Create a new branch (git checkout -b feature/your-feature)
3. Make your changes
4. Commit and push (git commit -m 'Add new feature' && git push origin feature/your-feature)
5. Open a pull request

Please follow the existing code style and add tests where appropriate.

---

📝 License

This project is licensed under the MIT License.

---

🙏 Credits

• LeetCode for the platform
• shadcn/ui and Radix UI for UI components
• Vite for the build tool
• prism-react-renderer for code highlighting
• react-markdown for Markdown rendering
• Gemini 2.5 Pro for AI capabilities

---

📬 Contact

For questions, suggestions, or support, open an issue or contact the maintainer at [your-email@example.com].