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.