CodeOrbit

Your Universe of Developer Growth

A personal developer productivity and learning management platform designed to organize technical skills, maintain focused learning logs, manage development projects, and monitor milestones through an interactive cosmic dashboard.

Explore Live Demo »

About • Features • Tech Stack • Getting Started • Structure • Contributing • License

---

🚀 Explore CodeOrbit

Experience CodeOrbit's developer command center and explore your personal developer universe in real time:

Hosted on GitHub Pages by the Let's Cook organization, deployed automatically on every push to main once lint, format and unit-test checks pass.

---

📸 Application Preview

The CodeOrbit Command Center brings a space-inspired aesthetic into modern developer workflow tracking. Illustrative layout, not a screenshot; open the live app for the real thing.

+----------------------------------------------------------------------------------------------------+
|  [LOGO] CodeOrbit         [ Search Universe (Ctrl+K) ]               [Day 5 Streak 🔥]  [Theme] [Avatar]|
+----------------------------------------------------------------------------------------------------+
| SIDEBAR      | HERO COMMAND CENTER                                                                 |
|              | "Welcome to Your Developer Universe, Pilot"                                        |
| 🛸 Command   | [ Orbit Streak: 5 Days ] [ Velocity: 84/100 ] [ Target: 2.5/3.0h Today ]           |
| 🪐 Skills    +-------------------------------------------------------------------------------------+
| 📝 Logs      | TELEMETRY KPI CARDS                                                                 |
| 🛰 Projects  | [ Skills: 12 Active ] [ Learning: 42.5 hrs ] [ Projects: 4 Flights ] [ Streak: 5d ]  |
| 🎯 Goals     +--------------------------------------------------+----------------------------------+
| ⭐ Badges    | ORBITAL SKILL UNIVERSE (Interactive Canvas / SVG)| VELOCITY TRAJECTORY & METRICS    |
| 📊 Analytics |          (Core: React)                           | Weekly Learning Distribution     |
| ⚙️ Settings  |         /       |       \                        | [Mon: 2h] [Tue: 3.5h] [Wed: 1h]  |
|              |      (Node)  (Python)  (TypeScript)              | Developer Velocity Index: 84/100 |
|              | [Pause / Resume]  [Constellation Grid View]      | [View Calculation Breakdown]     |
|              +--------------------------------------------------+----------------------------------+
|              | ACTIVE FLIGHTPATHS (Projects)                    | UPCOMING HORIZONS (Milestones)   |
|              | • CloudSync API [=======--- 70%] [In Progress]   | • Complete Docker Cert [3 Days]  |
|              | • Starlink Engine [===-------- 30%] [Planning]   | • Launch Portfolio v2  [Overdue] |
+----------------------------------------------------------------------------------------------------+

Tip

Visit the Live Application to interact with the animated orbital canvas, dynamic telemetry gauges, and cosmic dark theme in real time. For contributors preparing visual materials, see docs/screenshots/README.md for full image capture specifications.

---

🌌 About CodeOrbit

CodeOrbit is an open-source personal developer productivity and learning management platform designed to help students, self-taught engineers, and experienced developers organize their technical learning journey.

The Problem

Modern developers frequently navigate an overwhelming amount of information across disparate tools. Learning trajectories, project repos, coding sprint logs, and technical milestones end up scattered across browser bookmarks, loose notes, and unmaintained spreadsheets. Without a centralized system, maintaining momentum, tracking consistency, and measuring skill acquisition becomes challenging.

The Solution

CodeOrbit provides a focused, unified workspace for developer growth. By transforming competencies into an interactive Skill Universe, study sessions into Mission Logs, engineering builds into Space Missions, and targets into Milestone Horizons, CodeOrbit turns professional development into an engaging, structured, and measurable journey.

Everything runs 100% client-side using browser localStorage — prioritizing privacy, zero network latency, and complete user data sovereignty with zero required account logins or paid cloud subscriptions.

---

✨ Core Features

These features work in the current release (v0.1.0). CodeOrbit is early-stage: expect rough edges, and see the Roadmap for what is still missing.

🪐 Command Center The centralized mission hub presenting an immediate overview of developer momentum, featuring a celestial greeting, live local date, active streak tracking, 4 dynamic telemetry KPI cards, and an interactive Developer Velocity Index (0–100) with mathematical scoring breakdowns.	🌌 Orbital Skill Universe An interactive multi-ring planetary visualization where orbiting bodies scale and position themselves based on proficiency. Includes real-time tooltips, orbital animation controls (play/pause), and an accessible Constellation Grid toggle.
📚 Skill Taxonomy & Tracking Manage competencies across 7 categories (Programming Languages, Web Dev, AI/ML, Data Science, Databases, DevOps, Computer Science). Track proficiency tiers (Beginner to Expert) with fast inline +10% / -10% step controls, search, and sorting.	📝 Mission Logs (Learning Sprints) Log focused learning sessions across Coding, Reading, Practice Problems, Project Development, Research, and Tutorials. Features an animated SVG daily goal progress ring, session duration math, and chronological timeline history.
🛰️ Space Missions (Projects) Portfolio tracker monitoring engineering flightpaths from Planning to Completion. Features custom technology stack tags, progress indicators (0–100%), and direct sanitized links to GitHub repositories and live deployments.	🎯 Milestones (Goal Horizons) Set technical objectives with designated deadlines and priority classifications (Critical, High, Medium, Low). Automatically calculates completion rates, active horizons, and highlights overdue goals.
📊 Universe Analytics Five Chart.js visualizers including weekly learning volume (Mon–Sun), 30-day velocity trajectories, skill distributions, project pipeline breakdowns, and activity type allocations, accompanied by automated developer habit insights.	⭐ Achievements & Sovereignty 10 reactive achievement badges triggered strictly by genuine user milestones with synthesized Web Audio chimes. Includes JSON backup export, schema-validated import, demo data loading, and theme switching (Cosmic Dark / Orbital Light).

---

🛠️ Built With

CodeOrbit is deliberately built with clean, standards-compliant web technologies without heavy frontend frameworks or bundlers, ensuring instant load times and high accessibility:

Technology	Badge	Purpose
HTML5		Semantic structure, accessible dialogs, and clean application shell
CSS3		Custom design system tokens, glassmorphism, responsive grid, and orbital animations
JavaScript		Modular architecture using native ES Modules (import/export)
Chart.js		Responsive canvas charts configured with custom cosmic gradients
Lucide Icons		Modern, consistent SVG iconography
LocalStorage		Fast, atomic, client-side data persistence with zero network latency
GitHub Pages		Static hosting with HTTPS, deployed by GitHub Actions on every push to main
ESLint + Prettier		Development only: catch bugs and keep formatting consistent; run on every PR and push

---

⚡ Getting Started

You do not need npm install, Node.js, Webpack, or any build setup to run CodeOrbit. (Node.js is only used by contributors who want to run the lint/format checks locally; see CONTRIBUTING.md.)

Prerequisites

• A modern web browser (Google Chrome, Microsoft Edge, Mozilla Firefox, or Apple Safari).
• A text editor or IDE (such as VS Code).
• Git installed on your computer.

Installation

1. Clone the repository:

   git clone https://github.com/LetsCook-Organization/CodeOrbit.git
   cd CodeOrbit

2. Serve the application:
   Because CodeOrbit uses native JavaScript ES Modules, browsers require files to be served via HTTP/HTTPS rather than the direct file:// protocol. Choose any of the following:

   • VS Code Live Server (Recommended):
     Install the "Live Server" extension, right-click index.html, and select "Open with Live Server".
   • Python (Built into Windows, macOS, Linux):

     python -m http.server 3000

   • Node.js (Optional):

     npx serve .

3. Open in your browser:
   Navigate to http://localhost:3000 (or the port indicated in your terminal) to explore your developer universe.

---

📁 Project Structure

CodeOrbit/
├── .github/
│   ├── ISSUE_TEMPLATE/
│   │   ├── bug_report.yml          # Structured GitHub bug report issue form
│   │   └── feature_request.yml     # Structured GitHub feature request issue form
│   ├── workflows/
│   │   └── ci.yml                  # Lint, format and unit tests on every PR/push; deploys main to GitHub Pages
│   ├── dependabot.yml              # Keeps GitHub Actions and dev tools up to date
│   └── PULL_REQUEST_TEMPLATE.md    # Contributor PR checklist & guidelines
├── assets/
│   ├── css/
│   │   ├── style.css               # Design tokens, variables, base layout & resets
│   │   ├── components.css          # Reusable buttons, cards, modals, dropdowns
│   │   ├── dashboard.css           # Command Center hero, telemetry cards, velocity ring
│   │   ├── orbital.css             # Dynamic planetary SVG/CSS orbital animation engine
│   │   └── responsive.css          # Breakpoints (Desktop, Laptop, Tablet, Mobile)
│   ├── images/
│   │   ├── favicon.svg             # SVG favicon
│   │   └── logo.svg                # Brand vector mark
│   └── js/
│       ├── app.js                  # Application orchestrator & canvas starfield
│       ├── storage.js              # Centralized LocalStorage manager (the only module that touches storage)
│       ├── utils.js                # XSS sanitization, math scoring, Web Audio chimes
│       ├── navigation.js           # Hash-based routing (#dashboard, #skills, etc.)
│       ├── components.js           # Modal dialog system, toasts, Command Palette (Ctrl+K)
│       ├── dashboard.js            # Command Center KPI calculations & orbital renderers
│       ├── skills.js               # Skill Universe CRUD, filters, quick-step adjusters
│       ├── progress.js             # Mission Logs sprint tracking & daily goal gauge
│       ├── projects.js             # Space Missions project manager & tech stack tags
│       ├── goals.js                # Milestones target horizons & overdue detection
│       ├── achievements.js         # Real-time condition evaluation & achievement unlocks
│       ├── analytics.js            # Analytical calculations & automated habit insights
│       ├── settings.js             # Profile management, theme toggle, JSON backup/restore
│       └── charts.js               # Chart.js configurations & lifecycle management
├── scripts/
│   └── test.mjs                    # Runs the unit tests in 4 timezones
├── tests/
│   ├── helpers/                    # Browser stand-ins and a clock-freezing helper for tests
│   ├── achievements.test.js        # Achievement rules unlock exactly at their thresholds
│   ├── storage.test.js             # First visit, corrupt data, saving, import/export
│   └── utils.test.js               # Local dates, streaks, productivity score, escaping
├── docs/
│   ├── screenshots/
│   │   └── README.md               # Screenshot capture instructions and specifications
│   ├── ARCHITECTURE.md             # System design & data schema reference
│   ├── DECISIONS.md                # Decision log: what we chose, why, and the trade-offs
│   ├── FLOW.md                     # Code execution flow: entry point, call order, data loop
│   └── MAINTAINER_SECURITY.md      # Administrative security checklist & access guidance
├── .git-blame-ignore-revs          # Formatting-only commits hidden from git blame
├── .prettierrc.json                # Prettier formatting rules
├── CHANGELOG.md                    # Release history (what changed in each version)
├── CODE_OF_CONDUCT.md              # Contributor Covenant 2.1 code of conduct
├── CONTRIBUTING.md                 # Contributor onboarding & workflow guide
├── eslint.config.js                # ESLint rules (bug-catching, not style)
├── index.html                      # Semantic single-page application entry point
├── LICENSE                         # MIT License
├── package.json                    # Dev tools only (lint/format scripts); the app needs no install
├── README.md                       # Main project documentation
└── SECURITY.md                     # Security policy & vulnerability reporting

---

🤝 Contributing to CodeOrbit

CodeOrbit is an open-source project proudly developed and maintained under LET'S COOK — THE FOUNDRY. We actively welcome contributions from developers, designers, and students of all skill levels!

Whether you are fixing a typo in documentation, polishing responsive styles, or proposing a new feature, your help is appreciated.

How to Get Involved

1. Browse Existing Issues: Check the GitHub Issues tab. Look for issues labeled good first issue or help wanted.
2. Issue Assignment: To avoid duplicate efforts, please comment on an issue and wait to be assigned before beginning work. If you have an idea for a new feature or found a bug, open an issue first.
3. Follow the Workflow: Read our comprehensive guide in CONTRIBUTING.md for step-by-step instructions on forking, creating topic branches, following Conventional Commits (feat:, fix:, docs:), and testing locally.
4. Submit a Pull Request: Complete the provided Pull Request Template and describe your verification steps clearly.

---

🛰️ Project Roadmap

Current version: v0.1.0 (changelog). Pre-1.0 means the app works, but the data format and features may still change.

✅ Shipped in v0.1.0

• Command Center dashboard with streak tracking and Developer Velocity Index (0–100)
• Skill Universe with 7 categories, proficiency tiers, and quick-step progression
• Mission Logs, Space Missions (projects) and Milestones (goals)
• 10 achievements, 5 analytics charts, automated habit insights
• Command Palette (Ctrl+K / Cmd+K), dark/light themes, JSON export/import

🔧 Next: v0.2.0 (contributors welcome)

• More tests: unit tests cover utils.js, storage.js and the achievement rules; the page modules and UI flows have none yet
• Data migrations: storage.js stores a version number but has no code to upgrade old data yet
• First-run onboarding: guide new users from the empty dashboard to their first skill, or to the demo data
• Real screenshots in this README (replace the illustrative layout above)
• Accessibility pass: keyboard-only navigation, focus order, colour contrast, screen-reader labels

🌌 Later

• Import real activity from GitHub (commits, PRs, active days) so streaks and hours reflect actual work
• Backup reminders / sync: data currently lives in one browser and is lost if site data is cleared
• Pomodoro focus timer in the dashboard
• Export skill matrices and progress reports (Markdown & CSV)
• Custom colours for project technology tags
• Progressive Web App (offline support)

Every unticked item above has an open issue with the files to change and a clear "done" checklist. New here? Start with a good first issue.

---

🌱 Open Source

CodeOrbit is developed as an open educational resource under LET'S COOK — THE FOUNDRY. The project serves as an active platform for learners and engineers to:

• Practice practical Git and GitHub collaboration workflows.
• Understand modular vanilla JavaScript architecture without framework abstractions.
• Learn accessible UI/UX design principles and responsive CSS layout techniques.
• Gain experience contributing to real-world, maintained open-source software.

We believe the best way to grow as a developer is by building, experimenting, and contributing in public.

---

📄 License

CodeOrbit is open-source software distributed under the terms of the MIT License.

Copyright (c) 2026 LET'S COOK — THE FOUNDRY

See the LICENSE file for complete terms and permissions.

---

Built with curiosity, code, and community.
CodeOrbit • LET'S COOK — THE FOUNDRY

Live Demo · GitHub · Contributing · License

Back to top ↑