All projects

Interfaces, integrations, and backend systems. Explore the work and the decisions behind it.

Conceptual illustration of the Single Sign-On architecture.

Full-stack Engineer / Internal

Single Sign-On

Challenge: Give internal applications shared sign-in, configurable redirect destinations, and role-based access control.
My contribution: Built the Next.js frontend and Fastify backend from scratch in TypeScript.
Result: Registered applications share authentication and access controls, with a documented flow to exchange redirect tokens for application JWTs.

Next.js
Fastify
TypeScript
PostgreSQL

Conceptual illustration of the API Gateway architecture.

Full-stack Engineer / Internal

API Gateway

Challenge: Connect applications to internal services without tying clients to each service.
My contribution: Implemented and maintained token/access checks, request validation, and routing rules for internal services.
Result: Clients reach backend services through one API entry point with shared access checks.

Next.js
Fastify
PostgreSQL

Indoteknik ERP-connected online storefront.

Full-stack Engineer / Live

Indoteknik

Challenge: Replace the legacy online store without losing its connection to ERP product and stock data.
My contribution: Led the Next.js migration and maintained the APIs connecting the store to Odoo.
Result: The store supports product search and ERP stock updates, with caching to reduce direct ERP requests.

Next.js
Odoo ERP
PostgreSQL
Apache SOLR

Conceptual illustration of the News Crawler ingestion pipeline.

Full-stack Engineer / Internal

News Crawler

Challenge: Collect external news for an internal application without tying long-running crawling work to web requests.
My contribution: Built the Python crawler service, RabbitMQ-backed ingestion, article storage, and frontend integration.
Result: Article ingestion runs in the background, independently of the application accessing the collected news.

Python
RabbitMQ
MongoDB
Next.js

ArchFlow realtime architecture workspace.

Full-stack Engineer / Live

ArchFlow

Challenge: Make system design ideas easy to model, revisit, and review together.
My contribution: Built the board editor, reusable templates, and realtime collaboration.
Result: Saved boards can be reopened, copied, and edited together with live cursors.

Next.js
TypeScript
React Flow
Convex

StoicPath homepage introducing everyday Stoic practice through an unanswered message.

Creator & Developer / Live

StoicPath

Challenge: Make Stoic ideas approachable and give readers a practical way to reflect on everyday reactions.
My contribution: Created a searchable collection of 52 principles with topic filters and reading progress.
Result: Readers can explore 52 principles, reflect on daily prompts, and practice choosing responses across 36 everyday scenarios in Indonesian or English.

Next.js
TypeScript
TailwindCSS
next-intl

Merio DJ website homepage with oversized typography, a red stage photograph, and a lilac featured mix panel.

Frontend Developer / Live

Merio

Challenge: Translate a DJ’s visual identity into a distinctive website while keeping finding and playing a mix straightforward.
My contribution: Shaped the visual direction, content hierarchy, responsive layout, and frontend implementation around a DJ’s music and existing artwork.
Result: Visitors can explore mixes, filter special requests, and keep listening through a persistent mini player on desktop and mobile.

Next.js
React
TypeScript
TailwindCSS

SmartCounter visitor reporting dashboard.

Full-stack Contributor / Internal

SmartCounter

Challenge: Turn incoming visitor counts into usable reports.
My contribution: Refined incoming-data checks, reporting queries, and how visitor counts are combined.
Result: Live visitor totals and reports backed by checked incoming counts.

Next.js
Laravel
PostgreSQL
TailwindCSS

Mall SmartCounter zone-level visitor analytics dashboard.

Full-stack Contributor / Internal

Mall SmartCounter

Challenge: Turn multiple visitor data sources into consistent zone-level monitoring.
My contribution: Clarified API structure for zone-based aggregation queries and data grouping.
Result: The dashboard shows consistent visitor totals by zone as new counts arrive.

Next.js
TypeScript
Fastify
PostgreSQL

Yappin conversation card interface.

Full-stack Engineer / Live

Yappin

Challenge: Help people start meaningful conversations without a complicated interaction flow.
My contribution: Defined API boundaries and validation rules to keep conversation flows understandable and extensible.
Result: A mobile-first card app for browsing curated conversation prompts.

Next.js
TypeScript
Fastify
PostgreSQL

Cek CV resume parsing and feedback interface.

Full-stack Engineer / Live

Cek CV

Challenge: Make resume parsing understandable while keeping uploaded data temporary.
My contribution: Designed structured resume parsing visualization to make each parsed section explicitly traceable and ATS-readable.
Result: Resume sections are shown with AI feedback; uploaded data is not kept after processing.

Next.js
TypeScript
TailwindCSS
OpenAI API

Potrix task planning and focus session interface.

Full-stack Engineer / Live

Potrix

Challenge: Keep task planning and focus sessions simple, local-first, and free of account setup.
My contribution: Designed a deterministic task and focus-session workflow with explicit state transitions.
Result: Task planning and focus sessions work on the device, without an account or network connection.

Next.js
TypeScript
TailwindCSS