KembaliArsip / superapp-productivity / daily-progress-tracker
superapp-productivity

daily-progress-tracker

23 file ยท 162.6 KB

Sistem informasi live โ€” daily-progress-tracker-weld.vercel.appBuka di tab baru

README

๐Ÿ“ˆ Daily Progress Tracker

Web tracking progres harian yang dikelola oleh LLM. Sistemnya sederhana: kamu chat ke LLM, LLM update file JSON, dan web ini akan menampilkan dashboard interaktif dari data tersebut.

๐Ÿ”— Live Demo

https://daily-progress-tracker-weld.vercel.app/ (Vercel โ€” Deployed from Private Repo)

Repo ini adalah private. Setiap push ke main akan otomatis deploy ke Vercel.

๐ŸŒ Custom Domain (Optional)

Untuk menggunakan domain custom seperti daily.heyibnu.com:

  1. Tambahkan A Record di Cloudflare: daily.heyibnu.com โ†’ 76.76.21.21
  2. Atau tambahkan CNAME: daily.heyibnu.com โ†’ cname.vercel-dns.com

๐Ÿš€ Workflow

1. Buka web โ†’ klik "Copy Context for LLM"
2. Paste ke chat LLM (Kimi, ChatGPT, Claude, dll)
3. Ceritakan progress harianmu dalam bahasa bebas
4. LLM akan mengembalikan JSON updated
5. Kamu paste JSON ke file data/progress.json โ†’ commit & push
6. Refresh web โ†’ dashboard terupdate otomatis

๐Ÿ›  Tech Stack

  • HTML5 + CSS3 + Vanilla JavaScript โ€” no build step, no framework
  • Flat-file JSON (data/progress.json) sebagai single source of truth
  • PWA โ€” bisa install ke homescreen & work offline
  • Vercel โ€” auto-deploy dari repo private

๐Ÿ“‚ Folder Structure

daily-progress-tracker/
โ”œโ”€โ”€ index.html              # Dashboard utama
โ”œโ”€โ”€ css/style.css           # Styling dark-mode responsive
โ”œโ”€โ”€ js/
โ”‚   โ”œโ”€โ”€ app.js              # Main controller
โ”‚   โ”œโ”€โ”€ renderer.js         # Render UI (dashboard, history, calendar, stats)
โ”‚   โ””โ”€โ”€ data-manager.js     # Load/save/validate JSON
โ”œโ”€โ”€ data/
โ”‚   โ””โ”€โ”€ progress.json       # Data progres harianmu
โ”œโ”€โ”€ llm-prompts/
โ”‚   โ””โ”€โ”€ system-prompt.md    # Prompt untuk LLM
โ”œโ”€โ”€ manifest.json           # PWA manifest
โ”œโ”€โ”€ sw.js                   # Service worker untuk offline
โ””โ”€โ”€ README.md               # Dokumentasi ini

๐Ÿ–ฅ Cara Menjalankan

Opsi A: Buka Web Live

Langsung buka: https://daily-progress-tracker-weld.vercel.app/

Opsi B: Install sebagai App (PWA)

  1. Buka web live di Chrome/Edge (desktop/mobile)
  2. Klik tombol "๐Ÿ“ฒ Install App" di pojok kanan atas
  3. App akan muncul di homescreen / desktop dan bisa dipakai offline!

Opsi C: Buka File Lokal

  1. Clone repo private ini.
  2. Buka file index.html langsung di browser.

๐Ÿ“ Cara Update Progress

1. Copy Context

Di web, klik tombol "Copy Context for LLM". Ini akan menyalin:

  • System prompt lengkap dari llm-prompts/system-prompt.md
  • Current JSON data
  • Git commands siap paste untuk commit & push

2. Chat dengan LLM

Paste ke chat LLM favoritmu, lalu lanjutkan dengan progress harian, contoh:

"Hari ini aku selesaiin presentasi ke client, belajar Python 1 jam, dan workout 20 menit. Moodku bagus, fokus 8/10."

3. Terima JSON Updated

LLM akan mengembalikan JSON yang sudah diupdate. Copy JSON tersebut.

4. Update Repo Private

Paste JSON ke file data/progress.json di repo private ini, lalu jalankan git commands yang sudah disalin:

git add data/progress.json
git commit -m "Update progress: 2026-04-02"
git push origin main

5. Update Live Web

Web akan otomatis terupdate saat kamu push ke repo ini:

git add data/progress.json
git commit -m "Update progress: 2026-04-03"
git push origin main

Vercel akan auto-deploy dalam hitungan detik.


๐Ÿ“Š Fitur Dashboard

  • Dashboard Hari Ini โ€” ringkasan task, waktu, mood, dan notes
  • ๐Ÿ“Š Weekly Insight โ€” perbandingan produktivitas minggu ini vs minggu lalu
  • History / Timeline โ€” semua entry harian dengan filter & search
  • Calendar Heatmap โ€” visualisasi produktivitas per hari
  • Stats Panel โ€” streak, done rate, category breakdown, weekly chart
  • Export / Import JSON โ€” backup dan restore data dengan mudah
  • PWA Offline โ€” install app & tetap bisa jalan tanpa internet

๐ŸŽจ Kategori Task

KategoriBadge Color
work๐Ÿ’ผ Ungu
learning๐Ÿ“š Hijau
health๐Ÿƒ Kuning
life๐Ÿ  Biru
creative๐ŸŽจ Pink
social๐Ÿ—ฃ๏ธ Violet

๐Ÿ”’ Keamanan Data

Karena data disimpan dalam file JSON flat-file di repo private, tidak ada database eksternal yang perlu dikelola. Repo ini private dan aman โ€” data progressmu tidak akan terexpose ke publik.


๐Ÿ’ก Tips

  • Gunakan Ctrl + 1/2/3/4 untuk switch tab cepat.
  • Jika data/progress.json tidak bisa di-fetch (misal buka lokal tanpa server), app akan otomatis fallback ke localStorage.
  • Setelah install PWA, app akan menyimpan cache sehingga bisa dibuka offline.

Dibuat dengan โค๏ธ untuk tracking harian yang lebih produktif.

File Utama

  • .gitignore
  • CHANGELOG.md
  • CHANGELOG_COMPLETE.md
  • README.md
  • SETUP-OPENROUTER.md
  • index.html
  • manifest.json
  • sw.js