Where the Next Generation of Stories Begins.
📋 Dokumen Struktur Penuh Platform
Panduan Pembangunan NexStoria — Versi 3.0
📖 Platform Cerita Kanak-kanak 🎨 Gaya Webtoon 🇲🇾 Fokus Malaysia 🤖 AI Translate 🇲🇾 Melayu + English
Dikemaskini Mac 2026 · NexStoria v3 Platform Blueprint
🌟

Visi & Konsep NexStoria

Asas dan identiti platform

🎯 Misi
Platform cerita kanak-kanak bergaya Webtoon No. 1 di Malaysia
🇲🇾 Skop
Malaysia — cerita dalam Bahasa Melayu & English, fokus kanak-kanak tempatan
🎨 Format
Webtoon-style scroll menegak — ilustrasi + teks setiap panel
🤖 Teknologi
AI Translate automatik untuk semua cerita ke pelbagai bahasa
🇲🇾 Bahasa Platform
Bahasa Melayu + English — platform untuk kanak-kanak Malaysia
🛡️ Keselamatan
100% selamat untuk kanak-kanak — content moderation ketat
👥

Pengguna Utama NexStoria

4 jenis pengguna yang berbeza keperluan

👧
Kanak-kanak
Pembaca utama, umur 3–12 tahun
✍️
Penulis
Submit & kongsi cerita dalam BM & English
👨‍👩‍👧
Ibu Bapa
Pilih & pantau cerita untuk anak
🏫
Guru
Guna cerita untuk aktiviti kelas
📄

Senarai Halaman Platform

Semua halaman yang perlu dibina untuk NexStoria

✅ Sudah Dibina — v3 (12 Fail)

✅ SIAP
🏠 Homepage / Landing Page
index.html
  • Hero banner + NexStoria Malaysia branding
  • Stats strip (negara, penulis, cerita)
  • Seksyen Untuk Siapa, Cara Guna, NexCoins
  • Testimoni + CTA + Footer
✅ SIAP
🔍 Explore / Browse Page
nexstoria-explore.html
  • Search bar real-time cari tajuk cerita
  • Filter scroll mendatar (Kategori, Umur, Negara)
  • Seksyen: Jom Baca, Penulis Pilihan, Buku Baru, Pembaca Pilihan
  • Skeleton loading + auth-aware navbar
✅ SIAP
📖 Reader Page (Baca Cerita)
nexstoria-reader.html
  • Scroll menegak Webtoon + panel nav strip
  • Moral lesson + Tamat screen + Related stories
  • Reaction bar (bintang, like, gift) + Progress bar
  • Gift modal — tip NexCoins kepada penulis
  • Font panel + Language switcher
✅ SIAP
📝 Submit Story (Tulis Cerita)
nexstoria-submit.html
  • 6 langkah: Maklumat Asas → Kulit Buku → Sinopsis → Panel Cerita → Pengajaran → Tetapan
  • Upload cover: emoji+warna atau gambar sendiri
  • Upload panel gambar (Webtoon style)
  • Autosave toast + Progress bar atas
✅ SIAP
🔐 Login / Register Page
nexstoria-login.html
  • Panel kiri: Branding + hero visual
  • Panel kanan: Tab Login / Daftar / Lupa Kata Laluan
  • Role selector: Pembaca / Penulis
  • Parental consent (bawah 13 tahun), Social login Google/Facebook
✅ SIAP
⚙️ Admin Dashboard
nexstoria-admin.html
  • 5 tab: Dashboard, Pengguna, Buku & Moderasi, Leaderboard, Notifikasi
  • Global stats row + category breakdown
  • Recent writer requests + user table
  • Top authors, super readers, most read books
  • Compose & preview notifikasi push
✅ SIAP
✍️ Author Profile (Profil Penulis)
nexstoria-author-profile.html
  • Dual mode: Mod Penulis ↔ Mod Pembaca (toggle)
  • Writer mode: stats, lencana penulis, sijil, penghantaran sijil fizikal
  • Reader mode: dompet NexCoins, pencapaian pembaca
  • Banner & nav bertukar mengikut mod
✅ SIAP
🌐 Author Public Profile
nexstoria-author-public.html
  • Profil awam penulis — boleh dikongsi
  • Particle banner + profile card
  • Seksyen buku penulis + skeleton loading
  • Not found state + toast notification
✅ SIAP
🎮 Reader Profile Page
nexstoria-reader-profile.html
  • Bintang saya + Withdraw/Tebus modal
  • Level bar + stats + upgrade banner
  • 5 tab: Library, Avatar & Koleksi, Pencapaian, Penulis Diikuti, Sijil
  • Right sidebar + sijil modal
✅ SIAP
📧 Emel Kelulusan Penulis
nexstoria-email-lulus.html
  • Template HTML emel — penulis diluluskan
  • Header gradient hijau, CTA button, 3 perk penulis, tip
✅ SIAP
📧 Emel Penolakan Penulis
nexstoria-email-tolak.html
  • Template HTML emel — permohonan ditolak
  • Kotak sebab penolakan, apa boleh dilakukan, CTA masih boleh membaca
✅ SIAP
📧 Emel Ringkas
nexstoria-email-ringkas.html
  • Template HTML emel ringkas / notifikasi am
  • Header standard, badan, CTA, 3 perk, footer

⚙️ Backend / Edge Function (1 Fail)

⚙️ EDGE FUNCTION
📤 Send Writer Email (Supabase)
edge-function-send-writer-email.ts
  • Supabase Edge Function (Deno/TypeScript)
  • Hantar emel lulus/tolak kepada penulis via Resend API
  • 2 template: templateLulus() + templateTolak()
  • Deploy: supabase functions deploy send-writer-email

Senarai Fitur Utama

Semua ciri-ciri yang perlu ada di NexStoria

Fitur Keterangan Fasa
🏠 HomepageLanding page NexStoria Malaysia — stats, cara guna, NexCoins, testimoniFasa 1 ✅
🔍 Explore PageBrowse cerita — Jom Baca, Penulis Pilihan, Buku Baru, Pembaca PilihanFasa 1 ✅
📖 Reader PageWebtoon scroll + panel nav + moral + tamat screen + reaction barFasa 1 ✅
🎁 Gift / Tip SystemModal tip NexCoins kepada penulis terus dari halaman bacaFasa 1 ✅
📝 Submit Story6 langkah: maklumat, kulit buku, sinopsis, panel, pengajaran, tetapanFasa 1 ✅
🔐 Auth SystemLogin/daftar dual panel, role selector, parental consent, social loginFasa 1 ✅
⚙️ Admin Dashboard5 tab — Dashboard, Pengguna, Buku & Moderasi, Leaderboard, NotifikasiFasa 1 ✅
✍️ Author ProfileDual mode Penulis/Pembaca — lencana, sijil, dompet NexCoinsFasa 1 ✅
🌐 Author Public ProfileProfil awam penulis boleh dikongsi — buku, particle banner, skeleton loadFasa 1 ✅
🎮 Reader Profile5 tab — Library, Avatar & Koleksi, Pencapaian, Penulis Diikuti, SijilFasa 1 ✅
📧 Email Templates3 template: Lulus, Tolak, Ringkas — dihantar via Supabase Edge FunctionFasa 1 ✅
⚙️ Edge Functionsend-writer-email — Deno/TypeScript, Resend API, deploy ke SupabaseFasa 1 ✅
🪙 NexCoins SystemBintang ⭐ + NexCoins 🪙 — earn semasa baca, guna untuk tip/withdrawFasa 1 ✅
🏅 Sijil DigitalSijil penulis & pembaca boleh dijana dan dihantar fizikalFasa 1 ✅
🤖 AI TranslateTerjemahan automatik cerita ke 13+ bahasaFasa 2
🎧 Audio NarrationUpload & dengar bacaan ceritaFasa 2
📊 Analytics PenulisStats reads, negara, panel popular, pertumbuhan pengikutFasa 2
📱 Mobile AppReact Native app iOS + AndroidFasa 2
🏆 Leaderboard MalaysiaTop penulis & cerita paling popular di MalaysiaFasa 3
🌍 Peta DuniaVisualisasi negara asal semua cerita interaktifFasa 3
🏫 Partnership SekolahProgram khas untuk sekolah & perpustakaanFasa 3
🔄

Flow Submit & Publish Cerita

Perjalanan cerita dari penulis ke pembaca

✍️ Tulis Cerita
📋 Isi Maklumat
🖼️ Upload Cover
📜 Tambah Panel
👁️ Preview
🚀 Submit
🔍 Admin Review
🌏 Published! 🇲🇾
💻

Cadangan Tech Stack

Teknologi yang sesuai untuk membina NexStoria

⚛️
React / Next.js
Frontend — UI & halaman
🟢
Node.js / Express
Backend — API server
🔥
Supabase / Firebase
Database & Auth
☁️
Cloudinary
Simpan gambar & audio
🤖
Claude API / GPT
AI Translate & moderation
☁️
Cloudflare Pages
Hosting & deployment
🗺️

Roadmap Pembangunan

Pelan 3 fasa untuk melancarkan NexStoria

Fasa 1
MVP
🏗️ Asas Platform (1–2 bulan)
✅ Homepage · ✅ Explore Page · ✅ Reader Page + Gift System · ✅ Submit Story (6 langkah) · ✅ Auth System · ✅ Admin Dashboard (5 tab) · ✅ Author Profile (dual mode) · ✅ Author Public Profile · ✅ Reader Profile (5 tab) · ✅ NexCoins + Sijil Digital · ✅ Email Templates (3) · ✅ Edge Function Supabase
Fasa 2
Grow
🌱 Kembangkan Ciri (2–4 bulan)
AI Translate penuh · Audio Narration · Like & Bookmark · Analytics Penulis lanjutan · Search & Filter lanjutan · Mobile App (React Native)
Fasa 3
Scale
🚀 Skala Nasional & Persediaan Global (4–6 bulan)
Leaderboard nasional · Peta Malaysia interaktif · Notifikasi push · Analytics penulis · Program penulis berbayar · Partnership sekolah & perpustakaan Malaysia
🎨

Brand Identity NexStoria

Warna, fon, dan identiti visual

Palet Warna

Coral #FF6B6B
Lavender #A78BFA
Mint #06D6A0
Sun #FFD166
Ink #1A1A2E

Tipografi

Display / Logo
Baloo 2
Tajuk, logo, nombor
Body / UI
Nunito
Teks, label, butang
Dokumen ini adalah blueprint pembangunan NexStoria.
Simpan sebagai rujukan sepanjang projek ini dibina.