NexStoria — Struktur Penuh Platform

🌟

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
🏠 Homepage	Landing page NexStoria Malaysia — stats, cara guna, NexCoins, testimoni	Fasa 1 ✅
🔍 Explore Page	Browse cerita — Jom Baca, Penulis Pilihan, Buku Baru, Pembaca Pilihan	Fasa 1 ✅
📖 Reader Page	Webtoon scroll + panel nav + moral + tamat screen + reaction bar	Fasa 1 ✅
🎁 Gift / Tip System	Modal tip NexCoins kepada penulis terus dari halaman baca	Fasa 1 ✅
📝 Submit Story	6 langkah: maklumat, kulit buku, sinopsis, panel, pengajaran, tetapan	Fasa 1 ✅
🔐 Auth System	Login/daftar dual panel, role selector, parental consent, social login	Fasa 1 ✅
⚙️ Admin Dashboard	5 tab — Dashboard, Pengguna, Buku & Moderasi, Leaderboard, Notifikasi	Fasa 1 ✅
✍️ Author Profile	Dual mode Penulis/Pembaca — lencana, sijil, dompet NexCoins	Fasa 1 ✅
🌐 Author Public Profile	Profil awam penulis boleh dikongsi — buku, particle banner, skeleton load	Fasa 1 ✅
🎮 Reader Profile	5 tab — Library, Avatar & Koleksi, Pencapaian, Penulis Diikuti, Sijil	Fasa 1 ✅
📧 Email Templates	3 template: Lulus, Tolak, Ringkas — dihantar via Supabase Edge Function	Fasa 1 ✅
⚙️ Edge Function	send-writer-email — Deno/TypeScript, Resend API, deploy ke Supabase	Fasa 1 ✅
🪙 NexCoins System	Bintang ⭐ + NexCoins 🪙 — earn semasa baca, guna untuk tip/withdraw	Fasa 1 ✅
🏅 Sijil Digital	Sijil penulis & pembaca boleh dijana dan dihantar fizikal	Fasa 1 ✅
🤖 AI Translate	Terjemahan automatik cerita ke 13+ bahasa	Fasa 2
🎧 Audio Narration	Upload & dengar bacaan cerita	Fasa 2
📊 Analytics Penulis	Stats reads, negara, panel popular, pertumbuhan pengikut	Fasa 2
📱 Mobile App	React Native app iOS + Android	Fasa 2
🏆 Leaderboard Malaysia	Top penulis & cerita paling popular di Malaysia	Fasa 3
🌍 Peta Dunia	Visualisasi negara asal semua cerita interaktif	Fasa 3
🏫 Partnership Sekolah	Program khas untuk sekolah & perpustakaan	Fasa 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