Selected projects

What happens when ticket buying feels effortless? More sold-out events. I engineered the buyer side of Tenar, an event ticketing platform, owning the journey from discovery to paid ticket. ● Designed and shipped the complete purchase funnel — browse, select, checkout — tuned for mobile users coming from social media campaigns ● Synchronized inventory and orders with the organizer platform in real time, preventing double-selling during high-demand drops ● Obsessed over checkout friction: fewer steps, clearer states, faster payments Tech: Next.js, TypeScript, REST API integration

Indonesia sits on the Ring of Fire — when the ground shakes, people need answers in seconds, not minutes. I built Info Gempa to deliver exactly that. ● Engineered a real-time pipeline consuming official BMKG seismic data: magnitude, depth, epicenter, and felt reports ● Built an auto-refreshing, map-driven UI that surfaces new earthquakes moments after official release ● Optimized for the worst moment: lightweight pages that stay fast under disaster-driven traffic spikes Tech: Next.js, TypeScript, BMKG public API, real-time data fetching

How do large engineering teams ship one storefront without stepping on each other? I answered that by architecting an e-commerce platform as independent micro-frontends with Webpack Module Federation. ● Decomposed catalog, cart, and checkout into separately built and deployed micro-apps — each one releasable on its own schedule ● Designed shared state and design-system contracts across remotes without version lock-step ● Proved the architecture that multi-squad organizations rely on, end to end Tech: Webpack Module Federation, React, micro-frontend architecture

I kept juggling three apps for expenses, to-dos, and focus timers — so I built one that does all three, and I use it every single day. ● Architected a unified data model connecting spending, tasks, and Pomodoro sessions into one productivity picture ● Built streaks and daily summaries that turn raw logs into motivating insights ● Shipped as a fast, installable web app running in production at tracker.nateon.io Tech: Next.js, TypeScript, PWA, PostgreSQL

Great research deserves to be found. Research Hub gives academics a home for their publications — and I built its web platform for a real research community at researchhub.co.id. ● Delivered researcher profiles, publication listings, and detail pages engineered for discoverability ● Implemented SEO and rendering optimizations so papers rank and load fast from any search engine ● Took the product from requirements to production for daily academic use Tech: Next.js, TypeScript, SEO optimization

A freelance client needed a web presence that sells. I delivered serahweb.com — a brand-faithful, conversion-focused front end, shipped on deadline. ● Translated brand identity into a responsive interface with clear calls to action ● Tuned Core Web Vitals with image optimization, code-splitting, and lazy loading ● Handed over a maintainable component architecture the client can extend without me — the mark of good freelance work Tech: Next.js, TypeScript, Tailwind CSS

Restaurant Wi-Fi is slow, phones are mid-range, customers are hungry — that's the environment Menyou's digital menu had to win in. I built the front end that does. ● Crafted QR-first menu browsing and ordering flows that feel instant on low-end devices ● Integrated the documented REST backend (api.menyou.id) with resilient loading and error states ● Prioritized perceived performance: skeletons, optimistic UI, and aggressive asset optimization Tech: Next.js, TypeScript, REST API integration

Reliability you can't see might as well not exist. This public status page turns my infrastructure's health into radical transparency for anyone to inspect. ● Real-time uptime monitoring of servers and websites with detailed response-time graphs ● Fully automated checks and updates — the page maintains itself, no human in the loop ● Serves as the single source of truth for reliability across everything I run Tech: uptime monitoring, automated health checks, real-time dashboards

I don't just deploy software — I stay accountable for it. So I built my own uptime monitor from scratch rather than renting one. ● Engineered scheduled cron-based health checks across registered services with last-checked visibility ● Persisted uptime history to expose trends and recurring incidents, not just a green dot ● Closed the full ops loop: build, deploy, monitor, improve Tech: cron jobs, health-check automation, monitoring dashboards

One shot, zero retakes — a wedding invitation has to be perfect on the first open. I delivered this digital invitation pixel-perfect from Figma on Next.js 15. ● Matched the designer's vision exactly across every breakpoint and device ● Engineered dynamic event rendering via query parameters — multiple receptions served from a single build ● Shipped buttery animations and instant loads using modern React patterns Tech: Next.js 15, React, Figma-to-code, responsive design

Campus administration runs on its academic information system — get it wrong and everyone feels it. I built a complete SIAKAD as a solo project, front to back. ● Implemented secure authentication with role-based access for admins, lecturers, and students ● Built a clean, responsive Vue 3 + Tailwind interface over a modular, scalable architecture ● Integrated a Laravel REST API covering the full academic workflow end to end Tech: Vue.js 3, Laravel, Tailwind CSS, REST API

Small product, complete engineering story: a URL shortener where I owned both sides of the stack — and proved I can ship across ecosystems. ● Built the Laravel 12 backend handling link creation, fast redirects, and click analytics ● Crafted a Nuxt 3 + shadcn/ui front end with instant copy-and-share UX ● Deployed to production at shortlink.natee.my.id Tech: Laravel 12, Nuxt.js 3, shadcn/ui, MySQL

Paper forms were how lab students at UMM ordered their jackets — until this. I digitized the entire workflow into a trackable web system. ● Implemented campus-style authentication using student NIM credentials ● Built full CRUD order management from submission through fulfillment ● Replaced a manual, error-prone process with an auditable digital trail Tech: web CRUD system, authentication, order management

Shipping into a live institutional portal used by thousands of students — where breaking production is not an option — taught me discipline early. ● Added cross-class navigation shortcuts that cut daily clicks for every student ● Repaired and hardened staff and lecturer data tables running in production ● Learned to move carefully inside a legacy codebase while still delivering visible wins Tech: institutional web platform, production maintenance

My first taste of technical leadership: guiding teammates through UMM's lab rental system while shipping features myself. ● Broke down work, set deadlines, and kept the team delivering on schedule ● Shipped participant status badges and dashboard data fixes used daily by lab staff ● Balanced individual contribution with coordination — the foundation of how I work in teams today Tech: web platform, team leadership, production fixes

A campus app on the Google Play Store with real students as users — consumer-grade expectations, institutional constraints. ● Built complete profile editing backed by live student data ● Implemented module download notifications keeping students current with course materials ● Polished dashboard details that make an institutional app feel like a consumer product Tech: mobile development, Google Play deployment, push notifications

Project Manager and foundation engineer in one: I set the direction for this mobile re-engineering and wrote the code the team built on. ● Defined scope, milestones, and task ownership across the team ● Architected the app boilerplate — dashboard, loan, and profile modules — that every feature shipped on ● Learned that the fastest way to unblock a team is a solid foundation and clear priorities Tech: mobile architecture, project management, team delivery

Engineers who understand design ship better products. At Infinite Learning's micro challenge, I took Puffer from raw idea to clickable prototype. ● Authored the product's big idea and translated it into concrete user flows ● Produced low-fidelity, high-fidelity, and interactive prototypes in Figma ● Sharpened the design instincts I now bring to every front end I build Tech: Figma, UX design, prototyping, design thinking

Sustainability needs software too. Green Saver was our cross-functional MVP at Infinite Learning — and my job was making the front end real. ● Implemented auth, home, about, contact, and news detail pages for the MVP launch ● Contributed to the high-fidelity design system that kept the product visually coherent ● Delivered on a fixed timeline inside a cross-functional team — like a real product org Tech: React, front-end development, design systems

Modernizing a legacy campus portal is equal parts engineering and archaeology. I brought UMM's lab platform into the React era. ● Built a responsive FAQ experience from zero ● Implemented Redux Toolkit data fetching on the Retakers page, replacing brittle legacy calls ● Added per-user activity logs, giving staff traceability they never had Tech: React, Redux Toolkit, legacy modernization

A boarding-house owner needed bookings, not brochures. I built Apel Manis Kost's site to turn phone-scrolling searchers into tenants. ● Developed with Next.js + NextUI for a fast, polished browsing experience ● Designed room showcases, facilities, and contact flows around how people actually hunt for kost — on mobile ● Owned the engagement end to end: requirements, build, deploy Tech: Next.js, NextUI, responsive design

Health information only helps if people can actually read it. This freelance project made anemia education accessible to the Indonesian public. ● Structured medical content into a clear, friendly reading experience ● Built lightweight, responsive pages that perform on the low-end devices where they're needed most ● Delivered the full engagement solo: scoping, build, and deployment Tech: web development, content architecture, performance optimization

An anime index is only as good as its freshness — so I automated mine to update itself while I sleep. ● Built the front end with Redux.js managing complex API state across catalog, search, and episode pages ● Developed the backend on Next.js API routes powering the entire content layer ● Engineered CI with GitHub Actions + cron jobs for zero-touch content updates Tech: Next.js, Redux.js, GitHub Actions, cron automation

Request-response is easy; real-time is where engineering gets interesting. I built this chat platform to master WebSockets end to end. ● Implemented Socket.IO messaging with live presence, typing indicators, and connection recovery ● Designed an Express.js + PostgreSQL backend persisting rooms and full message history ● Built a responsive Next.js + NextUI interface that feels instant Tech: Socket.IO, Express.js, PostgreSQL, Next.js

Handed a budget and a codebase at once: on Sevenman's re-engineering I managed the money and wrote the front end. ● Allocated and tracked budgets across frontend, backend, and design workstreams ● Built guest, user, and admin modules with Next.js, Tailwind CSS, and Redux Toolkit ● Learned to make engineering trade-offs with real financial constraints — rare experience early in a career Tech: Next.js, Tailwind CSS, Redux Toolkit, project budgeting

My capstone at Infinite Learning had a rule I set myself: build it like production, not like a demo. Smart Recycling is the result. ● Engineered the complete Express.js backend — auth, events, transactions, items — with Jest test coverage ● Built the Vite.js front end on Redux Toolkit Query, including an admin monitoring dashboard ● Containerized the entire stack with Docker for reproducible, production-like deployments Tech: Express.js, MySQL, Docker, Vite.js, Redux Toolkit Query, Jest, Ant Design

Hypertension management, one platform, three surfaces — and I contributed across all of them. MAHATI (Mobile Aplikasi Sahabat Hipertensi) helps patients stay on top of their health. ● Developed the Flutter + GetX mobile app consuming the platform's REST services ● Built the full admin dashboard with Next.js + shadcn/ui for clinical data management ● Refactored and extended the Express.js + Prisma + MySQL backend, deployed via Docker Portainer Tech: Flutter, GetX, Next.js, shadcn/ui, Express.js, Prisma, MySQL, Docker