Bangun etalase campaign yang jujur: hanya published, data dari Supabase, target berformat Rupiah, empty state jelas, dan link menuju flow yang benar.
Setelah context pack rapi, kita mulai membangun bagian yang terlihat oleh pengunjung: halaman utama.
Di starter, src/app/page.tsx sudah membaca tabel campaigns:
tsxconst {
Ini sudah satu keputusan yang benar: halaman publik hanya mengambil campaign published. Jangan hilangkan filter itu saat memperbaiki tampilan.
Masalahnya, kartu campaign masih terlalu tipis. Pengunjung melihat judul dan ringkasan, tetapi belum mendapat informasi target dana. Untuk platform donasi, target adalah informasi penting: orang perlu tahu skala kebutuhan sebelum lanjut.
Tugas kita kecil: lengkapi kartu daftar campaign tanpa mengubah perilaku inti.
Buka file:
textsrc/app/page.tsxBagian render-nya kira-kira seperti ini:
tsx<div className="mt-6 grid gap-4">
{campaigns?.map((c) => (
<Link
key={c.slug}
href={`/campaigns/${c.slug}`}
className="rounded-xl border p-4 transition hover:border-emerald-600"
>
<h2 className="font-semibold">{c.title}</h2>
<p className="text-sm text-muted-foreground">{c.summary}</p>
</Link>
))}
</div>Ada tiga hal yang harus kamu jaga:
published tetap ada;Kalau sebelumnya di Module 01 kamu sudah mengarahkan kartu langsung ke halaman donasi, pertahankan keputusan itu. Kalau kamu memilih jalur detail dulu, link boleh menuju detail. Yang penting: jangan mengubah route tanpa sadar. Putuskan berdasarkan PRD-mu, bukan karena agent kebetulan mengganti link.
target_amount dari database adalah angka:
text100000000Di UI, angka seperti itu kurang ramah. Tampilkan sebagai Rupiah:
tsxRp {Number(c.target_amount).toLocaleString('id-ID')}Kenapa memakai Number(...)? Data numeric dari Supabase kadang diperlakukan sebagai number atau string tergantung client/typing. Dengan Number(...), render lebih tahan terhadap dua bentuk itu.
Tapi jangan sampai helper formatting jadi proyek besar dulu. Untuk tahap ini, inline formatting masih cukup. Refactor ke helper akan dibahas di akhir module.
Kalau campaigns kosong, halaman tidak boleh terlihat rusak atau blank. Empty state yang baik memberi konteks:
tsx{!campaigns?.length && (
<p className="rounded-lg border border-dashed p-4 text-sm text-muted-foreground">
Belum ada campaign yang sedang menerima donasi.
</p>
)}Ini bukan sekadar kosmetik. Empty state membantu pengunjung memahami bahwa sistem hidup, hanya belum ada data yang bisa ditampilkan.
Gunakan prompt ini:
textMulai dari AGENTS.md, DESIGN.md, dan docs/README.md.
Tugas kecil: perbaiki halaman utama Platform Donasi Amanah agar daftar campaign lebih informatif.
Baca src/app/page.tsx.
Yang perlu dilakukan:
1. Pertahankan query campaigns dari Supabase.
2. Pertahankan filter .eq('status', 'published').
3. Render tiap kartu dengan judul, ringkasan, dan target_amount berformat Rupiah.
4. Tambahkan empty state jika tidak ada campaign published.
5. Jangan mengubah migration, halaman donasi, validasi donasi, atau schema.
6. Jangan menambah fitur baru seperti cover image, search, pagination, share button, atau progress bar.
Acceptance criteria:
- Homepage menampilkan campaign seed "Paket Pangan untuk Keluarga".
- Kartu menampilkan ringkasan dan target dana dalam format Rupiah.
- Campaign non-published tetap tidak tampil karena filter published masih ada.
- Diff hanya menyentuh file yang relevan untuk homepage.
- npm run lint dan npm run build berhasil.
Setelah selesai, laporkan file yang diubah, alasan perubahan, dan cara verifikasi.Prompt ini sengaja tidak meminta “buat homepage bagus”. Desain boleh meningkat, tapi scope tetap informasi campaign.
Cek diff dulu:
bashgit diff --stat
git diffUntuk tugas ini, perubahan idealnya hanya di src/app/page.tsx. Kalau agent menambah route admin, mengubah migration, atau menyentuh donation form, minta revert.
Lalu jalankan:
bashnpm run devBuka:
texthttp://localhost:3000Cek:
Rp 100.000.000;Cek kode:
bashgrep -n "published\|target_amount\|toLocaleString" src/app/page.tsxOutput harus menunjukkan filter published dan formatting target.
Terakhir:
bashnpm run lint
npm run buildHalaman daftar adalah etalase. Etalase yang benar bukan yang paling ramai, tapi yang memberi informasi cukup tanpa melanggar rules.
Untuk AI coding, pola yang kamu latih di sini:
published tetap ada.npm run lint dan npm run build berhasil.Selesai satu bagian kecil, tapi penting. Sekarang homepage bukan cuma “ada kartu”, melainkan etalase campaign yang lebih jujur: data dari database, status tetap dijaga, dan target dana bisa dipahami manusia.
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
Ajukan pertanyaan, beri solusi, atau diskusikan materi pelajaran ini.
Belum ada komentar untuk pelajaran ini.
Jadilah yang pertama memulai diskusi atau mengajukan pertanyaan!