NANANG
Preparing your experience
WebGL · React Three Fiber · Three.js
I build scalable web platforms, backend systems, mobile applications, and interactive digital experiences.
Have a product to build? Get in touchFull-Stack Developer
More than 3 years of professional software development experience.
I am a Full-Stack Developer focused on building reliable applications from user interface to infrastructure. My experience includes multi-country e-commerce platforms, backend services, internal operational systems, Android applications, cloud integrations, and interactive 3D web experiences.
03 / CAPABILITIES
I work across the complete product lifecycle—building user experiences, backend services, mobile applications, data workflows, and the infrastructure that keeps them running.
Current layer
ActiveLAYER 01
Frontend Experience
05
System layers
01
Product mindset
Layer 01
Interfaces that feel fast and intentional.
Building responsive web applications, interactive product interfaces, and real-time 3D experiences with a strong focus on usability and performance.
Applied in
Multi-country commerce, internal dashboards, and interactive 3D product configurators.
Layer 02
Reliable services behind every interaction.
Designing APIs, authentication, business workflows, integrations, schedulers, and background processing for production systems.
Applied in
AI provider routing, notification scheduling, multi-tenant workflows, and e-commerce integrations.
Layer 03
Data that stays consistent as systems grow.
Working with relational data, caching, queues, workers, retries, and event-driven communication across application services.
Applied in
Delivery history, caching strategies, asynchronous jobs, retry flows, and operational data models.
Layer 04
Native Android experiences connected to real services.
Building modern Android applications with declarative UI, API integration, persistent state, and reliable push-notification workflows.
Applied in
Wejangan Bapak Android application, onboarding flows, preferences, history, and FCM delivery.
Layer 05
From local development to production.
Containerizing applications, configuring reverse proxies, automating delivery, and troubleshooting systems in production environments.
Applied in
Production deployments, cloud storage, performance optimization, monitoring, and infrastructure improvements.
04 / EXPERIENCE
Since 2023, my responsibilities at Indospace Group have extended across commerce platforms, internal operations, backend services, integrations, and production infrastructure.
Professional chapter
Current roleCompany
Full-Stack Developer
March 2023 - Present
Current focus
CHAPTER 01
Commerce Platforms
3+
Years
04
Work layers
E2E
Ownership
Chapter 01
Multi-country e-commerce built for real operational complexity.
Developing and maintaining customer-facing commerce experiences across different markets, storefronts, currencies, product flows, and business requirements.
Responsibility
Worked from interface changes and storefront behavior through service integration, production investigation, and deployment support.
Focus
Chapter 02
Turning operational workflows into dependable internal systems.
Building tools that help teams manage company processes, operational data, approvals, and day-to-day work more consistently.
Responsibility
Translated cross-department requirements into maintainable interfaces, backend workflows, permissions, and administrative features.
Focus
Chapter 03
Connecting products, services, data, and external platforms.
Designing and maintaining application services, APIs, authentication flows, databases, caches, and third-party integrations behind user-facing products.
Responsibility
Handled service contracts, data flow, integration failures, background processes, and the boundaries between frontend and backend systems.
Focus
Chapter 04
Keeping production systems stable, efficient, and deployable.
Improving deployment workflows, server configuration, cloud integrations, application performance, and production reliability across the platform.
Responsibility
Investigated production issues across application, database, proxy, storage, and infrastructure layers instead of treating them as isolated frontend problems.
Focus
05 / SELECTED WORK
Scroll through detailed product stories, technical decisions, and placeholder visuals. Each image can be replaced later with the final project screenshot without changing the layout.
One interface for routing, observing, and controlling multiple AI providers.
1
Unified API
4+
Provider-ready
Auto
Fallback strategy
Teams integrating several AI providers must manage different credentials, request formats, quotas, fallback logic, and usage data across disconnected systems.
ModelMux centralizes provider configuration behind one API, applies routing and fallback policies, and exposes clear operational visibility for developers.
Placeholder visual
Workspace overview and provider health
01 / 01 / OVERVIEW
The main dashboard brings providers, model availability, recent traffic, and health signals into one place.
02 / 02 / PROVIDERS
Credentials and provider configuration are managed consistently without leaking provider-specific concerns into client applications.
03 / 03 / ROUTING
Requests can move between providers based on model compatibility, availability, quota state, and routing priorities.
04 / 04 / OBSERVABILITY
Request logs and usage summaries make it easier to diagnose failures, compare providers, and understand how the platform is being used.
One interface for routing, observing, and controlling multiple AI providers.
1
Unified API
4+
Provider-ready
Auto
Fallback strategy
THE PROBLEM
Teams integrating several AI providers must manage different credentials, request formats, quotas, fallback logic, and usage data across disconnected systems.
THE SOLUTION
ModelMux centralizes provider configuration behind one API, applies routing and fallback policies, and exposes clear operational visibility for developers.
MY ROLE
Creator & Full-Stack Developer
Designed the service architecture and unified provider contract. Implemented routing, retries, fallback policies, and token rotation concepts. Planned usage tracking, request logs, provider health, and deployment workflows.
Placeholder visual
Workspace overview and provider health
01 / OVERVIEW
The main dashboard brings providers, model availability, recent traffic, and health signals into one place.
02 / PROVIDERS
Credentials and provider configuration are managed consistently without leaking provider-specific concerns into client applications.
03 / ROUTING
Requests can move between providers based on model compatibility, availability, quota state, and routing priorities.
04 / OBSERVABILITY
Request logs and usage summaries make it easier to diagnose failures, compare providers, and understand how the platform is being used.
Personalized motivational notifications delivered with a reliable Android and backend workflow.
4
Personalization dimensions
20
Scheduler workers
FCM
Push delivery
Generic motivational apps quickly feel repetitive because they ignore the user's life context, preferred tone, and notification schedule.
The application combines onboarding preferences, configurable categories, a Golang scheduler, notification history, and Firebase Cloud Messaging.
Placeholder visual
Context-aware onboarding flow
01 / 01 / ONBOARDING
Onboarding captures life status and basic preferences so future messages feel more relevant from the beginning.
02 / 02 / PERSONALIZATION
Users control the kind of message they receive and how often the application should reach them.
03 / 03 / EXPERIENCE
Messages are recorded in a readable history so users can revisit advice instead of losing it in the notification tray.
04 / 04 / DELIVERY
A scheduler processes due notifications in batches, coordinates workers, records results, and sends messages through FCM.
Personalized motivational notifications delivered with a reliable Android and backend workflow.
4
Personalization dimensions
20
Scheduler workers
FCM
Push delivery
THE PROBLEM
Generic motivational apps quickly feel repetitive because they ignore the user's life context, preferred tone, and notification schedule.
THE SOLUTION
The application combines onboarding preferences, configurable categories, a Golang scheduler, notification history, and Firebase Cloud Messaging.
MY ROLE
Product Engineer
Built the Android interface with Kotlin and Jetpack Compose. Designed the Golang backend, scheduling flow, and PostgreSQL data model. Integrated Firebase Cloud Messaging and delivery history workflows.
Placeholder visual
Context-aware onboarding flow
01 / ONBOARDING
Onboarding captures life status and basic preferences so future messages feel more relevant from the beginning.
02 / PERSONALIZATION
Users control the kind of message they receive and how often the application should reach them.
03 / EXPERIENCE
Messages are recorded in a readable history so users can revisit advice instead of losing it in the notification tray.
04 / DELIVERY
A scheduler processes due notifications in batches, coordinates workers, records results, and sends messages through FCM.
A browser-based product experience combining real-time 3D, material configuration, and guided interaction.
GLB
Optimized assets
60fps
Target interaction
Demand
Render strategy
Static product photography cannot communicate every material, angle, and configuration while large 3D assets can easily damage page performance.
The experience combines optimized GLB assets, responsive camera behavior, material controls, controlled rendering, and a product-focused interaction model.
Placeholder visual
Product-focused 3D showroom
01 / 01 / EXPERIENCE
The interface keeps the model central while controls and content support exploration without competing for attention.
02 / 02 / MATERIALS
Material and color selections update the product directly so users can compare combinations in context.
03 / 03 / INTERACTION
Camera constraints, interaction policies, and responsive framing keep the product usable on desktop and mobile.
04 / 04 / PERFORMANCE
Optimized models, controlled invalidation, lazy loading, and fallback behavior protect the surrounding application from unnecessary rendering cost.
A browser-based product experience combining real-time 3D, material configuration, and guided interaction.
GLB
Optimized assets
60fps
Target interaction
Demand
Render strategy
THE PROBLEM
Static product photography cannot communicate every material, angle, and configuration while large 3D assets can easily damage page performance.
THE SOLUTION
The experience combines optimized GLB assets, responsive camera behavior, material controls, controlled rendering, and a product-focused interaction model.
MY ROLE
Full-Stack & 3D Web Developer
Built Three.js and React Three Fiber rendering workflows. Implemented camera controls, material switching, decals, and responsive interaction. Optimized model loading, rendering demand, and browser compatibility.
Placeholder visual
Product-focused 3D showroom
01 / EXPERIENCE
The interface keeps the model central while controls and content support exploration without competing for attention.
02 / MATERIALS
Material and color selections update the product directly so users can compare combinations in context.
03 / INTERACTION
Camera constraints, interaction policies, and responsive framing keep the product usable on desktop and mobile.
04 / PERFORMANCE
Optimized models, controlled invalidation, lazy loading, and fallback behavior protect the surrounding application from unnecessary rendering cost.
More experiments
Smaller or earlier-stage projects remain available as compact summaries while the featured work receives the full case-study treatment.
