CodeHub
Supercharge your competitive programming journey with automatic GitHub synchronization.
Website development
The marketing website uses Astro static generation, React islands, shadcn/ui, Tailwind CSS, and GSAP. The source is in src/pages/index.astro; the browser extension source remains in its own project.
npm ci
npm run dev
Open http://127.0.0.1:4321/codehub-extension/. Use npm run check for type checking, npm run build to generate dist/, and npm run preview to view the production build. The old root index.html has been replaced by Astro's generated HTML.
Original screenshots stay in assets/ for the README. scripts/prepare-assets.mjs copies public files, generates optimized WebP product crops, and vendors provider logos into public/. Generated assets, fonts, and JavaScript are served locally; provider logos make no third-party requests. The original logo and privacy policy are preserved.
GitHub Pages builds and publishes dist/ after pushes to main. The canonical URL, repository base path, Google verification, existing section anchors, and legal/documentation URLs are preserved. The redesign branch does not publish automatically.
See the design rationale. After installing Playwright Chromium with npx playwright install chromium, use npm test for browser, responsive, accessibility, clipboard, and static-HTML checks.
📑 Table of Contents
💡 What is CodeHub?
CodeHub is a modern, lightweight, and privacy-focused browser extension designed for developers and competitive programmers.
Never lose track of your accepted solutions again. Whenever you solve a problem on any supported platform, CodeHub instantly captures your code, parses problem details (difficulty, tags, problem statements), and automatically commits everything to your personal GitHub repository — cleanly structured and beautifully documented.
Solve Problem ➔ Pass Test Cases ➔ CodeHub Intercepts ➔ Auto-Committed to GitHub!
🌟 Supported Platforms
✨ Key Features
- ⚡ Automatic Submission Sync: New accepted submissions across all ten supported platforms are saved without changing the platform's normal submit flow.
- 🟠 Code360 (Coding Ninjas) Integration: Sync accepted solutions from
naukri.com/code360/problems/ and Coding Ninjas problem pages with problem descriptions, tags, and statistics saved under codingninjas/.
- 🟣 HackerRank Fullscreen Support: Fullscreen challenge URLs can hide difficulty metadata, so CodeHub falls back to the canonical
/challenges/<slug>/problem page and records the correct Easy/Medium/Hard rating.
- 🛡️ Public-Challenge Boundary: HackerRank Practice/Prepare and anonymously public contest challenges are supported; hiring assessments, tests, and interview pages are excluded.
- 🏆 Automated Codeforces Background Tracker: Periodically tracks your solved contest and practice problems on Codeforces via your handle.
- 🧩 AtCoder, InterviewBit & AlgoExpert: AtCoder sync waits for the matching final
AC verdict; InterviewBit tracks only the matching successful Submit; AlgoExpert requires every required test to pass on Submit Code. These integrations save new submissions only and do not backfill history. AtCoder has no difficulty rating; AlgoExpert's Very Hard label is grouped under Hard in aggregate counts.
- 📊 Unified Cross-Platform Analytics Hero:
- Global Solved Counter: Real-time counter aggregating total solved problems across all platforms.
- Difficulty Breakdown: Standardized metrics for Easy, Medium, and Hard.
- Platform Activity Share: Interactive visual distribution bar highlighting your platform engagement across all ten platforms.
- 📂 Auto-Generated Problem Documentation: Each committed solution includes a problem
README.md with the available statement, tags, complexity, and difficulty details.
- 🎯 1-Click Platform Navigation: Jump directly to platform subdirectories (
/leetcode, /geeksforgeeks, /codeforces, /codingninjas, etc.) in your repository straight from the extension popup.
- 🔄 On-Demand GitHub Re-Sync: Synchronize local statistics with your repository's
stats.json anytime with a single click.
- 🌓 Sleek Light & Dark Themes: Modern, high-contrast, accessible UI tailored for day or night coding sessions.
🔄 How It Works
flowchart LR
A[🧑💻 Solve Problem] --> B{Accepted?}
B -- Yes --> C[CodeHub Extension]
C --> D[Extract Problem Meta & Solution]
D --> E[Generate README.md & Code File]
E --> F[Direct GitHub API Push]
F --> G[📁 Your GitHub Repository]
B -- No --> H[Keep Coding!]
📁 Repository Structure
CodeHub organizes your repository systematically so you can easily review, search, and showcase your solutions:
your-solutions-repo/
├── stats.json # Aggregated stats tracked across platforms
├── leetcode/
│ └── 0001-two-sum/
│ ├── README.md # Problem description, tags & complexity
│ └── Solution.cpp # Your accepted code
├── geeksforgeeks/
│ └── Subarray-with-given-sum/
│ ├── README.md
│ └── solution.java
├── codeforces/
│ └── 4A-Watermelon/
│ ├── README.md
│ └── solution.py
├── codechef/
│ └── CHEFSTR1/
│ ├── README.md
│ └── solution.cpp
├── neetcode/
└── valid-anagram/
├── README.md
└── solution.py
├── codingninjas/
└── two-sum/
├── README.md
└── solution.cpp
├── atcoder/
└── <contest-id>/
└── <task-id>/
├── README.md
└── solution.cpp
├── interviewbit/
└── <problem-slug>/
├── README.md
└── solution.cpp
├── algoexpert/
└── <question-slug>/
├── README.md
└── solution.py
└── hackerrank/
├── cpp-hello-world/
│ ├── README.md
│ └── solution.cpp
└── stats.json
🚀 Getting Started
Getting started with CodeHub takes less than a minute!
Step 1: Install the Extension
Install CodeHub directly from the Chrome Web Store.
Step 2: Authenticate with GitHub
- Click the CodeHub icon in your browser toolbar.
- Click "Authenticate with GitHub" to launch the secure device authorization flow.
- Enter the one-time code on GitHub to authorize CodeHub.
Step 3: Configure Your Repository
- Select an existing repository or create a new one (e.g.,
competitive-programming-solutions).
- (Optional) Add your Codeforces handle to activate background sync for Codeforces submissions.
Step 4: Solve & Auto-Sync
Solve a problem on any of the ten supported platforms. Once a new submission is accepted, CodeHub saves the solution and available problem details to your GitHub repository. CodeHub does not backfill historical submissions for AtCoder, InterviewBit, or AlgoExpert.
For HackerRank, submit from the normal challenge or fullscreen URL. CodeHub reads the active editor, writes the solution and README, and obtains missing difficulty metadata from the canonical non-fullscreen problem URL. Temporary metadata or GitHub failures are retried; previously stored Unknown HackerRank difficulty values can be repaired on a later accepted submission.
For Code360 (Coding Ninjas), solve problems on supported Code360 (naukri.com) or Coding Ninjas problem pages. CodeHub observes problem submissions, checks final verdicts via same-origin platform API requests using your existing login session, and uploads solutions, READMEs, and statistics under codingninjas/.
For AtCoder, CodeHub follows a new submission across supported task and submission pages and saves it only after the matching task, account, and submission receive a final AC verdict. Files go under atcoder/<contest-id>/<task-id>/; AtCoder difficulty is not available.
For InterviewBit, CodeHub tracks the actual Submit evaluation on supported coding-problem pages. Run, custom tests, quizzes, assessments, and stale results are excluded. For AlgoExpert, only a matching Submit Code result with all required tests passed is saved; Run Code, partial results, and manual completion indicators are excluded. Refresh a problem tab after updating the extension so it can observe submissions from the start of the page session.
📸 Screenshots & UI Preview
🔒 Privacy & Security
We believe your code and credentials belong only to you:
- 🛡️ No Backend Servers: CodeHub does not store or process your code on any third-party servers.
- 🔑 Secure Local Storage: GitHub authentication tokens and configurations are stored solely in your browser's isolated
chrome.storage.local.
- 🌐 Direct API Communication: Extension sync communicates directly via HTTPS with GitHub and the supported coding platforms, including Codeforces' public API. Platform session credentials remain in the browser; they are not uploaded to GitHub.
- 📈 Website Traffic Measurement: The marketing site uses Google Analytics 4 separately from the extension. See the Privacy Policy for details.
- 🧹 Total Control: You can unlink your repository, reset cached stats, or uninstall the extension at any time to immediately purge all local data.
For full details, please refer to our Privacy Policy.
📬 Support & Feedback
If you encounter any issues, have feedback, or want to suggest improvements:
