S/01
Frontend Architecture
Modern SSR applications built with Nuxt 4, Vue 3, and TypeScript, engineered for speed, modularity, and zero regressions.
Hello. My name is
Muh. RafliAkbar
I build and scale modern, high-performance web applications and enterprise frontend systems for teams who need clean architecture, zero bloat, and dependable delivery.
Get in touch
Available for strategic frontend & web engineering projects
Software Developer & Frontend Engineer
Nuxt.js · Vue.js · TypeScript
Software
Engineer
20+ systems delivered
Based in Jakarta, ID · Working globally
Organizations & clients partnered with
Daya Gagas Internasional
PT Cakra Wijaya Solusi
Universitas Negeri Jakarta
UPT TIK UNJ
PT Delameta Bilano
Working together
Most frontend codebases arrive as tangled components nobody wants to refactor.
Send me your requirements, your legacy app, or your Figma specs. I will tell you how to architect it with clean boundaries, predictable state, and type safety — honestly, before any invoice. If it is not a fit, I will point you in the right direction.
Discuss your projectGood software engineering is deciding what not to overcomplicate, so the product stays fast, testable, and maintainable.
7+Years in practice
20+Production systems
6Registered patents (HAKI)
99%Delivery reliability
7+Years developing production software across public sector and enterprise platforms.
Background
Seven years of shipping systems taught me to care about what actually lasts.
From studying computer networks at SMKN 7 Jakarta and Information Technology at Universitas Negeri Jakarta (UNJ), to leading software engineering teams and architecting strategic frontend applications at Daya Gagas Internasional and PT Cakra Wijaya Solusi. I focus on clean code, test-driven reliability, and accessible user experiences that teams can maintain without breaking.
- TypeScript-first and component modularity — eliminating runtime regressions before launch.
- Deep expertise in Nuxt, Vue, and modern state architecture across strategic enterprise apps.
- Direct engineering leadership from system blueprint to live production — nothing gets lost in translation.
Capabilities
Six ways I help teams build better software.
S/02
Enterprise Web Systems
Large-scale information systems, dashboards, and internal workflow platforms with complex state machines and RBAC.
S/03
REST API & Microservices
Seamless backend integration with Express.js, Laravel, and third-party APIs like WhatsApp Gateways and payment services.
S/04
Performance & SEO
Core Web Vitals auditing, bundle trimming, and static-first Astro builds that consistently hit 100 on Lighthouse.
S/05
Full-stack Applications
End-to-end web products from database schema design (MongoDB, PostgreSQL, D1) through production edge deployment.
S/06
Technical Leadership
Sprint planning, architecture reviews, developer mentorship, and quality assurance to ensure teams ship on schedule.
Technical Stack
Battle-tested technologies & methodologies.
Modern, standard-aligned tools that prioritize developer productivity, team velocity, and bulletproof user experience in production.
Nuxt & Vue ArchitectureSSR web applications, composables, and robust state management.
TypeScript & ContractsEnd-to-end type safety preventing runtime exceptions.
React & Next.js EcosystemResponsive design systems and reactive enterprise frontends.
Astro & High PerformanceSub-second page speeds with near-zero client JavaScript payload.
RESTful API EngineeringClean contracts with Express.js, Laravel, and HTTP clients.
Database & Cloud StorageRelational & document stores: MongoDB, Postgres, Cloudflare D1.
Engineering LeadershipSprint scoping, code review pipelines, and mentoring junior engineers.
Performance & CWVLighthouse 100, Core Web Vitals, and WCAG accessibility standards.
Engineering Workflow
Predictable shipping with working code every sprint.
Great frontend systems aren’t built on guesswork. Every phase delivers verifiable, production-ready increments — from type-safe contracts and design systems to hardened edge deployments.
Stage 01
Audit & Architecture
Deep dive into business logic, Figma design files, and backend endpoints. We define state boundaries, TypeScript contracts (Zod/OpenAPI), and performance budgets before writing feature code.
Week 1Stage 02
Tokens & Core UI
Scaffolding accessible, reusable design tokens and component primitives (Nuxt/Vue, Tailwind). Every component is strictly typed, keyboard-navigable (WCAG), and tested with isolated mock states.
Weeks 2–3Stage 03
Integration & State
Wiring live APIs, resilient state management, query caching, and edge-case handling (skeletons, error states, optimistic updates). Deployed to preview environments with weekly sprint demos.
Weeks 4–5Stage 04
Hardening & Handoff
Core Web Vitals tuning (95+ Lighthouse), bundle tree-shaking, cross-device verification, and automated CI/CD. Delivered with modular technical documentation and 30-day post-launch support.
Week 6+Recognition & Patents
Patents & National Honors.
Winner — PKM Kewirausahaan
Ministry of Education, Culture, Research, and Technology (Kemendikbudristek RI)
WinnerWinner — PKM Pengabdian Masyarakat
Ministry of Education, Culture, Research, and Technology (Kemendikbudristek RI)
WinnerPatent EC00202287102 — Monev System FT UNJ
Directorate General of Intellectual Property (DJKI Kemenkumham RI)
PatentPatent EC00202287109 — Monev Infographics FT UNJ
Directorate General of Intellectual Property (DJKI Kemenkumham RI)
PatentBlog & Articles
Catatan arsitektur frontend, AI agent, dan software engineering.
Name tokens for what they do, not what they look like
Why calling a colour "lime" is a trap, and why semantic token naming is the only thing that survives a redesign.
A handover that outlives you
What actually belongs in a design system documentation site, and what is just performative paperwork.
Eleven questions to ask before you write a quote
The questions that protect both you and the client from building the wrong product on the right budget.
FAQ
Asked before nearly every project.
Not sure yet?
Send a paragraph about what is going wrong. If I am not right for it I will say so and name someone who is, usually the same day.
Write to meHow long does a project usually take?
A full product engagement runs six weeks end to end. An identity is three to four. A second opinion is one week. If your deadline is tighter than that, say so early and you will get an honest answer about whether it fits.
Is the price fixed?
Yes, wherever the scope is defined. One number, one payment schedule and a written list of what sits inside it. Anything outside becomes a conversation before work starts, never a surprise line on an invoice.
Can you work alongside our engineers?
That is the normal arrangement. I join your stand-ups, write specs in whatever format your team already uses, and stay reachable for a month after handover so questions get answered rather than guessed at.
What lands in my hands at the end?
Source files, a component library with every state documented, a token sheet, exported assets and a written spec covering behaviour and edge cases. Build engagements also include the front-end templates and a configured theme.
Do you take small pieces of work?
Sometimes. A single landing page, a pricing rewrite or a one-week review all fit comfortably. Anything larger tends to work better as a short sprint than as hours scattered across a quarter.
Who owns the work at the end?
You do, completely, once the final payment clears. Files transfer into your accounts rather than living in mine. I only ask permission to show the work publicly, and I will keep it private if you would rather.
Available for strategic frontend & web engineering projects
Have you got a system that needs building properly?
Tell me what you are building, the architectural bottlenecks you are facing, and your target timeline. That is enough to come back with a scope and technical roadmap.