Fasa 7 — Modul Pelajar: Full Stack Dashboard

🎯

Apa Itu Full Stack Dashboard?

CAPSTONE PROJECT

Ini adalah projek paling besar dan paling seronok dalam kursus ini. Anda akan bina dashboard interaktif yang lengkap dengan:

UI moden dengan sidebar, header, cards, dan data visual
Pangkalan data sebenar menggunakan Supabase (Postgres)
Data yang boleh dicari, ditapis, dan dikemas kini
Carta visual (bar, line, pie) untuk analisis data
User roles — admin boleh edit, user biasa hanya lihat
Real-time updates — data berubah tanpa refresh halaman

Segala yang anda belajar dari Fasa 1 hingga Fasa 6 akan digunakan di sini. Ini peluang untuk buktikan apa yang anda mampu dengan AI!

Ingat: Anda TAK perlu hafal coding. Anda cuma perlu tahu APA yang nak dibina dan TANYA AI dengan prompt yang betul. AI akan tulis kod untuk anda.

1

Pilih Jenis Dashboard

5 minit

Pilih satu jenis dashboard yang nak dibina. Setiap pilihan mempunyai kesukaran yang sama — pilih yang paling menarik minat anda.

A. Inventory Tracker — Track stok barang, kuantiti, kategori. Ada chart stok mengikut kategori.
B. Contact Manager — Simpan senarai contact dengan search dan filter. Dashboard hubungan.
C. Idea Board — Post idea, vote, comment. Papan idea interaktif.
D. Expense Tracker — Log perbelanjaan, kategori, jumlah. Chart perbelanjaan bulanan.

Tak pasti nak pilih yang mana? Baca Dashboard Brief untuk butiran lengkap setiap pilihan.

"Saya nak bina [Inventory Tracker / Contact Manager / Idea Board / Expense Tracker]. Berikan saya senarai lengkap apa yang saya perlukan: model data, UI components, dan Senarai semak fitur."

2

Reka Data Model dengan AI

10 minit

Sebelum mula bina UI, anda perlu tentukan data apa yang akan disimpan. Jangan risau — AI boleh bantu reka model data untuk anda.

Apa Itu Data Model?

Data model adalah struktur data — ia menentukan apa jadual (table) yang diperlukan, apa ruangan (columns) dalam setiap jadual, dan jenis data setiap ruangan.

Contoh: Inventory Tracker

Table: items
Columns: id (uuid), name (text), quantity (integer), category (text), price (decimal), created_at (timestamp)

Contoh: Expense Tracker

Table: expenses
Columns: id (uuid), description (text), amount (decimal), category (text), date (date), created_at (timestamp)

"Saya nak bina [Contact Manager]. Rekakan data model untuk saya — apa jadual yang diperlukan, apa columns, dan apa jenis data (text, integer, boolean, timestamp). Saya akan guna Supabase (Postgres)."

"Untuk [Idea Board], saya perlukan jadual ideas dengan support untuk votes dan comments. Berikan SQL schema lengkap."

Checkpoint: Sebelum teruskan, pastikan data model anda lengkap. Tunjuk pada pengajar untuk pengesahan.

3

Bina Layout Dashboard dengan AI

25 minit

Sekarang tiba masa untuk bina UI. Dashboard anda perlukan layout yang profesional dengan:

Sidebar — navigasi menu (Dashboard, Items, Charts, Settings)
Header — tajuk dashboard, user avatar, search bar
Main Content — cards, tables, charts
Cards — ringkasan data (total items, low stock, dll)

"Bina satu halaman HTML/CSS untuk dashboard [Expense Tracker]. Saya perlukan: - Sidebar dengan menu: Dashboard, Expenses, Charts, Settings - Header dengan tajuk dan ikon user - 4 cards ringkasan: Total Expenses, Bulan Ini, Kategori Terbanyak, Purata Harian - Ruang untuk chart (bar dan line) - Dark theme (background #0b0d17, teks putih, aksen cyan) - Responsive layout guna CSS Grid/Flexbox"

Tips: Beritahu AI secara spesifik tentang layout yang anda nak. Lebih detail prompt, lebih baik hasilnya. Nyatakan dark theme, warna aksen, dan susun atur yang diingini.

Struktur HTML Dashboard:

<div class="dashboard">
  <aside class="sidebar">...</aside>
  <main class="main-content">
    <header class="dashboard-header">...</header>
    <section class="cards">...</section>
    <section class="charts">...</section>
    <section class="table">...</section>
  </main>
</div>

Checkpoint 1 — Layout Verification: Tunjuk layout dashboard anda pada pengajar. Pastikan responsive (nampak ok di phone dan desktop). Jangan teruskan sehingga layout diluluskan.

4

Connect ke Supabase

45 minit

Ini adalah langkah paling penting — sambungkan dashboard anda ke pangkalan data sebenar. Anda akan guna Supabase sebagai backend.

Langkah:

Pergi ke supabase.com dan login (atau buat akaun percuma)
Buat projek baru — tunggu database siap (1-2 minit)
Pergi ke SQL Editor dan create table berdasarkan model data anda
Dapatkan Project URL dan Anon Key dari Settings -> API
Masukkan data contoh (seed data) untuk testing

"Saya ada projek Supabase baru. Saya nak buat table untuk [Inventory Tracker] dengan columns: id (uuid, default gen_random_uuid()), name (text), quantity (integer), category (text), price (decimal), created_at (timestamp, default now()). Berikan saya SQL untuk create table dan insert 5-10 data contoh."

Connect JavaScript ke Supabase:

"Saya ada dashboard [Idea Board] dalam HTML. Saya nak sambungkan ke Supabase. Projek URL saya: [URL], Anon Key: [KEY]. Tulis JavaScript untuk: 1. Initialize supabase client 2. Fetch semua ideas dari table ideas 3. Render ke dalam card grid Guna CDN supabase-js (versi 2)."

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script>
  const supabaseUrl = 'https://your-project.supabase.co';
  const supabaseKey = 'your-anon-key';
  const supabase = supabase.createClient(supabaseUrl, supabaseKey);

  async function loadData() {
    const { data, error } = await supabase
      .from('items')
      .select('*')
      .order('created_at', { ascending: false });
    if (error) console.error('Error:', error);
    else renderData(data);
  }
  loadData();
</script>

Checkpoint 2 — Data Connection: Buka console browser (F12). Anda sepatutnya lihat data dari Supabase. Kalau error, semak URL dan Key, pastikan table wujud, dan semak RLS policies. Tunjuk pengajar sebelum sambung.

5

Tambah Search & Filter

25 minit

Sekarang data sudah dipaparkan, tiba masa untuk tambah interaktiviti. Pengguna boleh mencari dan menapis data.

"Saya ada dashboard [Contact Manager] yang display contacts dari Supabase. Tambah: 1. Search bar di atas table — bila taip, table filter ikut nama atau email 2. Dropdown filter ikut company 3. Semua filter berfungsi tanpa reload halaman Ini JavaScript saya sekarang: [paste current JS code]"

Tips Search & Filter:

Guna input event untuk search — filter masa taip
Case-insensitive search guna .toLowerCase()
Combine multiple filters (search + category + date range)
Tunjuk "No results" message bila data tak jumpa
Reset button untuk clear semua filter

// Contoh fungsi filter
function filterData(data, searchTerm, category) {
  return data.filter(item => {
    const matchSearch = !searchTerm ||
      item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.email.toLowerCase().includes(searchTerm.toLowerCase());
    const matchCategory = !category || item.category === category;
    return matchSearch && matchCategory;
  });
}

6

Data Visualization dengan Charts

35 minit

Dashboard tak lengkap tanpa visualisasi data. Anda akan guna Chart.js — tapi anda tak perlu belajar library ni. AI akan handle semuanya.

Jenis Chart Yang Boleh Dibina:

Bar Chart — perbandingan antara kategori (contoh: expense ikut kategori)
Line Chart — trend dari masa ke masa (contoh: expense bulanan)
Pie/Doughnut Chart — pecahan mengikut kategori (contoh: peratusan setiap kategori)

"Saya nak tambah Chart.js ke dashboard [Expense Tracker]. Saya ada data expenses dari Supabase dalam array: [{category: 'Makanan', amount: 100, date: '2024-01-01'}, ...]. Guna CDN Chart.js versi 4. Bina: 1. Bar chart — jumlah perbelanjaan ikut kategori 2. Line chart — trend perbelanjaan bulanan (guna date) 3. Pie chart — pecahan peratus ikut kategori Semua chart guna dark theme (background transparent, text putih, warna-warna terang)."

Tips: Rujuk Chart Guide untuk prompt templates yang lebih detail untuk setiap jenis chart. Ada contoh bar, line, pie, dan table dengan sorting.

Checkpoint 3 — Charts Verification: Tunjuk dashboard dengan chart yang menggunakan data SEBENAR dari Supabase (bukan data tiruan). Pastikan chart responsive dan label jelas.

7

User Roles — Admin vs Regular User

25 minit

Tambah konsep user roles — bukan semua orang boleh edit data. Admin boleh tambah, edit, dan delete. Regular user hanya boleh lihat.

Cara Ia Berfungsi:

Guna Supabase Auth untuk login (email/password)
Table profiles dengan column role ('admin' atau 'user')
Guna Row Level Security (RLS) di Supabase
Frontend semak role dan tunjuk/sembunyi butang edit/delete

"Saya nak tambah user roles ke dashboard [Idea Board]. Guna Supabase Auth. 1. Setup table profiles dengan column: id (uuid, references auth.users), role (text, default 'user') 2. Signup page — email + password 3. Login page — email + password 4. RLS policy: admin boleh INSERT/UPDATE/DELETE, user biasa hanya SELECT 5. Frontend: kalau role=admin, tunjuk butang edit/delete. Kalau user biasa, sembunyi. Saya guna supabase-js CDN versi 2."

Perhatian: Setup RLS boleh jadi rumit. Jangan putus asa — cuba langkah demi langkah. Guna Supabase dashboard untuk test RLS policies sebelum integrate ke frontend.

8

Real-Time Updates

25 minit

Ini adalah "wow factor" dashboard anda — data berubah secara automatik tanpa perlu refresh halaman. Bayangkan seorang pengguna tambah item baru, dan semua orang nampak perubahan tu serta-merta.

Macam Mana Real-Time Berfungsi:

Supabase ada Realtime feature — ia subscribe kepada perubahan dalam database
Bila ada INSERT, UPDATE, atau DELETE, Supabase hantar event ke browser
JavaScript dengar event tu dan update UI secara automatik

"Saya nak tambah real-time updates ke dashboard [Inventory Tracker]. Guna supabase-js channel subscription. Bila ada data baru di table items (INSERT/UPDATE/DELETE), dashboard saya kena update automatik tanpa refresh. Ini code saya sekarang: [paste current JS]. Saya guna CDN supabase-js versi 2."

// Contoh real-time subscription
const channel = supabase
  .channel('items-changes')
  .on(
    'postgres_changes',
    { event: '*', schema: 'public', table: 'items' },
    (payload) => {
      console.log('Change received!', payload);
      loadData(); // Re-fetch and re-render
    }
  )
  .subscribe();

Wow moment: Buka dashboard di dua tab browser. Tambah data di satu tab — lihat tab lain update automatik. Magic!

9

Polish, Testing & Final Touch

25 minit

Dashboard dah hampir siap! Sekarang masa untuk polish — jadikan ia profesional dan pastikan semua berfungsi dengan baik.

Final Testing Checklist:

☐ Semua halaman boleh diakses dari sidebar
☐ Data dari Supabase display dengan betul
☐ Search dan filter berfungsi
☐ Charts render dengan data sebenar
☐ Admin vs user view berbeza (kalau ada)
☐ Real-time updates berfungsi
☐ Responsive — nampak ok di desktop dan mobile
☐ Tiada console errors (F12 -> Console)
☐ Loading indicator semasa fetch data
☐ Error handling — kalau data gagal load, tunjuk mesej

"Saya nak polish dashboard [Contact Manager] saya. Tolong: 1. Tambah loading spinner semasa data di-fetch dari Supabase 2. Tambah animasi fade-in untuk cards dan table rows 3. Responsive — pastikan sidebar jadi collapsible di phone 4. Error handling — kalau gagal fetch data, tunjuk mesej 'Gagal memuatkan data' 5. Tambah hover effects pada cards dan buttons"

Checkpoint Akhir — Final Review: Tunjuk dashboard lengkap pada pengajar. Cuba semua fitur. Buka console untuk semak error. Test pada skrin kecil. Bila lulus, TAHNIAH! Anda telah menyelesaikan projek Capstone!

🎉

Tahniah! Anda Sudah Selesai!

CAPSTONE COMPLETE

Anda telah berjaya membina dashboard full-stack yang lengkap dengan:

🌐

Supabase Database

📊

Data Charts

🔓

Real-Time Updates

🛡

User Roles

Dari zero kepada full-stack developer dengan AI!

Jangan lupa kongsikan dashboard anda dengan rakan-rakan. Anda telah mencapai sesuatu yang hebat!