Baby Movement Tracker dengan Cloudflare Pages

Saya baru siapkan satu lagi side project, iaitu aplikasi pengesan pergerakan bayi bernama Baby Movement Tracker yang saya bina sepenuhnya atas Cloudflare Pages dan D1 database.

Demo: https://bb.hafism.xyz

---

Ciri-ciri Utama

Ciri	Keterangan
Butang “Kick!”	Butang besar untuk rekod tendangan dengan satu tap
Dashboard	Paparan kalendar dengan statistik mingguan/bulanan
Sejarah	Paparan sejarah yang boleh dikembangkan dengan masa tendangan
Multi-user	Sokongan berbilang pengguna (berasaskan device, tanpa login)
Dark mode	Sokongan tema gelap (automatik)
PWA ready	Boleh dipasang pada telefon
Real-time	Kemas kini counter secara langsung
Tracking	Penjejakan completion dengan timestamp

---

Paparan Aplikasi

Halaman Count

Halaman utama memang saya buat seringkas mungkin. Ada butang “Kick!” yang besar supaya senang record setiap tendangan, dan counter terus tunjuk berapa banyak pergerakan yang dah direkod hari itu.

Halaman Dashboard

Dashboard pula bagi gambaran yang lebih jelas ikut hari. Warna pada kalendar memudahkan kita nampak hari yang dah capai sasaran dan hari yang masih belum complete.

Halaman History

Paparan history tunjuk rekod 30 hari terakhir, dan setiap hari boleh di-expand kalau nak tengok masa setiap tendangan direkod.

---

Sokongan Multi-User

Untuk multi-user support, app ini guna device-based anonymous ID:

• Setiap device secara automatik mendapat ID unik yang disimpan dalam localStorage
• Tiada login atau pendaftaran diperlukan
• Setiap pengguna hanya melihat data mereka sendiri
• URL yang sama berfungsi untuk semua orang
• Data diikat kepada device/browser

Nota: Kalau browser data di-clear atau app dibuka dalam private mode, ID baru akan dijana.

---

Struktur Projek

baby-movement-tracker/
├── wrangler.toml          # Cloudflare Pages config
├── schema.sql             # D1 database schema (multi-user)
├── functions/             # Cloudflare Pages Functions (API)
│   └── api/
│       ├── kick.js        # POST /api/kick
│       ├── today.js       # GET /api/today
│       ├── history.js     # GET /api/history
│       └── session/
│           └── [date].js  # GET /api/session/:date
└── public/                # Static files
    ├── index.html
    ├── styles.css
    ├── app.js
    ├── manifest.json
    └── icon.svg

---

Deploy ke Cloudflare Pages

# 1. Clone repository
git clone https://github.com/xhafism/baby-movement-tracker.git
cd baby-movement-tracker

# 2. Login ke Cloudflare
npx wrangler login

# 3. Cipta D1 database
npx wrangler d1 create baby-tracker-db

# 4. Kemaskini wrangler.toml dengan database_id dari langkah 3

# 5. Jalankan migrations pada remote database
npx wrangler d1 execute baby-tracker-db --remote --file=./schema.sql

# 6. Deploy ke Pages
npx wrangler pages deploy public --project-name=baby-movement-tracker

---

Development Lokal

# Jalankan local database migrations
npx wrangler d1 execute baby-tracker-db --file=./schema.sql

# Start development server (Pages mode)
npx wrangler pages dev public

Bila dev server dah jalan, buka http://localhost:8788 dalam browser.

---

Deploy via Cloudflare Dashboard

1. Fork repository ini ke GitHub
2. Pergi ke Cloudflare Dashboard → Workers & Pages → Create
3. Pilih Pages → Connect to Git → Pilih repository
4. Konfigurasi:
   • Build command: (biarkan kosong)
   • Build output directory: public
5. Cipta D1 Database:
   • Pergi ke Workers & Pages → D1 → Create database
   • Nama: baby-tracker-db
   • Jalankan migration: npx wrangler d1 execute baby-tracker-db --remote --file=./schema.sql
6. Tambah D1 Binding:
   • Pergi ke Pages project → Settings → Functions → D1 Database Bindings
   • Variable name: DB
   • Database: baby-tracker-db
7. Redeploy

---

API Endpoints

Semua endpoints memerlukan user_id (dihantar secara automatik oleh frontend).

Method	Endpoint	Keterangan
POST	/api/kick	Rekod tendangan (body: {user_id})
GET	/api/today?user_id=xxx	Dapatkan sesi hari ini
GET	/api/history?user_id=xxx	Dapatkan 30 hari terakhir
GET	/api/session/:date?user_id=xxx	Dapatkan tarikh tertentu

---

Tech Stack

Komponen	Teknologi
Backend	Cloudflare Pages Functions
Database	Cloudflare D1 (SQLite)
Frontend	Vanilla HTML/CSS/JavaScript
Styling	Custom CSS dengan pink/coral gradient theme
Multi-user	Device-based anonymous ID (localStorage)

---

Kesimpulan

Secara keseluruhan, Baby Movement Tracker ialah contoh app yang simple tapi memang berguna, dan Cloudflare stack buatkan setup dia kekal ringan:

• Zero server management - Serverless sepenuhnya
• Fast globally - Edge network CDN
• Free tier friendly - Sesuai untuk projek peribadi
• PWA ready - Boleh dipasang sebagai app

Source code ada di GitHub. Kalau ada soalan atau nak sembang pasal implementation, boleh hubungi saya di X (@xhafism) atau Threads (@haf.ism).

---

Artikel ini sebahagian daripada siri “Building with Cloudflare”, tempat saya kongsi pengalaman build app atas edge stack yang ringan dan practical.