Open the app · What is this? · Pick an issue · Contribute · FAQ
| Question | Short answer |
|---|---|
| What is it? | A free website that keeps track of your coding journey: what you are learning, how much you study, what you are building and what you want to achieve. |
| Who is it for? | Students and anyone learning to code on their own. |
| What does it cost? | Nothing. No sign-up, no account, nothing to install. |
| Where is my data? | Only in your own browser, on your own computer. We never see it. |
| How finished is it? | Version 0.1.0. It works, but it is young. There are open issues if you want to help. |
| Who makes it? | Let's Cook, an open-source tech community. |
When you learn to code, your progress ends up everywhere:
- notes in one app, tutorials in your bookmarks,
- projects on GitHub, goals only in your head,
- and no record of how much you actually studied.
So you cannot easily answer simple questions like:
How many hours did I study this week?
Am I actually getting better at Python?
Which of my projects is stuck?
Did I miss the deadline I set myself?
When you cannot see your progress, it feels like you are not making any. That is when most people lose motivation and quit.
CodeOrbit is one page where you write down what you learn, and it turns that into numbers and pictures you understand at a glance.
It uses a small space theme: on Home, each skill you add is a planet in your orbit, and it grows as you get better. The words stay simple:
| Page | What it is | Example |
|---|---|---|
| Home | This week at a glance and what is coming up | "6.5 of 10 hours studied" |
| Skills | What you are learning | "Python, 60%" |
| Study sessions | Each time you studied | "Studied React hooks, 1h 30m" |
| Projects | Things you are building | "Portfolio website, 70% done" |
| Goals | What you want to reach, with a due date | "Finish the Docker course by 30 Nov" |
| Progress | Charts, your progress score and badges | "7 days in a row" |
| Home shows the hours you studied in the last 7 days against your weekly goal, your skills as planets that grow with your progress, hours for each day, and what is coming up. Add 30 minutes with one tap. On Sundays and Mondays, look back at the week that just ended. Once you have a few study sessions, Home reminds you to download a backup if you never have, or not for 30 days. | Add skills in 9 categories (Web Development, AI, DevOps, Data Science…). Set a level from Beginner to Expert and a status (Not started, Learning, Practising, Finished), and move progress up or down by 10% with one click. |
| Write down what you studied, for how long, and how (coding, reading, practice problems, project work, research, tutorial). Your "days in a row" count updates by itself. | Keep each project's status (Planning, In progress, Paused, Finished), how far along it is, the tools you use, its GitHub link and live link in one place. |
| Give goals a due date and a priority (Critical, High, Medium, Low). CodeOrbit shows how many days are left and marks a goal as late when the date has passed. | 10 badges to earn as you go: your first skill, 3 days in a row, 7 days in a row, 100 hours of study, and more. |
| 5 charts (this week Monday to Sunday, the last 30 days, skills by category, projects by status, hours by type of study) plus short notes, like your most studied skill and your best day of the week. | Daily and weekly study goals, and a sound when you earn a badge (on or off). Search everything with Ctrl + K. Back up and restore your data as a file. Install it on your phone or computer; it works offline. |
The Progress page shows one number for your last 7 days. It is made of four simple parts (the same names the app uses):
| Part | Points | How you earn them |
|---|---|---|
| Studying often | 30 | How many of the last 7 days you studied on |
| Weekly goal | 30 | Hours in the last 7 days compared with your weekly goal |
| Projects | 20 | Average progress of your projects |
| Skills | 20 | Average progress of your skills |
With nothing saved yet, the score is 0. If you have no projects (or no skills) yet, that part gives 10 of its 20 points once you have added study time, so people who do not track projects are not punished. In the app, click "How is this worked out?" next to the score to see exactly how yours was calculated.
There is no server and no database. CodeOrbit is a single web page. Everything you type is saved in your browser's built-in storage (called localStorage), on your own computer.
- ✅ Private: your data is never sent anywhere. There is no login and no analytics.
- ✅ Fast: nothing to wait for; it all happens on your computer.
- ✅ Works offline: once you have opened it, it opens without internet too, and you can install it like an app.
⚠️ One browser only: data on your laptop does not appear on your phone.
Warning
If you clear your browser's data, your CodeOrbit data is deleted too. Make a backup from time to time: Settings → Your data → Download backup (Home reminds you). You can load it again with Restore from backup.
- Open letscook-organization.github.io/CodeOrbit.
- It starts empty. That is on purpose: it is your data.
- Want to look around first? Press Try it with sample data first on the first screen (or later: Settings → Your data → Load sample data). Settings → Your data → Delete all my data empties it again.
You need Git and a browser. No npm install, no build step.
git clone https://github.com/LetsCook-Organization/CodeOrbit.git
cd CodeOrbit
python -m http.server 3000Then open http://localhost:3000. (On macOS and Linux you may need python3 instead of python.)
Note
Double-clicking index.html will not work. The code is split into JavaScript modules, and browsers only load modules from a web server. Any small server works: the Python line above, npx serve ., or the Live Server extension in VS Code (right-click index.html → Open with Live Server).
No framework. Just plain HTML, CSS and JavaScript, so you can read every line without learning React or a build tool first.
CodeOrbit/
├── index.html ← the only page. All 8 screens live here; one is shown at a time.
│ (6 in the top bar; Badges opens from Progress, Settings from your profile picture)
├── sw.js, manifest.webmanifest ← lets CodeOrbit be installed and work offline
├── assets/
│ ├── css/ ← how it looks (colours, layout, animations, mobile)
│ ├── fonts/ ← Inter and JetBrains Mono, served from here (no font website)
│ ├── images/ ← Let's Cook mark and app icons
│ └── js/
│ ├── app.js ← START HERE. Starts the app and connects everything.
│ ├── storage.js ← the memory. The ONLY file that reads and writes your data.
│ ├── utils.js ← small helpers: dates, days in a row, the score, safe text, labels
│ ├── navigation.js ← switches between screens (#skills, #goals, …)
│ ├── components.js ← pop-ups, messages, the Ctrl+K search
│ ├── icons.js ← small line icons
│ ├── recap.js ← "Your week in review"
│ ├── charts.js ← draws the charts (using Chart.js)
│ └── one file per screen. Some file names are older than the screen names:
│ dashboard.js = Home projects.js = Projects
│ skills.js = Skills goals.js = Goals
│ progress.js = Study sessions analytics.js = Progress
│ achievements.js = Badges settings.js = Settings
├── tests/ ← automatic tests (about 90 of them)
├── scripts/test.mjs ← runs the tests in 4 timezones
├── docs/ ← deeper documentation (see below)
└── CHANGELOG.md ← what changed in each version
Almost everything in the app follows the same loop:
You click "Save" → the screen's file checks the form → storage.js saves it
↑ │
└──── the screen redraws itself ← "data changed!" signal ┘
If you understand this loop, you understand the app.
| Read this | To learn |
|---|---|
docs/FLOW.md |
Exactly what runs first, and which function calls which |
docs/DECISIONS.md |
Why things are built this way, and what we gave up for it |
docs/ARCHITECTURE.md |
The data format and overall design |
CHANGELOG.md |
What changed in each version |
| Used for | |
|---|---|
| HTML, CSS, JavaScript | The whole app, using built-in JavaScript modules |
| Chart.js 4.4.7 | The charts |
| Lucide 1.70.0 | The icons |
| Inter and JetBrains Mono | The fonts (free, SIL Open Font License), served from this repository |
| localStorage | Saving your data in your browser |
A service worker (sw.js) |
Opening without internet, and installing as an app |
| GitHub Pages | Hosting the live site |
| ESLint, Prettier, Node's test runner | Checking code quality (for contributors only; the app does not need them) |
An issue is a to-do item for the project. Every CodeOrbit issue tells you what is wrong, which files to change, and when it counts as done, so you never have to guess.
| # | What to do | Area |
|---|---|---|
| #8 | "Days left" on goals and projects can be one day off, depending on your timezone and the time of day | bug · dates |
| #10 | Restoring a backup turns a 0-minute session into 30 minutes | bug · data |
| #11 | Add tests for the date and duration helpers | tests |
| #12 | Add real screenshots of the app to this README | docs |
| # | What to do | Area |
|---|---|---|
| #14 | Keep keyboard focus inside pop-ups, and return it when they close | accessibility |
| #15 | Test every screen using only a keyboard and a screen reader, and report what breaks | accessibility |
| #16 | Add browser tests that click through the app automatically | tests |
| #17 | Upgrade old saved data safely when the data format changes | data |
| #19 | Export a progress report as Markdown and CSV | feature |
| # | What to do | Area |
|---|---|---|
| #20 | Import your real coding activity from GitHub | feature |
Tip
Already done: the first-visit screen (#13) and backup reminders (#18). The always-up-to-date list is on the Issues page. Filter by good first issue or help wanted.
Never contributed to open source before? This is a good place to start.
- Pick an issue from the list above and comment "I'd like to work on this." Wait until a maintainer assigns it to you.
- Fork the repository (the Fork button, top-right on GitHub). This makes your own copy.
- Download your copy and make a branch:
git clone https://github.com/YOUR-USERNAME/CodeOrbit.git cd CodeOrbit git checkout -b fix/issue-8-deadlines - Make your change. Run the app (see Try it) and check it works in the browser.
- Run the checks (optional, needs Node.js 20.4+; they also run automatically on GitHub):
npm install npm run check
- Save and upload your work:
git add . git commit -m "fix: show the right day for deadlines in every timezone" git push origin fix/issue-8-deadlines
- Open a Pull Request on GitHub and fill in the short checklist. Write
Fixes #8so the issue closes automatically when it is merged.
A few simple rules
- One
good first issueper person. They are for newcomers; after your first, move on tohelp wantedones. - If you get stuck or cannot continue, say so in the issue. No problem at all. Issues with no activity for 14 days may be given to someone else.
- Be kind. Everyone here is learning. See our Code of Conduct.
The full guide is in CONTRIBUTING.md.
Every change, from anyone, is checked automatically before it can go live:
| Check | What it catches |
|---|---|
| ESLint | Code mistakes, like a variable that is used but never defined |
| Prettier | Messy formatting, so all code looks the same |
| About 90 unit tests | Wrong answers in dates, days in a row, the score, the backup reminder, saving and restoring, safe text and links |
| …in 4 timezones | India, UTC, US West and UTC+14. Date bugs hide in one timezone and show in another: before these tests, the weekly chart put every session one day early for users in India. |
A check of sw.js |
Every file the app needs is in the offline list |
The live site updates only when all checks pass, and the main branch is protected, so nobody can merge a pull request with a red ❌.
✅ Done in v0.1.0: Home, skills, study sessions, projects, goals, 10 badges, 5 charts, the 0–100 progress score, search, backup and restore, automatic checks and tests.
✅ Done since (coming in the next version, see CHANGELOG): a calmer new design, a first-visit screen (#13), one-tap "+30 min", "Your week in review", backup reminders (#18), working offline and installing as an app.
🔧 Next: fix the open bugs (#8, #10), keyboard and screen-reader support (#14, #15), browser tests (#16), safe data upgrades (#17).
🌌 Later: Markdown/CSV reports (#19), importing real activity from GitHub (#20), a focus timer.
Is it really free?
Yes. CodeOrbit is open source under the MIT license. There is no paid version.
Can you see my data?
No. There is no server. Your data stays in your own browser and is never sent to us or anyone else.
I cleared my browser and my data is gone. Can I get it back?
Only if you downloaded a backup (Settings → Your data → Download backup). Then use Restore from backup to load it. Without a backup, the data is gone, because it only ever existed in that browser.
Can I use it on my phone?
Yes, the layout works on phones, and you can install it on your home screen. But your phone and your laptop each keep their own separate data. To move it, download a backup on one and restore it on the other.
Why is it version 0.1.0 and not 1.0?
Because it is still early. Below 1.0, features and the way data is saved may still change. Read the reasoning in DECISIONS.md (entry D-013).
I found a bug or have an idea.
Open an issue and pick the bug report or feature request form. For a security problem, please do not open a public issue; follow SECURITY.md instead.
I have never used Git. Can I still help?
Yes. Start with issue #12 (screenshots) or #15 (testing with a keyboard), which need very little code. Follow the steps in section 08, and ask in the issue if anything is unclear.
Let's Cook — The Foundry is a national tech community. CodeOrbit is one of its open-source projects: built in public so that learners can practise real teamwork with Git, GitHub, code review and shipping.
Our motto is Latin: Codere, Aedificare, Vincere. It means Code. Build. Win.
CodeOrbit is free and open source under the MIT License. You can use, copy and change it, as long as you keep the license notice.
Live app · Issues · Contributing · Changelog · Back to top ↑