Project Tracker

A simple project tracking system for managing builds, journals, BOMs, and checklists. Built with HTML, CSS, and JavaScript using a JSON-based backend structure.

---

Overview

This project is a personal dashboard for tracking engineering and coding projects. It has three main parts:

• Project display dashboard
• Checklist system per project
• Editor for adding and updating projects

Everything is driven by a single projects.json file.

---

Screenshots

Dashboard

Projects

Checklist Page

Editor Page

---

Features

Project Dashboard

• Loads projects dynamically from JSON

• Supports multiple “programs” (categories)

• Displays:

  • Name
  • Time spent
  • Cost
  • Description
  • Status (In Progress / Completed)

• Markdown journal support via zero-md

• BOM tables loaded from CSV using PapaParse

---

Checklist

• Select program → project → tasks

• Add / delete tasks

• Mark tasks as complete

• Filter:

  • All
  • Completed
  • Incomplete

• Progress tracker per project

• Export full JSON file

---

Editor

• Add new programs and projects

• Edit all project fields:

  • Name
  • Description
  • Time
  • Cost
  • Links
  • Status

• Upload images locally

• Live preview for:

  • Journal (Markdown)
  • BOM table

• Save back to JSON

---

Languages

• HTML
• CSS
• JavaScript
• Zero-md
• PapaParse

---

Project Structure

/index.html
/hackclub.html
/checklist.html
/edit.html
/projects.json
/styles.css
/boms/
/journals/
/images/

---

How It Works

• All data is stored in projects.json
• JavaScript fetches and renders everything dynamically
• Checklist edits modify the same JSON structure
• Editor updates the live object in memory
• JSON can be downloaded to save changes

---

Data Structure

{
  "programs": [
    {
      "name": "Blueprint",
      "id": "blueprint",
      "projects": [
        {
          "id": "macropad",
          "name": "MacroPad",
          "time": 8,
          "cost": 20,
          "status": "finished",
          "description": "Macro keyboard project",
          "journal": "journals/MacroPad.md",
          "bom": "macropad-bom",
          "github": "",
          "projectLink": "",
          "checklist": []
        }
      ]
    }
  ]
}

---

What I Learned

• How to structure dynamic frontend apps without frameworks
• Working with JSON as a lightweight database
• DOM rendering from scratch
• File parsing (CSV + Markdown)
• Building an editor UI that modifies live data