fi-ibrahim
  • Projects
  • Demos
  • How I Think
  • Contact
  • Hire Me
  • Projects
  • Demos
  • How I Think
  • Contact
Hire Me
Interactive

Live Demos

Interactive examples showing how I approach real engineering challenges. Each demo answers a specific question about capability — and the code prioritizes clarity over cleverness.

Schema-Driven Form Engine

Interactive

A form system where the schema defines everything: fields, validation, conditional logic, and nested groups. The frontend interprets backend-defined schemas — no hardcoded forms.

“Can this person build systems that adapt to changing requirements?”

ReactTypeScriptZodJSON Schema

Virtualized Data Table

Interactive

High-performance table handling 100K+ rows using windowing. Includes sorting, filtering, and keyboard navigation — no external table library. Demonstrates understanding of render optimization.

“Can this person build performant UI components from scratch?”

ReactTypeScriptCustom Virtualization

Checkout State Machine

Interactive

Multi-step checkout with explicit state machine. Handles payment failures, session recovery, and edge cases. Shows how to model complex flows with predictable behavior.

“Can this person handle complex user flows without spaghetti code?”

ReactTypeScriptState Machines

These demos are designed to be readable, not impressive. The code prioritizes clarity over cleverness.

fi-ibrahim

Full-Stack Engineer

© 2026 Muhammad Lutfi Ibrahim

Built with Next.js & Tailwind CSS