Direktori alumni + CMS untuk sekolah, kampus, atau pesantren: profil alumni, loker, berita, agenda, donasi, dan kartu anggota digital dengan verifikasi QR. Dibangun dengan Astro 7 di Cloudflare Workers, D1, dan R2.
Tangkapan layar dari data seed demo. Desktop memakai sidebar kaca + toolbar, mobile memakai large title dan bottom tab bar.
| Beranda | Direktori alumni |
|---|---|
| Profil alumni | Papan loker |
| Detail loker | Berita |
| Agenda & RSVP | Kampanye donasi |
| Dashboard alumni | Kartu anggota digital |
|---|---|
| Verifikasi publik (hasil scan QR) | |
| Dashboard & antrian moderasi | Moderasi alumni |
|---|---|
| Verifikasi donasi | Media library |
| Beranda | Dashboard CMS | Kartu alumni |
|---|---|---|
- Pencarian dan filter angkatan, program, kota, industri, dan perusahaan dengan pagination server-side.
- Profil publik dengan kontrol privasi per-field; email dan nomor HP hanya untuk anggota yang login.
- Kartu anggota digital dengan QR verifikasi publik dan mode cetak yang hanya mencetak kartu, bukan seluruh halaman.
- Relay kontak: pesan dikirim lewat email tanpa mengekspos alamat alumni.
- Login passwordless dengan magic link sekali pakai; registrasi + approval admin.
- Dashboard alumni: edit profil dan foto, kartu anggota, bookmark loker, RSVP agenda, dan riwayat donasi.
- Upload foto dikompres di browser menjadi WebP sebelum masuk R2.
- Papan loker dengan filter kategori, lokasi, mode kerja, dan tipe pekerjaan.
- Submit loker oleh publik/alumni, moderasi admin, featured, dan kedaluwarsa otomatis.
- Berita dengan editor markdown, kategori, cover, dan RSS.
- Agenda dengan RSVP, kapasitas, daftar tunggu, dan export peserta.
- Halaman statis dari CMS (Tentang, Kebijakan Privasi, dll.).
- Kampanye donasi dengan target, deadline, dan rekening dari CMS.
- Konfirmasi transfer dengan unggah bukti ke bucket privat.
- Verifikasi admin dan donor wall; progress dihitung dari donasi terverifikasi.
- Dashboard antrian moderasi dan statistik.
- Modul alumni, loker, berita, agenda, donasi, halaman, media library, pesan, pengguna/role, pengaturan, dan audit log.
- Export CSV (admin, tercatat di audit), maintenance mode, dan anonimisasi akun.
- Media picker dengan kompresi 1600px dan metadata gambar.
- Bahasa desain Liquid Glass: sidebar kaca + toolbar di desktop, large title + bottom tab bar di mobile.
- Menu tampilan: tema Sistem/Terang/Gelap, intensitas glass, dan opsi kurangi transparansi (tersimpan per perangkat).
- PWA: manifest, ikon maskable, dan halaman offline lewat service worker.
- SEO: sitemap, robots, RSS berita, dan gambar OG default.
- Sesi D1 yang bisa dicabut, magic link SHA-256 sekali pakai, Turnstile, dan rate limit per IP/identitas.
- RBAC dicek di server; aksi sensitif masuk
audit_logs. - Upload divalidasi ukuran, MIME, dan magic bytes; CSP, HSTS, COOP, dan
no-storeuntuk area privat. - Cron harian untuk maintenance + digest admin, serta rekap mingguan.
- Preflight deploy menolak
database_id/PUBLIC_SITE_URLyang masih placeholder. - GitHub Actions: CI (test,
astro check, build) dan backup D1 mingguan.
| Lapisan | Teknologi |
|---|---|
| Framework | Astro 7 (SSR) + React islands |
| Runtime | Cloudflare Workers |
| Database | Cloudflare D1 + Drizzle ORM |
| Media | Cloudflare R2 |
| Styling | Tailwind CSS v4 + token Liquid Glass |
| Resend | |
| Anti-bot | Cloudflare Turnstile |
| Test | Vitest + Playwright |
Prasyarat: Node.js 24 (lihat .nvmrc; Astro 7 butuh minimal 22.23.4) dan akun Cloudflare (hanya untuk deploy).
nvm use
npm install
cp .env.example .dev.vars # isi minimal SESSION_SECRET (mis. openssl rand -hex 32)
npm run db:migrate:local
npm run db:seed:local
npm run devBuka http://localhost:4321. Login dengan email alumni demo (mis. admin@haloalumni.my.id); tanpa RESEND_API_KEY, tautan masuk dicetak di log dev server ([magic-link:dev], lihat juga npx astro dev logs).
Detail lengkap ada di docs/getting-started.md.
| Perintah | Fungsi |
|---|---|
npm run dev |
Dev server Astro |
npm run check |
Type check (astro check) |
npm test / npm run test:e2e |
Unit test Vitest / smoke test Playwright |
npm run db:generate |
Generate migrasi dari schema Drizzle |
npm run db:promote -- email@domain [local|remote] |
Jadikan akun sebagai admin |
npm run db:backup |
Export D1 remote ke folder backups/ |
| Dokumen | Isi |
|---|---|
| Memulai | Menjalankan Halo Alumni di komputer lokal |
| Deploy ke Cloudflare | D1, R2, secret, migrasi, Resend, cron, dan custom domain |
| Arsitektur | Stack, struktur folder, route, alur data, dan keamanan |
| Design system | Token, material Liquid Glass, tipografi, dan komponen |
| Catatan implementasi | Keputusan teknis, penyimpangan, dan batasan |
| Plan | Rencana produk dan fase implementasi (arsip) |
| Kredit demo | Sumber foto demo |
npx wrangler login
npx wrangler d1 create alumni-db
npx wrangler r2 bucket create alumni-media
npx wrangler r2 bucket create alumni-private
npm run db:migrate:remote
npm run db:seed:remote # opsional, data demo
npm run deploy
npm run deploy:cronIsi account_id, database_id, PUBLIC_SITE_URL, dan EMAIL_FROM di wrangler.jsonc serta workers/cron/wrangler.jsonc, lalu pasang secret SESSION_SECRET, RESEND_API_KEY, dan ADMIN_EMAIL. Panduan lengkap: docs/deployment.md.
Seed (scripts/seed.sql + scripts/seed-realistic.sql) berisi 21 alumni terbit, 3 pendaftar pending, 8 loker terbit + 2 pending, 4 berita, 4 agenda, 2 kampanye donasi, 8 donasi, 30 aset media, pesan kontak, bookmark, dan audit log. Akun demo memakai email @haloalumni.my.id; jangan gunakan data ini untuk produksi nyata tanpa mengganti kredensial dan konten.
Pull request dan laporan bug sangat diterima. Baca CONTRIBUTING.md dulu. Celah keamanan dilaporkan secara privat sesuai SECURITY.md.
Dirilis di bawah lisensi MIT.
Dibuat oleh @rizalahmaddd. Butuh bantuan atau kustomisasi?
- WhatsApp: +62 857-7777-5477
- Website: solusikoding.com