Projects
A curated catalog of production applications built for performance, resilience, and user experience.
MagangHub Bot Attendance
MagangHub Bot Attendance & Automated Daily Reporting Platform is an enterprise-grade multi-user workflow automation and attendance management system engineered for Indonesian Ministry of Manpower (Kemnaker) MagangHub interns. The platform completely automates daily check-in, check-out, and formal tri-part internship activity reporting (Uraian, Pembelajaran, Kendala) via intelligent proxy routing and background cron daemon execution.Architectural OverviewBuilt with Next.js 16 App Router following the Simple Scalable Architecture, the application leverages NextAuth (Auth.js v5) with OAuth and Personal Access Token (PAT) authentication, serverless PostgreSQL (Neon) via Prisma ORM, and Tailwind CSS mobile-first responsive interfaces complying with strict touch target and anti-zoom ergonomics.Key Capabilities & Features• Cloudflare WAF Forward Proxy Bypass: Transparent HTTP CONNECT forward proxy architecture routing outbound requests through dedicated VPS infrastructure to seamlessly bypass Kemnaker SSO datacenter IP blocks.• AI-Driven Multi-Source Daily Reporting: Real-time synchronization of developer commits via GitHub REST API and public Atom feed fallback, generating structured, context-rich daily logs compliant with Kemnaker standards.• Automated Cron Daemon Execution: Robust serverless cron trigger architecture integrated with VPS Crontab and Asia/Jakarta (WIB) timezone alignment for scheduled automated submission and notification dispatch.• Mobile-First Responsive Experience: Touch-optimized stacked card views, modal activity inspectors, and protected report locking preventing accidental edits to submitted filings.
Google Review Card Generator
Google Review Card Generator & Physical QR Platform is an end-to-end web engineering solution and print-ready card design system built to bridge offline customer foot traffic with Google Maps business profiles. Engineered for both on-demand custom card generation and mass retail pre-printing, the platform produces millimeter-precise, 300+ DPI physical cards (PVC CR80 cards, A6/A7 acrylic table standees, and cashier counter stickers) with high-fidelity vector PDF and PNG export. Architectural Overview Developed with Next.js 15 App Router and TypeScript, the system adopts Vercel Geist design principles paired with official Google visual identity tokens. The dynamic QR lifecycle is powered by Prisma ORM and serverless PostgreSQL (Neon), executing sub-50ms HTTP 307 proxy redirects (/r/[id]), self-activation onboarding flows, salted SHA-256 PIN verification via native Node.js crypto, and asynchronous scan telemetry logging. Key Capabilities & Features • Millimeter-Accurate WYSIWYG Print Engine: Client-side vector rendering via jsPDF and html-to-image featuring dynamic ResizeObserver auto-scaling, bleed marks, and strict quiet zones for zero-distortion physical printing. • Dual Production Workflows: Seamlessly toggles between direct branded cards and universal unbranded stock cards ready for retail pre-printing and distribution. • Dynamic Proxy & Self-Activation Portal: Unactivated cards guide merchants through a mobile-first onboarding flow (/r/[id]/activate) with Google Maps link resolution and PIN-protected destination URL updates. • Official Typography & Identity Harmony: Authentic Google Sans and Google Sans Text font stack, NFC wave indicators, and verified gold star rating assets.
Hospital E-Klaim & Health Insurance Integration
Enterprise hospital claim processing system bridging clinical hospital management (SIMRS) with Ministry of Health (Kemenkes) and BPJS Kesehatan web services. Streamlines patient visit reconciliation, automated grouping, hospital tariff calculations, and secure AES-256 payload encryption.### Architectural OverviewBuilt with React 19, TypeScript, and Express.js backed by Microsoft SQL Server (SIMRS DB) and high-performance REST APIs. Implements resilient payload encryption and audit-logged claim lifecycles adhering to national healthcare integration specifications.### Key Capabilities & Features- **SIMRS & BPJS Bridge:** Bi-directional synchronization connecting local electronic medical records with national health insurance claim web services.- **Automated Claim Grouping:** High-speed grouping pipeline for patient diagnoses, procedures, and tariff tier evaluations.- **AES-256 Security Architecture:** Bank-grade payload encryption ensuring strict patient data confidentiality during external transmissions.- **Audit & Reconciliation:** Comprehensive transaction logs and discrepancy alerts for hospital billing reconciliation.
Kopi Sangkara POS
Kopi Sangkara POS is a modern, responsive cloud-based Point of Sale and retail operations platform tailored for specialty coffee shops and hospitality environments. Engineered as an installable Progressive Web Application (PWA) optimized for tablet and iPad touch viewports, the system streamlines fast-paced order workflows while maintaining strict financial integrity. Architectural Overview Built with Next.js 16 App Router on top of a kebab-case Hybrid Modular architecture, the platform strictly isolates business logic and transaction processing from presentational components. The database layer utilizes Prisma ORM connected to serverless PostgreSQL (Neon) with connection pooling and Zero-any TypeScript type contracts. Key Capabilities & Features • Direct ESC/POS Hardware Printing: Native browser-to-hardware communication generating raw ESC/POS bytecode over Web Bluetooth for 58mm thermal printers with dynamic QR-based digital invoice fallback. • Cashier Shift Reconciliation: Complete shift management lifecycle tracking opening float, expected cash balance, physical cash count, and real-time audit logs for cash discrepancies. • Sales & Analytics Intelligence: Visualized performance telemetry and sales trend charts tracking Total Penjualan, product category popularity, and peak order hours. • Enterprise Security & PWA Readiness: Role-based access control (Admin/Cashier), zero credential data leaks, and service worker caching delivering immediate offline resilience.
Personal Portfolio
elviencode is a personal portfolio web application designed to serve as a centralized platform for presenting professional information and achievements. The website showcases comprehensive data about me, including my completed projects, educational background, contact information, and curriculum vitae (CV). Built with modern web technologies, this portfolio is structured to be scalable, maintainable, and easy to update as my professional journey evolves. It aims to provide visitors—such as recruiters, collaborators, or clients—with a clear and organized overview of my skills, experience, and work history. Key objectives of this project include: Presenting professional projects with clear descriptions and relevant details Displaying educational history in a structured and readable format Providing direct access to contact information Offering an up-to-date CV for download or review Demonstrating my technical skills through clean architecture and modern development practices This portfolio is not only a personal branding tool but also a practical demonstration of my capabilities as a developer in building real-world, production-ready web applications.
Foman Kreasi
Foman Printing is a web-based e-commerce application designed to simulate an online printing service storefront, intended for use as a business platform for a printing company. The application showcases a range of print products, allows users to browse items, and presents an interactive online store interface with dummy data. The main purpose of this project is to demonstrate a functional e-commerce experience tailored to a printing business, complete with product listings, user-friendly navigation, and visual presentation that mirrors real commercial printing services. This project serves both as an example of an online retail solution for printing businesses and as a portfolio piece highlighting skills in building full-stack web applications. The architecture and implementation are structured to be easily extended with real backend integration and dynamic content in the future. 📈 Functional Summary While this project uses static/dummy data, it illustrates key modern web development competencies such as UI design, state management, routing, and project structuring typical of commercial online stores. It lays the groundwork for adding real data sources, payment processing, user authentication, and order handling in future development. GitHub
SPLD
SPLD (Sistem Pendataan dan Dokumentasi) is a modern, responsive web application designed to streamline the report and documentation management process for Polres Magelang. The system facilitates efficient collection of reports from Polsek (police sectors) to Humas (public relations), enabling organized publication of activity narratives with full transparency. Architecture Overview This project uses a separated frontend and backend architecture, maintained in two independent repositories. Frontend (Client) 🔗 https://github.com/LVNVoid/SPLD-Client Responsible for the user interface and user experience, including authentication flow, role-based dashboards, protected routes, report and narrative management, and communication with the backend via RESTful APIs. Backend (Server) 🔗 https://github.com/LVNVoid/SPLD-Server Acts as the core service layer, providing REST APIs, handling auth