Munajat Custom Yasin Book

Munajat Custom Yasin Book

Project Overview: Munajat Custom Yasin Book

  • Project Name: Munajat App

  • Client / Company: Mas Dzikron

  • Project Type: Project-Based Freelance

  • Role: Lead Frontend Engineer

📌 Project Description

Munajat is a specialized web-to-print e-commerce platform designed for ordering and configuring custom Yasin & Tahlil books. The core value of the application lies in its web-based design engine, which empowers users to seamlessly customize book layouts, cover artwork, and multi-page configurations directly from their browser. It bridges the gap between traditional memorial print ordering and interactive modern design software.

💻 Tech Stack

  • Framework: Next.js (React)

  • State Management: Zustand

  • Form Handling & Validation: React Hook Form + Zod

  • Vector Engine: SVG Dynamic Manipulation & Canvas Interface

  • API Integration: RESTful API

🛠️ Key Contributions & Responsibilities

As the Frontend Engineer, I owned the entire client-side architecture and built the complex interactive product customizer from scratch:

1. Advanced Interactive Vector Customizer

  • Real-Time SVG & Design Manipulation: Built an in-browser design canvas allowing users to select base themes and apply advanced real-time modifications to high-resolution vector assets without performance degradation.

  • Dynamic Color Palette Customization: Implemented an dynamic vector coloring engine supporting complex linear gradients, solid colors, and synchronized asset resets (Pewarnaan Sampul).

  • Contextual Typography Controls: Developed custom text-editing modules with character counters, real-time font sizing, color adjustments, and localized layout updates for custom fields (Nama Almarhum/ah, Wafat, Keluarga Besar).

  • Asset & Image Masking Architecture: Created an image upload portal that accurately masks and positions photographs within intricate vector floral frames (Gunakan Templat Bingkai).

2. Multi-Step Configuration Workflow & Shop Experience

  • State-Driven Multi-Page Builder: Architected a 6-stage linear configuration wizard (Tema Dasar Desain, Sampul Luar, Sampul Dalam, Halaman Keluarga, Halaman Isi, Cetak PDF) that tracks deep nested configuration matrices.

  • Dynamic Previews: Built a live synchronization layout showing instantaneous front/back preview responses as users toggle configuration parameters.

  • Draft Preservation System: Implemented client-side persistence tracking so users can seamlessly save current workspace progress (Simpan Draf) before proceeding to checkout or final rendering.

🚀 Key Highlights & Technical Impact

  • Complex SVG Manipulation: Bypassed the need for heavy third-party graphic libraries by manipulating raw SVG DOM structures directly through React hooks. This drastically reduced the initial bundle size while keeping vector canvas transitions fluid at 60 FPS.

  • High-Performance Global State Management: Leveraged Zustand to synchronize highly reactive design attributes (text positioning, gradient vectors, binary toggles) across the live preview and sidebar control panels synchronously.

  • Validated Data Contracts: Utilized React Hook Form and Zod to enforce strict data contracts on text boundaries and image asset sizes ($650 \times 650$ px boundaries), ensuring user-generated configurations exactly match backend print-ready specifications.