Mikael Macabali — Portfolio · 2026 · MIT
Full-Stack · Design · Engineering · Manila
M / 2026  ·  Portfolio / 2026Filed under Code · Design · EngineeringMIT · Made on EarthOpen · v1.0EN ·PH
I.Hero / Cover PlateMikael / Volume 01001 / 008
Full-stack developer · Nº 01

Building the web with clarity, purpose, and carefully considered craft.

I build interactive web apps using Typescript, React, Next.js, Bun and PostgreSQL. With a focus on UI design. Enthusiastic about Three.js, driven by a keen eye for design.

06projectsshipped
08technologiesin daily use
03yearsbuilding
↳   Full-Stack · TypeScript · React · Node  ·  Always shipping14.55° N · 121.02° E
FIG. 01 / MK-26Plate Nº 01SHA · a1b2c3dComposed in ManilaMikael
01Understand02Design03Build04Ship
GlobalConnected · Always
ManilaTokyoSan FranciscoLondonBerlinSingaporeSydneyTorontoSeoulAmsterdamDubaiNew YorkManilaTokyoSan FranciscoLondonBerlinSingaporeSydneyTorontoSeoulAmsterdamDubaiNew York
@mikaelmacabaliFull-Stack Dev@open-sourceCommunity@design-systemsUI/UX@typescriptLanguage@reactFrontend@nextjsFramework@mikaelmacabaliFull-Stack Dev@open-sourceCommunity@design-systemsUI/UX@typescriptLanguage@reactFrontend@nextjsFramework
II.About / The developerMikael Macabali / Volume 01002 / 008
About me · Nº 02

Every project starts with a conversation, not a ticket.

I'm a Full Stack web developer passionate about building interactive and beautiful web experiences. I love turning ideas into real products using modern technologies.

Read my story
MTypeScript · React · Node · PostgreSQL · Always learningManila-basedRemote-friendly
From database schema
to pixel-perfect UI,
I work across the
full stack of modern
web development.
Studies in form · function · machine elegance.(Mikael Macabali, MMXXVI)
III.Capabilities · Full-Stack · Services4 domains / 1 stack003 / 008
MIKAEL MACABALI  ·  CAPABILITIES MATRIX  ·  2026
Capabilities · Nº 03

Full-stack services for modern product teams.

I blend product thinking with technical execution — shipping interfaces, APIs, and infrastructure that feel intentional, performant, and maintainable.

01Frontend

Frontend Engineering

Building performant, accessible UIs with React, Next.js, and modern CSS. Pixel-perfect implementations from design files.

02Backend

API & Backend

Designing RESTful and GraphQL APIs, database schemas, and server-side logic with Node.js, Express, and PostgreSQL.

03Design

UI/UX & Design Systems

Creating cohesive design systems, component libraries, and user flows that scale across products.

04DevOps

DevOps & Deployment

CI/CD pipelines, Docker containerization, cloud deployments on Vercel, AWS, and Netlify.

IV.Labs / Experiments & Tools05 of many ongoing004 / 008
Labs · Nº 04

A living archive of experiments, tools, and side projects.

05
Ongoing experimentsSide projects
exploring ideas
and new techniques
Web App
012024

Portfolio v2

A complete rebuild of my portfolio using Next.js, Tailwind, and a custom CMS.

CLI
022024

Dev CLI

A command-line tool for automating common development workflows.

Design
032023

Design System

A comprehensive design system with tokens, components, and documentation.

Web App
042023

Chat Widget

An embeddable AI chat widget for portfolio websites.

CLI
052023

Icon Generator

A tool for generating icon components from SVG files.

05 / ∞ PROJECTS  ·  VIEW ALL →
V.Method / Development Loop04 stages, iterative005 / 008
Method · Nº 05

From requirement to deployed product.

+

Every stage is iterative — whiteboard to production, with feedback at every turn.

01

Discover

Understanding requirements, user needs, and technical constraints through research and stakeholder interviews.

02

Design

Translating requirements into wireframes, prototypes, and system architecture before writing code.

03

Build

Iterative development with regular check-ins, code reviews, and incremental deliveries.

04

Ship

Deployment, monitoring, and post-launch support with a focus on reliability and performance.

Process is never static. Every project refines it.
VI.Selected Work · 2026Edited by Mikael Macabali006 / 008
Selected work

Projects that balance function with intention, code with craft.

View all projects↗
VII.Collaborators / ClientsBuilding together007 / 008
Testimonials · Nº 06

“Mikael has a rare ability to take a vague product idea and turn it into a shippable, well-architected application — fast, communicative, and a genuine pleasure to work with.”

s

Sofia ReyesProduct Lead · Northstar Studio

Technologies and tools I work with daily — the stack that powers every project.

TypeScriptLanguage
ReactFrontend
Next.jsFramework
Node.jsRuntime
PostgreSQLDatabase
DockerDevOps
Read more recommendations
IX.Experience / CareerProfessional journey-- / --
Experience · Nº 08

Building products across startups and teams.

View all experience
XI.Projects / Featured WorkSelected projects-- / --
Projects · Nº 10

Featured projects and case studies.

View all projects
X.GitHub / ActivityOpen source-- / --
GitHub · Nº 09

A year of consistent building.

Loading contributions...
XIII.Setup / Development EnvironmentTools of the trade-- / --
Setup · Nº 12

My development environment.

Gears Used

Devices, extensions, and software I use daily.

VS Code / Cursor Setup

My complete editor configuration and extensions.

XIV.Journey / GrowthLearning path-- / --
Journey · Nº 13

My learning path and growth.

VIII.Contact / Start a conversationLet's build something008 / 008
Start a conversation · Nº 07

Have a project in mind? Let's build something great together.

Whether you need a full product built, a team member for a specific project, or just want to chat about technology — I'd love to hear from you.

• Livev1.0 / MIT14.55° N · 121.02° E
Nº 08
MIKAEL MACABALI  ·  FIN.