// platform architecture · webtoon-grade
NexStoria System Architecture
Where the Next Generation of Stories Begins. — Struktur sebenar NexStoria v3: 12 fail HTML, Supabase Edge Functions, NexCoins system, sijil digital, dan admin dashboard 5 tab. Ini yang startup buat — bukan sekadar HTML.
6
Layers
12
HTML Files
9
DB Tables
30+
API Routes
3
AI Services
System Architecture Overview
6 lapisan — dari browser pengguna hingga database & AI. Setiap lapisan ada fungsi tersendiri.
Layer 1 — Client Layer
Apa yang dilihat & digunakan oleh pengguna (browser & mobile app)
index.html (Landing)
nexstoria-explore.html
nexstoria-reader.html
nexstoria-submit.html
nexstoria-login.html
nexstoria-admin.html
nexstoria-author-profile.html
nexstoria-author-public.html
nexstoria-reader-profile.html
Webtoon Panel Renderer
Gift / NexCoins UI
Sijil Digital Canvas
Dual Mode Author UI
↕ HTTPS / REST API / WebSocket ↕
Layer 2 — API Gateway
Pintu masuk semua request — routing, auth check, rate limiting
Nginx / Cloudflare
JWT Auth Middleware
Rate Limiter
Request Router
CORS Handler
Load Balancer
↕ Internal Service Calls ↕
Layer 3 — Microservices
8 servis berasingan — setiap satu ada tugas tersendiri
Auth Service
Story Service
Panel Service
Author Profile Service
Reader Profile Service
NexCoins & Bintang Service
Gift / Tip Service
Sijil Digital Service
Media Upload Service
Email Service (Resend API)
Review / Moderation
Admin Notification Service
Analytics Service
↕ SQL / NoSQL Queries ↕
Layer 4 — Data Layer
Semua data disimpan — cerita, panel, pengguna, terjemahan
PostgreSQL (main DB)
Redis (cache & session)
Supabase (BaaS)
Cloudinary (images)
S3 / R2 (audio files)
ElasticSearch (search)
↕ API Calls ↕
Layer 5 — AI Layer
Terjemahan automatik, content moderation, dan cadangan cerita
Claude API (translate)
GPT-4 (fallback)
Content Safety API
Recommendation Engine
Text-to-Speech (TTS)
Image Moderation
↕ Cloud Services ↕
Layer 6 — Infrastructure
Platform hosting, monitoring, CI/CD, dan keselamatan
Cloudflare Pages (frontend)
Supabase Edge Functions
Cloudflare CDN
GitHub Actions CI/CD
Sentry (monitoring)
Uptime Robot
Webtoon Panel System
Ini yang buat NexStoria rasa seperti Webtoon sebenar — bukan sekadar blog cerita biasa.
// nexstoria.com/story/moon-rabbit
🌙
In a land far above the clouds, a small rabbit lived alone on the moon...
🐇
Every night, she would look down at the Earth, wondering what it felt like to have friends.
⭐
One day, a shooting star passed by. "Make a wish!" it whispered...
🌏
And so the little rabbit's adventure to Earth began! 🐾
📐 Panel Structure (Database)
panels {
id: uuid
story_id: uuid → stories
order_index: integer
image_url: string (Cloudinary)
image_width: integer
image_height: integer
text_original: text
text_translated: jsonb {
"en": "...", "ms": "...", "ar": "..."
}
}
id: uuid
story_id: uuid → stories
order_index: integer
image_url: string (Cloudinary)
image_width: integer
image_height: integer
text_original: text
text_translated: jsonb {
"en": "...", "ms": "...", "ar": "..."
}
}
🖼️ Image Spec (Webtoon Standard)
Lebar standard: 800px · Tinggi: flexible
Format: WebP (70% lebih ringan dari JPG)
Max saiz: 2MB per panel
Lazy load: Ya — panel bawah load bila scroll sahaja
Format: WebP (70% lebih ringan dari JPG)
Max saiz: 2MB per panel
Lazy load: Ya — panel bawah load bila scroll sahaja
🌐 AI Translation Flow
1. Submit → simpan text_original
2. Queue job → Claude API
3. Translate → EN, MS, AR, JP...
4. Simpan dalam text_translated{}
5. Reader pilih bahasa → cache
2. Queue job → Claude API
3. Translate → EN, MS, AR, JP...
4. Simpan dalam text_translated{}
5. Reader pilih bahasa → cache
⚡ Performance — Lazy Loading
Panel 1–3 dimuatkan serta-merta. Panel seterusnya hanya dimuatkan apabila pengguna hampir sampai semasa scroll. Mengurangkan masa muat sebanyak ~80%.
📱 Scroll Behaviour
Scroll menegak tanpa batas — sama seperti Webtoon & LINE Manga. Virtual DOM untuk prestasi terbaik pada cerita panjang 50+ panel.
Database Schema
9 jadual utama PostgreSQL — direka untuk scale dari 100 hingga 1 juta cerita.
👤users
PKiduuid
emailvarchar
pen_namevarchar
countrychar(2)
roleenum(reader,writer,admin)
avatar_urltext
created_attimestamp
PKiduuid
FKauthor_id→ users
titlevarchar(80)
summarytext
cover_urltext
age_groupenum
statusenum(draft,review,live)
views_countinteger
published_attimestamp
📜panels
PKiduuid
FKstory_id→ stories
order_indexinteger
image_urltext
image_widthinteger
image_heightinteger
text_originaltext
text_translatedjsonb
🌐translations
PKiduuid
FKstory_id→ stories
languagechar(5)
title_translatedvarchar
summary_translatedtext
ai_generatedboolean
created_attimestamp
🏷️story_categories
FKstory_id→ stories
FKcategory_id→ categories
many-to-many junction
❤️likes / bookmarks
PKiduuid
FKuser_id→ users
FKstory_id→ stories
typeenum(like,bookmark)
created_attimestamp
🪙tokens
PKiduuid
FKuser_id→ users
balanceinteger default 0
typeenum(earn,spend)
sourceenum(read,achievement,shop,tip)
amountinteger
created_attimestamp
🏅achievements
PKiduuid
FKuser_id→ users
badge_keyvarchar (e.g. first_read)
stars_earnedinteger
unlocked_attimestamp
👥follows
PKiduuid
FKfollower_id→ users (pembaca)
FKfollowing_id→ users (penulis)
created_attimestamp
🪙nexcoins_ledger
PKiduuid
FKuser_id→ users
typeenum(earn,spend,withdraw)
sourceenum(read,gift,tip,withdraw)
amountinteger
FKref_story_id→ stories (nullable)
created_attimestamp
🏅sijil
PKiduuid
FKuser_id→ users
typeenum(penulis,pembaca)
sijil_keyvarchar (e.g. penulis_pertama)
physical_requestedboolean
issued_attimestamp
📢notifications
PKiduuid
titlevarchar
bodytext
targetenum(all,readers,writers)
sent_by→ users (admin)
sent_attimestamp
REST API Routes
Semua endpoint yang menghidupkan fungsi NexStoria v3. Base URL:
/api/v1// AUTH
POST/auth/registerDaftar akaun baru
POST/auth/loginLogin → return JWT token
POST/auth/logoutInvalidate session
// STORIES
GET/storiesSenarai cerita (filter, sort, paginate)
GET/stories/:idSatu cerita + semua panel
POST/storiesSubmit cerita baru (writer only)
PUT/stories/:idKemaskini cerita (owner only)
DELETE/stories/:idPadam cerita (owner / admin)
// PANELS
GET/stories/:id/panelsSemua panel + terjemahan
POST/stories/:id/panelsTambah panel baru
PATCH/panels/:id/reorderSusun semula urutan panel
// MEDIA
POST/upload/imageUpload gambar → Cloudinary CDN
POST/upload/audioUpload audio → R2 / S3
// AI TRANSLATE
POST/translate/story/:idTrigger AI translate untuk cerita
GET/translate/:id/statusSemak status (pending / done)
// SOCIAL
POST/stories/:id/likeToggle like / unlike
POST/stories/:id/bookmarkToggle bookmark
// ADMIN
GET/admin/review-queueCerita menunggu kelulusan
PATCH/admin/stories/:id/approveLuluskan atau tolak cerita
GET/authors/:idProfil penulis — bio, stats, pencapaian
GET/authors/:id/storiesSemua cerita oleh penulis (published + draft)
POST/authors/:id/followToggle ikuti / batal ikut penulis
// READERS & UPGRADE
GET/readers/:idProfil pembaca — level, stats, library, pencapaian
POST/readers/:id/upgradeNaik taraf akaun pembaca → penulis
// TOKENS & GAMIFICATION
GET/tokens/:userIdBaki token + sejarah transaksi
POST/tokens/earnTambah token — selesai baca / pencapaian
POST/tokens/spendGuna token — beli item kedai / tip penulis
GET/achievements/:userIdSenarai pencapaian + lencana pembaca
POST/achievements/unlockUnlock pencapaian baru untuk pembaca
// NEXCOINS & GIFT
GET/nexcoins/:userIdBaki NexCoins + bintang + sejarah transaksi
POST/nexcoins/earnTambah NexCoins — selesai baca / pencapaian
POST/nexcoins/giftTip NexCoins kepada penulis dari halaman baca
POST/nexcoins/withdrawTebus/withdraw NexCoins oleh pembaca
// SIJIL
GET/sijil/:userIdSenarai sijil yang dimiliki pengguna
POST/sijil/generateJana sijil digital (canvas → PDF)
POST/sijil/request-physicalMinta penghantaran sijil fizikal
// EMAIL (EDGE FUNCTION)
POST/functions/v1/send-writer-emailHantar emel lulus/tolak kepada penulis (Supabase Edge)
// ADMIN NOTIFICATIONS
POST/admin/notifications/sendHantar notifikasi push kepada semua/sebahagian pengguna
GET/admin/leaderboardTop penulis, super readers, buku paling banyak dibaca
Media & CDN Architecture
Cara gambar & audio diproses, disimpan, dan dihantar pantas kepada pengguna Malaysia.
// Image Upload Pipeline
PenulisUpload gambar
ValidateType & size check
AI ScanContent safety
CloudinaryResize → WebP
CDN EdgeMY delivery
🖼️ Images (Cloudinary)
Auto-convert ke WebP format
Resize standard 800px lebar
Lazy loading + blur placeholder
Thumbnail auto-generated (300px)
CDN cache 30 hari
AI moderation sebelum simpan
🇲🇾
Cloudflare
CDN Malaysia
Edge Nodes
🎧 Audio (R2 / S3)
MP3 / WAV / M4A diterima
Auto-transcode ke MP3 128kbps
Streaming (bukan download penuh)
Waveform preview auto-generated
CDN cache 7 hari
Signed URL untuk akses selamat
Security Architecture
NexStoria adalah platform kanak-kanak — keselamatan bukan pilihan, ia adalah kewajipan mutlak.
Authentication
JWT token (access + refresh)
Bcrypt hashing (cost: 12)
Google OAuth 2.0
Session expire: 7 hari
2FA untuk admin accounts
Content Safety (Kanak-kanak)
AI scan setiap gambar sebelum publish
AI scan setiap teks cerita
Human review wajib untuk cerita baru
Report button untuk pembaca
Zero tolerance NSFW content
Network Security
HTTPS everywhere (TLS 1.3)
Cloudflare DDoS protection
Rate limiting per IP & user
CORS — whitelist domains sahaja
CSP headers (XSS prevention)
COPPA Compliance
Tiada data dikumpul bawah 13 tahun
Parental consent untuk akaun kanak-kanak
Tiada iklan pada halaman kanak-kanak
Data minimization policy
Right to erasure (delete account)
Data Protection
Database encrypted at rest
Backup harian automatik
Row-level security (Supabase RLS)
Tiada hardcode credentials
Audit log semua admin actions
API Security
API key rotation setiap 90 hari
Input validation & sanitization
SQL injection prevention (ORM)
File type magic byte validation
Max upload size enforced server-side