CodeClip is a lightweight, fully client-side web app that lets developers store, solve, run, and share coding challenges directly in the browser. Built with vanilla HTML, CSS, and JavaScript, it is ideal for first-time open-source contributors and is being developed under GirlScript Summer of Code (GSSoC).
| Category | Feature | Status |
|---|---|---|
| Core Vault | Challenge repository with tags, difficulty, and search | 🛠 Planned |
| Playback | In-browser code runner (JS sandbox) with console output | 🛠 Planned |
| Editor | CodeMirror-based editor with themes, linting, and autosave | 🛠 Planned |
| Sharing | Public solution links, up-votes, and comments | 🛠 Planned |
| AI Assist | Challenge recommendations based on user history | 🛠 Planned |
| Accounts | Local profile, progress tracking, badges | 🛠 Planned |
| UI / UX | Dark-light theme switcher, mobile-first layout | 🛠 Planned |
| Accessibility | WCAG-compliant color palette & keyboard nav | 🛠 Planned |
| DevOps | GitHub Pages deploy, CI linting, unit tests | 🛠 Planned |
Client (Browser) ────────────────────────────────────────────┐ │ │ │ 1. UI Layer (HTML + CSS) │ │ • index.html – Landing / dashboard │ │ • pages/ challenges.html, editor.html, … │ │ • styles/ main.css, components.css, themes.css │ │ │ │ 2. Logic Layer (ES6 Modules) │ │ • app.js – App bootstrap & router │ │ • storage.js – LocalStorage API wrapper │ │ • challenges.js – Challenge CRUD & filters │ │ • editor.js – CodeMirror integration │ │ • ai.js – Recommendation engine (future) │ │ • utils.js – Helpers │ │ │ │ 3. Persistence Layer │ │ • LocalStorage (JSON) │ │ • IndexedDB (future large data) │ │ │ └───────────────────────────────────────────────────────────── Offline-first: All data lives in the browser; no backend required. Optional cloud sync can be added later via GitHub OAuth + Gists. codeclip/ ├─ index.html ├─ pages/ │ ├─ challenges.html │ ├─ editor.html │ └─ profile.html ├─ styles/ │ ├─ variables.css │ ├─ main.css │ ├─ components.css │ └─ themes.css ├─ scripts/ │ ├─ app.js │ ├─ storage.js │ ├─ challenges.js │ ├─ editor.js │ ├─ ai.js │ └─ utils.js ├─ assets/ │ └─ logo.svg ├─ docs/ │ └─ architecture.png └─ README.md ← you are here -
Clone
git clone https://github.com/opensource-society/CodeClip.git cd CodeClip -
Run Locally
Any static server works; with VS Code:- Install the Live Server extension
- Right-click
index.html→ “Open with Live Server”
-
Contribute
- Pick an issue labelled Level 1, Level 2, or Level 3.
- Create a feature branch:
git checkout -b feat/ - Follow the style guide; submit a pull request; respond to reviews.
- Landing & Vault MVP – basic challenge listing 🛠
- Code Editor Integration – CodeMirror + autosave 🛠
- JS Runtime – iframe sandbox, execution timers 🛠
- Profile & Stats – badges, streak calendar 🛠
- AI Recommendations – local ML or hosted API 🛠
- PWA Support – installable, offline cache 🛠
- Unit & E2E Tests – Vitest + Playwright 🛠
Issues are filed chronologically in the /docs/issues.docx for reference.
| Channel | Purpose |
|---|---|
| GitHub Issues | Bug reports, feature requests |
| GitHub Discussions | Q&A, ideas, polls |
| Discord | Real-time chat, pair programming |
| GSSoC Mentors | Onboarding & code reviews |
CodeClip is released under the MIT License – free for personal & commercial use with attribution.