Ali Karaki
/var/log/projects

Technical Summaries

Selected work across product UI, performance, desktop, and web—focused on complex interfaces and production engineering.

Canvas-based floorplan editor (PropTech SaaS)

DraftREF_AK-001
Blueprint-like floorplan editor illustration with selection handles and snap guides.
Problem

The product needed a fast, intuitive way to draw and edit floorplans directly in the browser, with real-time interaction tooling (selection, drag/resize, constraints) and predictable behavior across complex layouts.

Solution

Built a React Konva-based editor with editor primitives (shapes, snapping, transforms), interaction state, and reusable tooling to support draw/edit/configure flows. Integrated into the broader React app and data model to keep the UI responsive and debuggable.

Learnings

Canvas editors are mostly state machines: clean separation between document state and interaction state is the difference between “works” and “maintainable”. Profiling early prevents slow death by a thousand renders.

React performance + bundle reduction (large codebase)

DraftREF_AK-002
Performance-themed illustration with charts, flame graph motif, and a speed gauge.
Problem

A large React/TypeScript codebase had slow builds and costly route loads, making iteration slow and hurting user experience.

Solution

Audited dependencies and bundling strategy using bundle analysis, then applied targeted code-splitting, lazy loading, and rendering optimizations. Validated changes via profiling and RUM where available.

Learnings

Big wins come from ruthless measurement: fix the top regressions first, then lock in the gains with lightweight guardrails (budgets/checks) so the app doesn’t drift back.

Electron desktop app reliability + upload workflows

DraftREF_AK-003
Reliability illustration showing an upload arrow, retry loop, and connected nodes.
Problem

A production Electron app used by 1,000+ support agents needed higher reliability for uploads and smoother multi-environment deployments.

Solution

Implemented resilient retry/recovery flows using Node.js + Redis, automated multi-environment deployment workflows via AWS SDK, and migrated Node.js services to TypeScript to reduce production issue frequency.

Learnings

Resilience is product work: retries, backoff, and observability turn “random failures” into diagnosable systems. Type safety pays dividends when you’re moving fast across multiple services.

fallacious-much.com — daily learning platform

DraftREF_AK-004
Learning platform illustration with connected nodes and progress arrows.
Problem

I wanted a production learning platform that ships daily “drops” with authentication, progress tracking, and a deterministic release schedule (streaks/gamification).

Solution

Built and shipped with React/TypeScript + Supabase. Added server-side validation, monitoring (Sentry), analytics (Vercel Analytics), and an interactive concept-exploration mind map using React Flow (@xyflow/react).

Learnings

Deterministic scheduling sounds simple until you need it to be debuggable and fair. Instrumentation early makes iteration dramatically faster.

High-performance corporate site + RTL i18n

DraftREF_AK-005
Side-by-side layout illustration comparing LTR and RTL interface direction.
Problem

A modern corporate site needed polished motion, strong performance, and bilingual support (English + Arabic with RTL) without introducing heavy i18n overhead.

Solution

Built with Next.js + React and implemented a lightweight i18n system with synchronized state, plus complex interactive UIs (timeline, carousels) using Framer Motion and Radix UI.

Learnings

Internationalization isn’t just strings: layout direction and typography touch everything. Lightweight systems work well if you’re disciplined about boundaries.