Projects.

Hugo Portfolio & Blog

Hugo · Tailwind CSS · JavaScript

My personal site (fanny.dev) — a Hugo static site with a hand-written Tailwind v4 theme, blog, shelves, projects, resume, and more.

AI News Blog System

PHP · Laravel · Python · MySQL

A two-component news portal where a Laravel API owns the data and a Python worker scrapes, rewrites articles with an LLM, and auto-publishes them.

Chat App Multiapps

Node.js · Fastify · Next.js · TypeScript

An omnichannel customer-support chat system that unifies WhatsApp, Telegram, Instagram and more into one real-time dashboard, built on Fastify, Next.js, Prisma, and Socket.IO.

Stackr — Focus & To-do App

Laravel · PHP · React · TypeScript

A focused, OmniFocus-style task manager that is self-hosted, offline-capable, and packageable as a native macOS app.

Streaming Assistant

Fastify · Node.js · TypeScript · React

A YouTube Live bot that reads live chat, awards points to commenters, and turns them into Saweria-style OBS alerts.

Kos Management App

Laravel · PHP · React · Bootstrap

A boarding-house (kos) management system built as a Laravel 13 REST API with a decoupled React SPA — multi-building, billing, tenants, and role-based access.

Proxmox Management Server

TypeScript · Fastify · React · Vite

A from-scratch Proxmox VE management panel — a single-port monorepo with a Fastify API, real-time WebSockets, background workers, and a React control panel.

Web Host Manager

PHP · Laravel · React · Proxmox API

A complete hosting management system (WHMCS alternative) built with Laravel and React.js. Integrated with CPanel, Proxmox, LXD, domain registrars, and payment gateways.

Home Server

Proxmox · Docker · Cloudflare Tunnel · Linux

A personal server built on a repurposed laptop, configured with Proxmox, Docker, and Cloudflare Tunnel to support self-hosting and development needs.

Watch Store

Laravel · React · Inertia · Tailwind CSS

A modern Casio watch e-commerce store inspired by the Apple Watch website, built with Laravel 13, Inertia, React, Tailwind CSS, and Framer Motion, with a custom Blade admin panel and Midtrans payment integration.

Axion AI

HTML · CSS · JavaScript

A clean, modern SaaS landing page for a fictional AI work assistant, with a feature grid, pricing, and FAQ.

Astro Portfolio

Astro · TypeScript · CSS · JavaScript

A single-screen, no-scroll personal portfolio built with Astro, featuring an Apple-style Liquid Glass UI and bilingual content.

IRONFORGE Gym

HTML · CSS · JavaScript

A high-energy landing page for a fictional gym, with animated stats, programs, trainers, pricing tiers, and a schedule.

Aurum

HTML · CSS · JavaScript

A luxury dark-and-gold landing page for a fictional fine-dining restaurant, with a tasting menu and reservation form.

VELOURA

HTML · CSS · JavaScript

An editorial landing page for a fictional luxury fashion house, with a split hero, product grid, and cart badge.

Luminary Studio

HTML · CSS · JavaScript

A bold, dark landing page for a fictional creative digital agency, with a gradient hero and animated stat counters.

Foliage Coffee

HTML · CSS · JavaScript

A warm, editorial landing page for a fictional slow coffee bar, with a floating cup hero, a featured-bean card, and scroll-based reveals.

Pasar Saham Virtual — Investment Simulator

HTML · CSS · JavaScript · SCORM

A virtual investing simulator where learners manage Rp10M across stocks, funds, gold, and cash through 5 rounds of economic-news scenarios.

Pitek — Desktop Asset Manager

Electron · Svelte · TypeScript · Vite

An Eagle-style desktop asset manager that indexes images, video, audio, and text into tidy, human-readable folders on disk — thumbnails and JSON, no database.

Gizi Seimbang — Nutrition Literacy Game

HTML · CSS · JavaScript

A drag-and-drop nutrition game for building balanced meals, with live calorie and macro tracking based on real Indonesian TKPI food data.

Lab Coding Blok — Basic Logic Lab

HTML · CSS · JavaScript

A visual block-coding lab where learners snap Move, Loop, and If blocks together to run animated programs and build computational thinking.

Jangan Lupa Titik Koma

HTML · CSS · JavaScript

A coding puzzle where exactly one line among thousands is missing its semicolon, and you have to spot and click it to fix the build.

Uchiha Itachi Landing Page

HTML · CSS · JavaScript · Canvas

A cinematic, scroll-driven Uchiha Itachi landing page that scrubs an image-frame sequence, with WebGL effects and synthesized audio.

Haystack Hunt

HTML · CSS · JavaScript · Three.js

A tiny 3D find-the-needle game built with Three.js where you clear a haystack one strand at a time to uncover the hidden needle.

Website Resume

Tailwind CSS

A modern digital resume, featuring responsive layouts and interactive resume experiences.

Wedding Invitation

React · Vite · Tailwind CSS · TypeScript

A modern digital wedding invitation application built with React and Vite, featuring responsive layouts and interactive invitation experiences.

WHMCS Custom Modules & Hooks

PHP · JavaScript · Vue.js · WHMCS API

Development of custom modules, hooks, and addons for the WHMCS platform to meet hosting business operational needs.

Price Prediction System

Python · Pandas · NumPy

A stock price prediction system using machine learning and deep learning based on historical data analysis.

Uptime Monitoring

Node.js · EJS · Discord Webhook · Express.js

A server monitoring system that periodically checks the status of hundreds of endpoints and sends automatic Discord notifications when downtime occurs, enabling faster incident response.

Judol Slayer

Node.js · Express.js

A JavaScript-based moderation tool designed to detect and remove spam 'judol' comments from YouTube videos automatically.

Warung Online

Laravel · React · Tailwind CSS

A modern online store application built to support digital product browsing, ordering, and simple e-commerce management workflows.

Temporary File Uploader

PHP · JavaScript · CSS

A lightweight temporary file sharing platform that allows users to upload, store, and share files with automatic expiration support.

Game Tank Godot

Godot · GDScript · C#

A tank battle game developed with the Godot Engine, featuring player controls, shooting mechanics, and game programming fundamentals

Manga Text Removal

Python

A Python-based image processing tool designed to remove text from manga panels and images using OCR and computer vision techniques.

Manga Downloader

Node.js

A Node.js-based manga downloader tool designed to automate manga chapter downloads from online sources efficiently.

Fanny Web Profile

Next.js · React · Tailwind CSS

A personal portfolio website built to showcase projects, technical skills, and development experience using modern web technologies.

My Anime List

Next.js · React · Tailwind CSS

A modern anime catalog and discovery web application built with Next.js, featuring anime browsing, search, and responsive UI experiences.

Zuma Bot

C#

An automation bot for the Zuma game built with C#, designed to simplify gameplay interaction and automate repetitive actions.

Online Classroom

PHP · Laravel · Bootstrap · jQuery

A web-based online classroom platform for managing learning activities, assignments, and student interactions digitally.

Pharmacy System

PHP · Laravel · Bootstrap · jQuery

A web-based pharmacy management system built to simplify medicine inventory, sales transactions, and pharmacy operational workflows.