Meong Hideung Universe - Full-Stack E-Commerce & Interactive Digital Reader for Horror Literature
Overview
Meong Hideung Universe is a specialized online platform dedicated to horror literature. Built as a comprehensive full-stack application, it serves a dual purpose: a robust e-commerce storefront for purchasing physical books with home delivery, and an integrated digital reading platform for consuming content directly online.
The application is engineered with modern web standards, focusing on high performance, secure transactions, and a seamless user experience across all devices.
Core Features
Hybrid E-Commerce System
- Physical & Digital Fulfillment: Supports both physical merchandise/book shipments and instant digital access.
- Dynamic Stock Management: Automated inventory system that dynamically reduces stock for physical categories upon successful payment transactions.
- Chapter-Based Purchasing: An advanced digital storefront logic allowing users to purchase specific chapters or full digital books, unlocking them instantly in their personal User Library.
- Integrated Logistics: Real-time shipping cost calculations and tracking integrated directly into the checkout flow (via RajaOngkir API).
Secure Transactions & Monetization
- Midtrans Integration: End-to-end secure payment gateway supporting multiple payment methods (e-wallets, bank transfers, credit cards) with automated webhook settlements.
- Ad-Supported Ecosystem: Strategic implementation of Google AdSense within the digital reading platform and blog sections for passive monetization without disrupting the UX.
Interactive User Experience
- Digital Reader & Library: A dedicated, persistent user library where purchased digital books and chapters can be read comfortably online.
- Community & Moderation: A custom comment and review system featuring nested replies, backed by administrative moderation controls.
- Dark/Light Mode UI: Fully responsive UI with persistent theme toggling, optimized for reading horror content in dark mode.
Tech Stack & Architecture
This project is built on a highly optimized, modern React stack, utilizing server-side rendering and edge caching for maximum performance and SEO visibility.
Frontend & Framework
- Framework: Next.js 16.2.2 (React)
- Development Engine: Turbopack (for rapid HMR and build times)
- Mobile Optimization: AMP (Accelerated Mobile Pages) integration for lightning-fast content delivery on mobile networks.
- Typography & Icons: Lucide
Backend, Database & Auth
- BaaS & Database: Supabase (PostgreSQL)
- Security & Access: Row Level Security (RLS) for protecting user libraries and order tables, coupled with robust Multi-Factor Authentication (MFA) flows.
- Bot Protection: Google reCAPTCHA integrated into authentication and checkout routes.
Infrastructure & Monitoring
- CDN & Hosting: Hostinger CDN for global asset distribution and fast TTFB (Time to First Byte).
- Error Tracking: Sentry (Real-time application monitoring and issue tracking for both client and server errors).
Technical Highlights
- Performance First: By leveraging Next.js 16.2.2 with Hostinger CDN and AMP, the platform delivers near-instant page loads, crucial for both e-commerce conversion rates and SEO.
- Complex Data Relational Models: Designed a sophisticated database schema in Supabase to handle the many-to-many relationships between users, digital libraries, chapter ownership, and physical stock inventory.
- Resilient Webhooks: Implemented robust backend listeners to process Midtrans payment webhooks, ensuring users receive their digital access or shipment confirmations instantly upon successful settlement, even during high-traffic spikes.