Modul Pelajar — Product Polishing

Perjalanan Anda — Hampir Sampai ke Garisan Penamat

Selepas 14 fasa membina, inilah saatnya projek anda bersedia untuk dilancarkan. Setiap butiran kecil yang anda polish hari ini akan membuatkan pengunjung pertama berkata "WOW, ini professional betul!" Anda bukan lagi seorang pelajar — anda seorang pencipta yang akan melancarkan produk ke dunia nyata.

Dalam modul ini, anda akan melalui 4 bahagian utama polishing:

1 Visual Polish (15 langkah) 2 Security Audit (10 langkah) 3 SEO Setup (8 langkah) 4 QA Sweep (7 langkah)

Jumlah: 40 langkah polish. Setiap langkah akan membuat projek anda lebih baik. Jangan skip — lakukan ikut urutan.

1 Visual Polish (15 Langkah)

Visual polish adalah tentang butiran. Orang judge projek anda dalam 5 saat pertama. Pastikan 5 saat itu meyakinkan.

Langkah 1: Responsive Test — 375/768/1024/1440

Buka Chrome DevTools (F12) -> Device Toolbar (Ctrl+Shift+M). Test projek anda di 4 viewport:

Prompt: "Check responsive layout untuk page saya.
Senarai isu responsive yang saya nampak di:
- 375px (mobile): [senarai isu]
- 768px (tablet): [senarai isu]
- 1024px (desktop): [senarai isu]
- 1440px (wide): [senarai isu]
Bagi saya CSS fixes untuk setiap isu."

Responsive: Layout nampak sempurna di 375/768/1024/1440px — tiada overflow, tiada broken grid.

Langkah 2: Color Contrast Check — WCAG AA 4.5:1

Gunakan AI audit atau WebAIM Contrast Checker untuk semak contrast ratio. Text gelap atas background cerah (atau sebaliknya) mesti至少有 4.5:1.

Prompt: "Audit color contrast untuk page saya.
Guna WCAG AA standard (4.5:1 untuk normal text).
Senarai color pairs yang FAIL dan cadangan ganti."

Contrast: Semua text pairs pass WCAG AA 4.5:1.

Langkah 3: Font Hierarchy Audit

Pastikan ada hierarchy jelas: Heading (bold, besar) -> Subheading (medium) -> Body (regular).

Prompt: "Audit font hierarchy untuk page saya.
Check: H1, H2, H3, H4, body, small text.
Cadangkan font sizes yang konsisten:
H1: clamp(2rem, 5vw, 3rem)
H2: clamp(1.5rem, 3vw, 2rem)
Body: 1rem / 16px"

Font: Hierarchy jelas — H1 > H2 > H3 > Body, size konsisten.

Langkah 4: Spacing Consistency — 4/8/16/24/32 Grid

Guna sistem spacing yang konsisten: margin dan padding dalam gandaan 4px atau 8px.

Prompt: "Standardize spacing untuk page saya.
Guna spacing grid: 4px, 8px, 16px, 24px, 32px, 48px, 64px.
Check: padding dalam cards, gap antara sections,
margin antara headings dan content."

Spacing: Padding, margin, gap konsisten — guna sistem 4/8/16/24/32.

Langkah 5: Animation Polish — ease-in-out, max 300ms

Animasi yang baik adalah subtle. Max 300ms, guna ease-in-out, dan hanya pada hover/focus/transition.

Prompt: "Polish animations untuk page saya.
Tambah transition pada:
- Semua button: hover scale 1.02, 200ms ease-in-out
- Cards: hover lift 4px, 300ms ease-in-out
- Links: color transition 200ms"

Animation: Transition konsisten, ease-in-out, max 300ms.

Langkah 6: Loading State — Skeleton / Spinner

Content yang ambil masa untuk load kena ada placeholder supaya page tak nampak kosong.

Prompt: "Tambah loading state untuk page saya.
Untuk setiap async content, tambah:
1. Skeleton shimmer animation (kotak kelabu berkilau)
2. Atau spinner / loading circle
3. Pastikan loading state hilang bila content dah siap"

Loading: Skeleton/spinner untuk semua async content.

Langkah 7: Empty State — "Tiada Data" Message

Bila tiada data untuk display, tunjuk mesej yang helpful, bukan page kosong.

Prompt: "Tambah empty state component untuk page saya.
Kalau tiada data, tunjuk:
1. Icon (relevant)
2. Message: 'Tiada data lagi'
3. Subtitle: 'Mula dengan menambah [item] pertama anda'
4. CTA button: 'Tambah Baru'"

Empty: "Tiada data" message dengan ikon dan CTA untuk semua list/table.

Langkah 8: Hover States — Semua Interactive Elements

Setiap button, link, card, dan interactive element perlu ada hover state yang jelas.

Prompt: "Tambah hover states untuk semua interactive elements:
- Buttons: bg change + slight scale
- Links: underline atau color change
- Cards: border highlight + shadow lift
- Icons: color change + subtle scale"

Hover: Semua interactive element ada hover state — button, link, card, icon.

Langkah 9: Focus States — Keyboard Outline

Pastikan user yang guna keyboard (Tab navigation) nampak focus indicator yang jelas.

Prompt: "Tambah focus states untuk accessibility:
- Input fields: focus ring color cyan
- Buttons: focus outline 2px solid cyan
- Links: focus underline + color
- Pastikan :focus-visible digunakan untuk keyboard users"

Focus: Keyboard outline visible untuk semua input, button, link.

Langkah 10: Theme Consistency — Dark/Light

Jika projek ada dark/light toggle, pastikan kedua-dua theme lengkap dan konsisten.

Prompt: "Check dark/light theme consistency.
Senarai element yang perlu warna berbeza untuk light theme:
- Backgrounds
- Text colors
- Card borders
- Shadows"

Theme: Dark/light theme konsisten — semua element ada kedua-dua variasi.

Langkah 11: Image Optimization — Alt, Lazy, WebP

Imej perfukan 3 perkara: alt text (accessibility), lazy loading (performance), format WebP (smaller size).

Prompt: "Optimize semua imej dalam page saya: 1. Tambah alt text descriptive pada setiap 2. Tambah loading='lazy' untuk below-fold images 3. Suggest convert ke WebP format 4. Check image dimensions — jangan oversized"

Images: Alt text ada, lazy loading on, format optimised.

Langkah 12: Typography — Line-Height, Max-Width

Body text kena selesa dibaca: line-height 1.6-1.8, max-width 70ch (approx 700px).

Prompt: "Improve typography readability:
- Body text: line-height 1.7, max-width 70ch
- Headings: line-height 1.2
- List items: line-height 1.6
- Pastikan text tak terlalu lebar (hard to read)"

Typography: line-height 1.6-1.7, max-width 70ch untuk body text.

Langkah 13: Shadow Layers — Subtle Depth

Gunakan shadow untuk memberi depth pada cards, modals, dan dropdown. Tapi subtle — jangan overdo.

Prompt: "Add shadow system untuk page saya:
- Cards: box-shadow 0 4px 24px rgba(0,0,0,0.4)
- Hover: box-shadow 0 8px 32px rgba(0,0,0,0.5)
- Modals: box-shadow 0 20px 60px rgba(0,0,0,0.6)
- Dropdowns: box-shadow 0 8px 24px rgba(0,0,0,0.4)"

Shadow: Subtle depth pada cards, modals, dropdowns.

Langkah 14: Border Radius — Consistent

Gunakan border-radius yang konsisten untuk semua element. Cadangan: cards 12px, buttons 8px, inputs 6px.

Prompt: "Standardize border-radius:
- Cards: 12px
- Buttons: 8px
- Input fields: 6px
- Badges: 50px (pill)
- Images: 8px"

Radius: Border-radius konsisten untuk semua element.

Langkah 15: Print CSS — Hide Nav, A4 Layout

CSS print penting untuk user yang nak print atau simpan sebagai PDF. Sembunyikan navigation, optimize layout untuk A4.

Prompt: "Tambah print CSS:
@media print {
  /* Hide navigation, sidebar, buttons */
  nav, .sidebar, .btn, .back-top { display: none; }
  /* A4 layout */
  body { background: white; color: black; }
  /* Break pages dengan baik */
  .section { page-break-inside: avoid; }
  /* Links tunjuk URL */
  a[href]::after { content: ' (' attr(href) ')'; }
}"

Print: CSS print siap — nav hidden, A4 friendly, links show URL.

Visual Complete: Jika anda sampai sini, projek anda sudah nampak 10x lebih profesional. 15/15 checklist visual selesai.

2 Security Audit (10 Langkah)

Security audit adalah tentang melindungi data pengguna anda. Jangan tunggu sampai terjadi breach baru nak peduli.

Langkah 1: Scan API Keys — Check Semua Fail

API keys yang exposed dalam public repository adalah risiko #1. Guna AI untuk scan.

Prompt: "Scan semua fail dalam project saya untuk exposed API keys.
Cari pattern:
- 'sk-' (Stripe secret key)
- 'pk_' (Stripe publishable key)
- 'supabase_key' atau 'anon key'
- 'password' atau 'secret'
- 'api_key' atau 'apikey'
Senarai semua fail yang mengandungi potential secrets."

API Keys: Tiada exposed keys dalam kod — semua dalam .env atau vars.

Langkah 2: RLS Enforced — Test dengan 2 User Berbeza

Row Level Security dalam Supabase mesti di-enable. Test: user A cuba baca data user B.

Prompt: "Test RLS policies untuk Supabase table saya.
1. Login sebagai user A, create data
2. Buka tab incognito, login sebagai user B
3. Cuba access data user A
4. Kalau boleh access, RLS TIDAK berfungsi!
Fix: 'Enable RLS dan buat policy WHERE auth.uid() = user_id'"

RLS: Row Level Security di-enable untuk semua tables — test dengan 2 users pass.

Langkah 3: Auth Redirect URLs — Configured?

Pastikan Supabase Auth redirect URLs menunjuk ke domain yang betul, bukan localhost (untuk production).

Prompt: "Check Supabase Auth configuration:
Site URL: [domain production]
Redirect URLs: termasuk semua halaman yang guna auth
Pastikan localhost ada untuk development
Jangan ada wildcard * yang tak perlu"

Auth URLs: Redirect URLs configured dengan betul untuk production.

Langkah 4: CORS Allowed Origins — Spesifik, Bukan *

CORS yang guna wildcard * adalah security risk. Guna origin yang spesifik.

Prompt: "Check CORS configuration saya.
Pastikan:
1. Access-Control-Allow-Origin: [domain spesifik]
2. BUKAN Access-Control-Allow-Origin: *
3. Kalau guna Supabase, check CORS settings di dashboard
4. Multiple origins guna array, bukan wildcard"

CORS: Origins spesifik — guna domain sebenar, bukan *.

Langkah 5: HTTPS Enforced — Redirect HTTP ke HTTPS

Cloudflare Pages auto-sediakan HTTPS, tapi pastikan HTTP redirect aktif.

HTTPS: HTTP redirect ke HTTPS — SSL aktif, tiada mixed content.

Langkah 6: XSS Check — User Input Sanitized?

Cross-Site Scripting (XSS) membenarkan attacker inject code melalui input form. Pastikan semua input disanitize.

Prompt: "Audit XSS vulnerability untuk page saya.
Check:
1. Semua input form — adakah innerHTML digunakan?
2. Kalau guna innerHTML, gantikan dengan textContent
3. URL parameters — adakah direct inject ke DOM?
4. User-generated content — sanitize sebelum display"

XSS: Semua user input sanitized — tiada innerHTML untuk user content.

Langkah 7: .gitignore Audit — Secrets Tertinggal?

Check sama ada .env, API keys, atau config files yang mengandungi secrets tertinggal dalam git tracking.

Prompt: "Audit .gitignore saya.
Pastikan files berikut ADA dalam .gitignore:
- .env
- .env.local
- *.key
- secrets.json
- config.js (kalau ada keys)
- node_modules/
Check: 'git status --untracked-files=normal'
Ada files yang patutnya di-ignore tapi tak di-ignore?"

.gitignore: .env, API keys, secrets dalam .gitignore — tak tertinggal.

Langkah 8: Rate Limiting — API Endpoints Protected?

API endpoints yang tiada rate limiting boleh kena spam atau DOS attack. Untuk Supabase, guna RLS dan bucket limits.

Prompt: "Suggest rate limiting untuk API endpoints saya:
Authentication: max 5 attempts/min
API endpoints: max 100 req/min per IP
File upload: max 10MB per file
Guna Cloudflare rate limiting atau Supabase RLS"

Rate Limit: API endpoints dilindungi dengan rate limiting.

Langkah 9: Security Headers — CSP, X-Frame, X-Content-Type

Security headers melindungi dari pelbagai jenis attack. Cloudflare Pages boleh setup headers.

Prompt: "Generate security headers untuk page saya:
Content-Security-Policy (CSP)
X-Frame-Options: DENY (cegah clickjacking)
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy (kawal API access)
Bagi saya format untuk _headers file (Cloudflare Pages)"

Headers: Security headers configured — CSP, X-Frame, X-Content-Type.

Langkah 10: Dependencies — npm audit clean?

Kalau projek guna npm/yarn, jalankan npm audit untuk check vulnerabilities dalam dependencies.

Prompt: "Run npm audit dan bagi saya report.
npm audit
npm audit fix (untuk auto-fix low severity)
npm audit fix --force (untuk major updates)
Senarai mana yang tak boleh auto-fix
Suggest alternatif untuk packages yang vulnerable"

Dependencies: npm audit clean — tiada high/critical vulnerabilities.

Security Complete: 10/10 langkah security selesai. Projek anda kini lebih selamat daripada 90% projek lain.

3 SEO Setup (8 Langkah)

SEO adalah cara paling murah untuk dapatkan traffic percuma. Setup sekali, dapat manfaat bertahun-tahun.

Langkah 1: Title Tag — 50-60 Char, Keyword Depan

Title tag adalah perkara pertama yang orang nampak di Google. Mesti ada primary keyword di depan.

Prompt: "Generate SEO title tag untuk page saya.
Rules:
- 50-60 characters
- Primary keyword di MUKA (sebelah kiri)
- Include brand name di hujung
- Unique untuk setiap page
Current page: [nama/description page]"

Title: 50-60 char, keyword depan, brand di hujung.

Langkah 2: Meta Description — 150-160 Char, CTA

Meta description adalah "iklan" page anda di Google搜索结果. Mesti menarik dan ada call-to-action.

Prompt: "Generate meta description untuk page saya.
Rules:
- 150-160 characters
- Include primary keyword
- Include CTA (Try now, Learn more, Get started)
- Different for each page
- Don't use quotes in the description"

Description: 150-160 char, keyword included, ada CTA.

Langkah 3: OG Image — 1200x630, Share Preview

OG image adalah gambar yang muncul bila URL dikongsi di WhatsApp, Facebook, Telegram, etc.

Prompt: "Generate OG tags untuk page saya.
Rules:
- og:image: 1200x630 pixels
- og:title: [title dengan keyword]
- og:description: [description 160 char]
- og:type: website
- og:url: [URL penuh]
- tw:card: summary_large_image

Test: Paste URL kat WhatsApp/Facebook.
Preview keluar dengan betul? Kalau tak, guna
Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/"

OG: OG image 1200x630, social preview berfungsi di WhatsApp/Facebook.

Langkah 4: Sitemap.xml — Generate, Submit ke Google

Sitemap membantu Google mengenal pasti semua pages dalam website anda.

Prompt: "Generate sitemap.xml untuk website saya.
Include:
- Semua public pages
- Priority untuk setiap page (1.0 untuk homepage)
- Change frequency (weekly/monthly)
- Last modified date

Exclude:
- Admin pages
- Dashboard pages (protected)
- API endpoints

Then submit ke Google Search Console."

Sitemap: sitemap.xml di-generate, di-submit ke Google Search Console.

Langkah 5: Robots.txt — Block Admin, Allow All

Robots.txt memberitahu Google page mana yang boleh di-crawl dan mana yang tidak.

Prompt: "Generate robots.txt untuk website saya:
User-agent: *
Allow: /
Disallow: /admin
Disallow: /dashboard
Disallow: /api
Sitemap: https://[domain]/sitemap.xml"

Robots: robots.txt — allow all, block admin/api pages.

Langkah 6: Schema Markup — JSON-LD

Schema markup membantu Google memahami content page anda dengan lebih baik. Guna JSON-LD format.

Prompt: "Generate JSON-LD schema markup untuk page saya.
Pilih schema type: Article / Product / Organization / SoftwareApplication / WebPage

Include:
- @context: https://schema.org
- @type: [type]
- name: [nama]
- description: [description]
- url: [URL]
- image: [OG image URL]"

Schema: JSON-LD markup ada — [Article/Product/Organization].

Langkah 7: Heading Hierarchy — H1 > H2 > H3

Pastikan heading structure betul: H1 (1 sahaja) -> H2 -> H3. Jangan skip level.

Prompt: "Audit heading hierarchy untuk page saya.
Check:
Mesti ada EXACTLY 1 H1
H2 datang SELEPAS H1
H3 datang SELEPAS H2
Jangan skip H1 -> H3 tanpa H2
Jangan guna heading untuk styling (guna CSS instead)"

Headings: H1 > H2 > H3 hierarchy betul — 1 H1 sahaja, tiada skip.

Langkah 8: Alt Text — Semua Imej

Setiap imej perlu ada alt text yang descriptive. Penting untuk accessibility dan SEO.

Alt: Semua imej ada alt text descriptive — tiada alt="" kosong untuk informative images.

SEO Complete: 8/8 langkah SEO selesai. Projek anda kini boleh ditemui di Google dan social media!

4 QA Sweep (7 Langkah)

QA sweep adalah langkah terakhir sebelum launch. Matlamat: zero errors, zero broken links, zero performance issues.

Langkah 1: Console — 0 Errors

Buka Console tab dalam Chrome DevTools (F12). Mesti ada 0 errors. Warning pun minima.

Prompt: "Here are my console errors: [paste errors].
Explain each error:
1. Apa punca error ini?
2. Macam mana nak fix?
3. Adakah error ini kritikal?
Bagi saya specific code fix untuk setiap error."

Console: 0 errors — tiada JS/CSS errors dalam console.

Langkah 2: Links — Semua Berfungsi

Check semua links dalam projek — internal, external, anchor. Pastikan tiada broken 404.

Prompt: "Check semua links dalam page saya.
Guna Playwright atau manual check:
Internal links — semua redirect ke page yang betul?
External links — semua URL masih valid?
Anchor links (#id) — element wujud?
Button links — onClick function wujud?
Nav links — semua menu item berfungsi?"

Links: Semua links berfungsi — 0 broken links, 0 redirect loops.

Langkah 3: Forms — Validation Test

Test semua forms dengan pelbagai scenarios: empty submit, invalid email, XSS attempt, very long input.

Prompt: "Test form validation untuk page saya.
Scenarios:
1. Submit kosong -> mesti ada error message
2. Email invalid -> "Invalid email format"
3. Password too short -> "Minimum 6 characters"
4. XSS attempt: 
   -> Mesti sanitize / block
5. Very long input (1000+ chars) -> mesti handle
Report: Pass/Fail untuk setiap scenario"

Forms: Validation test pass — empty, invalid, XSS attempt, long input.

Langkah 4: Lighthouse — Performance >90, Accessibility >90

Lighthouse adalah tool Google untuk mengukur kualiti website. Target minimum: Performance >90, Accessibility >90.

Prompt: "Run Lighthouse audit dan suggest fixes.
Current scores:
- Performance: [score]
- Accessibility: [score]
- Best Practices: [score]
- SEO: [score]

Specific fixes needed untuk setiap kategori yang <90:
[Include Lighthouse suggestions here]

Bagi saya specific code changes untuk setiap issue."

Lighthouse: Performance >90, Accessibility >90, Best Practices >90, SEO >90.

Langkah 5: Load Time — <3 Saat

Page mesti load dalam <3 saat. Kalau lebih, optimize.

Prompt: "Optimize page load time.
Current load time: [saat]
Suggestions:
1. Image compression — convert to WebP, resize
2. Code minification — minify CSS/JS
3. Font optimization — subset fonts, preload
4. Lazy loading — images below fold
5. Reduce render-blocking resources
6. Enable browser caching"

Load time: <3 saat — page loading pantas.

Langkah 6: Cross-Browser — Chrome + Safari + Firefox

Test projek di 3 browser utama. CSS dan JS kadang berfungsi berbeza antara browser.

Prompt: "Check cross-browser compatibility.
Test di:
1. Google Chrome — layout OK?
2. Safari (atau Safari di BrowserStack) — CSS OK?
3. Firefox — JS berfungsi?
Report any differences dan suggest fixes.
Common issues: Flexbox gap (Safari), Grid (older Firefox), CSS variables"

Cross-browser: Chrome + Safari + Firefox — semua berfungsi dengan betul.

Langkah 7: Mobile Real Device — Bukan Emulator

Test di phone sebenar (bukan Chrome emulator). Kadang apa yang ok di emulator broken di real device.

Prompt: "Check mobile experience di real device.
Arahan:
1. Buka URL di phone (guna QR code generator)
2. Test:
   - Scroll — smooth?
   - Buttons — cukup besar untuk tap (min 44px)?
   - Text — readable tanpa zoom?
   - Forms — keyboard tak tutup content?
   - Touch targets — spacing cukup?
3. Screenshot dan report issues"

Mobile: Test di real device — layout, touch targets, forms, semua OK.

QA Complete: 7/7 langkah QA selesai. Projek anda kini bersedia untuk launch ke dunia nyata. Ambil masa untuk hargai pencapaian ini — dari kosong hingga ke produk yang telah dipolish dengan 40 langkah quality assurance.

Ringkasan Akhir

Anda Telah Menyelesaikan 40 Langkah Polish!

Projek anda kini bukan sekadar "berfungsi" — ia telah dipolish secara profesional. Visual yang memukau, security yang kukuh, SEO yang optimised, dan kualiti yang terjamin. Anda layak untuk rasa bangga.

Bahagian	Langkah Selesai	Status
Visual Polish	15/15	✅ Selesai
Security Audit	10/10	✅ Selesai
SEO Setup	8/8	✅ Selesai
QA Sweep	7/7	✅ Selesai

🚀 READY TO LAUNCH

Deploy final, share dengan dunia, dan raikan pencapaian anda!