Muhammad Alfian - Frontend Developer portrait
Hi, I'm Muhammad Alfian
Front-end Developer

I build friendly, fast web interfaces and work with design so everything feels clear on any device.

Github
Linkedin
Email
View ProjectsDownload CV
Muhammad Alfian Dwi Fantara
Muhammad Alfian Dwi Fantara
Muhammad Alfian Dwi Fantara

About Me

Muhammad Alfian Dwi Fantara

Design-led Frontend Developer

Frontend developer who likes clean UI and real results. I turn tricky flows into friendly screens that people actually want to use.

I work with React, TypeScript, and Tailwind, plus React Query and Zustand for state management. I map access, state, and speed before I code—making sure the foundation is solid.

Off the keyboard, I'm gaming, walking the city, hunting street food, or just chilling and enjoying the moment.

West Bandung, Indonesia
Available for new opportunities
alfian.fantara@gmail.com

Core Stack

ReactTypeScriptNext.jsTailwindReact QueryZustand

Experience

Projects and teams I've contributed to

Frontend work that taught me how to balance speed, structure, and teamwork.

2022 - Current

Frontend Engineer

PT. Smooets Teknologi Outsourcing

Building accessible, maintainable interfaces with clear logic.
  • Collaborated with the team and project manager to clarify goals, scope, and technical requirements.
  • Translated mockups into responsive, accessible user interfaces using clean and maintainable code.
  • Refactored and optimized existing components to improve performance and readability.
  • Worked closely with backend developers to integrate APIs and ensure smooth data flow.
  • Enhanced and extended features in existing web applications based on user and stakeholder feedback.
  • Used Git for version control and team collaboration, following structured workflows and code reviews.
Next.jsReact QueryZustandTypescript

2020 - 2022

Frontend Web Developer

PT. Hexacore Bina Sejahtera

Delivered clean interfaces with role-based data
  • Discussed requirements and mockups with the team and project manager to align on goals and scope.
  • Managed user roles and scopes using Identity Data Manager (IDM) to support access control.
  • Built user interfaces based on mockups with attention to structure and responsiveness.
  • Refactored and optimized code to improve performance and maintainability.
  • Collaborated with backend developers to define and integrate data for the frontend.
  • Improved and enhanced features in existing web applications based on team input.
  • Used Git for version control and team coordination through structured workflows.
ExpresspugHTMLJavascript

2019

Android Developer (Internship)

PT. Gamma Solusi Karya Nusantara

Gained hands-on experience in Android development
  • Developed modular Android features for logistics tracking.
  • Explored and adapted to Android development environments.
  • Contributed to a live product release with limited prior experience.
KotlinFirebaseFigma

2018

Fullstack Developer

Binary Team

Built custom CMS with Laravel and Git workflows
  • Collaborated with the team to define requirements and review mockups.
  • Developed web applications using PHP, Laravel, and Bootstrap.
  • Worked with the team using Git for version control and coordination.
  • Introduced Git workflows that reduced integration issues significantly.
LaravelBootstrapMySQLGitLab

Selected Work

Projects I've built

Most of my work involves internal tools and client projects under NDA. Here's what I can share about my contributions and the technologies I used.

2024 - CurrentDashboard

BPK Penabur

Frontend Developer

Key Contributions

  • Rebuilt a web-based application for new student registration (PSB) at BPK Penabur, focusing on performance, accessibility, and responsive design.
  • Designed and implemented a dashboard for the counseling feature, enabling efficient interaction between students and counselors.
  • Translated UI designs from Figma into clean, responsive frontend components, ensuring visual consistency across devices.
  • Integrated frontend with backend services, including defining and aligning API contracts with the backend team.
  • Actively participated in discussions around application flow and requirements, helping bridge technical execution with user needs.
  • Collaborated with the development team using Git, maintaining clean version control and smooth teamwork.

Successfully delivered a fully functional web application for student registration and counseling, improving user experience and streamlining administrative workflows

ReactJSTailwindReact QueryZustandReact ChartJS
2024Dashboard

InfluenceID (Creator Analytics)

Frontend Developer

Key Contributions

  • Developed responsive web pages based on Figma UI designs, ensuring consistency and usability across devices
  • Collaborated with backend team to define and implement API contracts, enabling reliable data integration
  • Integrated Xendit payment gateway into the pricing section, providing secure and seamless transaction flow

Delivered a functional analytics dashboard with payment integration, empowering influencers to track and monetize performance

ReactTypeScriptZustandXendit
2022 - 2024Web App

E-Commerce BUMN

Frontend Developer

Key Contributions

  • Translated UI designs from Figma into responsive web components, ensuring consistency and usability
  • Improved, maintained, and refactored existing web applications based on client requests to enhance performance and reliability
  • Collaborated with team members through pair programming to share knowledge and streamline task execution
  • Integrated frontend with backend services, defining and aligning API contracts with the backend team
  • Investigated and resolved issues, managed deployments, and conducted research to support continuous project improvement

Delivered a responsive e-commerce web application with improved performance and reliability

Next.jsTailwindRedux Toolkit
2022Dashboard

Inventory Management and Cashier (IMACA)

Frontend Developer

Key Contributions

  • Developed web-based application modules to manage inventory and cashier operations
  • Implemented UI components using Semantic UI and pugHTML for clean and responsive layouts
  • Collaborated with backend team utilizing Node.js and Express.js to ensure seamless integration
  • Worked with Neo4J database to support complex data relationships and queries

Delivered a functional inventory and cashier management system that streamlined operations for PT Hexacore Bina Sejahtera

pugHTMLNode.jsExpress.jsSemantic UINeo4J
2021Web App

UIMax ISP (Inside Plant)

Frontend Developer

Key Contributions

  • Improved, maintained, and refactored existing web-based applications based on client requests
  • Implemented UI components using Semantic UI and pugHTML for responsive and consistent layouts
  • Collaborated with backend team using Node.js and Express.js to ensure seamless data integration
  • Worked with Neo4J database to support complex inventory relationships and queries

Enhanced performance and maintainability of inventory management system for digital infrastructure (Inside Plant)

pugHTMLNode.jsExpress.jsSemantic UINeo4J
11/2020 - 12/2021Web App

UIMax OSP (Outside Plant)

Frontend Developer

Key Contributions

  • Improved, maintained, and refactored web-based applications to meet evolving client requirements
  • Developed UI components using Semantic UI and pugHTML for structured and scalable layouts
  • Integrated frontend with backend services using Node.js and Express.js
  • Utilized Neo4J database to manage complex asset relationships in the Outside Plant domain

Delivered a stable and scalable inventory system supporting Outside Plant operations for telecom infrastructure

pugHTMLNode.jsExpress.jsSemantic UINeo4J
05/2021 - 11/2021Web App

ITAM (IT Asset Management)

Frontend Developer

Key Contributions

  • Developed web-based application to manage IT asset storage and tracking
  • Built UI components using Semantic UI and pugHTML for clean and functional interfaces
  • Collaborated with backend team using Node.js and Express.js for smooth data flow
  • Implemented Neo4J database to support asset categorization and relationship mapping

Delivered an efficient IT asset management system that streamlined tracking and storage processes

pugHTMLNode.jsExpress.jsSemantic UINeo4J

Technologies & Tools

My frontend development toolkit

The technologies I use to build fast, accessible, and maintainable web applications.

Core Stack

Foundation for building fast, type-safe UIs

Component-based architecture for reusable UI
React logo
React
Server-side rendering and routing out of the box
Next.js logo
Next.js
Type safety catches bugs before runtime
TypeScript logo
TypeScript
Utility-first CSS for rapid UI development
Tailwind CSS logo
Tailwind CSS
Smooth animations with declarative syntax
Framer Motion logo
Framer Motion

State & Data

Managing state and server data efficiently

Server state management with caching and sync
React Query logo
React Query
Lightweight global state without boilerplate
Zustand logo
Zustand

Quality & Testing

Ensuring reliability and performance

User-centric component testing
Testing Library logo
Testing Library
Performance and accessibility audits
Lighthouse logo
Lighthouse

Design Tools

Collaborating with design systems

Design handoff and component specs
Figma logo
Figma

Capabilities

How I build reliable, user-friendly web experiences

From design handoff to production-ready code, I focus on clarity, accessibility, and smooth developer workflows

craft

From Figma to Functional UI

I turn Figma designs into responsive, accessible pages using React, Next.js, and TypeScript—built with performance and clarity in mind.

HTMLCSSJavaScriptReactJSTypeScriptNextJSTailwind
  • Clean component structure
  • Responsive layout
  • Accessible markup
  • Fast initial load
01

Logic

Smart Data Flows and State Management

I manage complex state and data fetching using React Query and Zustand—handling conditional queries, invalidation, and real-time mirroring with precision.

React QueryZustandConditional LogicQuery InvalidationReal-time Sync
  • Reliable data flow
  • Minimal re-renders
  • Predictable state updates
02

Delivery

Code That's Ready to Grow

I write scalable, maintainable code with testing and performance in mind—so every release feels stable and easy to build on.

Clean CodeComponent ReusabilityPerformance OptimizationCI/CD
  • Readable structure
  • Reusable components
  • Early testing mindset
03

Process

How I turn ideas into UI

I follow a simple loop: align, break down, build, and refine—with feedback guiding every step.

01

Step 1

Align & Scope

Start with shared clarity

We kick things off with quick chats and sketches—clarifying goals, accessibility needs, and performance targets so everyone’s on the same page before we touch code.

02

Step 2

Design Systems Ready

Break down the design

I review Figma screens, name the parts, and map out props and states—so components stay reusable and questions are spotted early.

03

Step 3

Build & Validate

Code with confidence

I build features in Next.js, connect data and state, and test key flows—so bugs are caught early and releases feel stable.

04

Step 4

Launch & Iterate

Keep things healthy

After launch, I monitor performance, fix issues fast, and keep docs updated—so the UI stays smooth and easy to maintain.

What's next

What I'm focusing on next

What I'm learning, exploring, and sharpening between projects—so I keep growing as a frontend developer.

Learning

React internals & testing

Digging deeper into how React works under the hood—especially around rendering, hooks, and component lifecycles. Also learning how to write unit tests to catch bugs early and build with confidence.

Experimenting

Backend tools & workflows

Trying out backend tools like Express, Nest and Prisma to understand how APIs, databases, and server logic fit into the bigger picture. Still figuring out what works best for my stack.

Refining

Improving developer flow

Tweaking my workflow to stay fast and focused—whether it's better folder structure, reusable hooks, or clearer naming. Small changes that make a big difference over time.