ARCHIVE / 2024

The collection of calculated responses
to complex digital challenges.

✦ FEATURED CASE STUDY

Snap-a-Recipe

Problem: Identifying food ingredients manually into recipe engines caused high friction for users looking for quick meal ideas.
Architecture: AI-powered Next.js application leveraging the Google Gemini API for complex image-to-text analysis and recipe generation.
Engineering Tradeoff: Pre-upload client-side cropping vs direct raw uploads. Why? Exchanging a minor frontend UX step for massive payload reduction, significantly decreasing AI processing latency and focusing the analysis solely on the actual dish.

High-Level Architecture

[ User Device / Camera ] 
   │ 
   │  (Client-side Crop & Compress)
   ▼
[ Next.js Frontend ] ──► [ Local Storage ] (Persistent Shopping List)
   │
   │  (Optimized Image Payload)
   ▼
[ Serverless API Gateway ]
   │
   ├──► [ Google Gemini Vision API ] (Image-to-Recipe generation)
   │
   ▼
[ JSON Recipe Parser ]
   │  (Formatting / Localization)
   ▼
[ Interactive UI ] (Kitchen Mode & Print)
                    

The Result

A responsive, multi-language application delivering seamlessly formatted recipes and interactive cooking modes under low latency constraints.

LIVE DEMO ↗ SOURCE CODE →

✦ CASE STUDY

MuHub Platform

Problem: Students lacked a unified platform for course materials, causing heavy file-sharing friction and fragmenting critical communication — directly impacting learning outcomes.
Architecture: Centralized microservices environment with scalable relational data models in PostgreSQL and a React frontend mapped to strict web accessibility standards.
Engineering Tradeoff: Direct buffer streaming vs chunked uploads. Why chunked? To eliminate out-of-memory crashes on low-end student devices during 50MB+ transfers — prioritizing 100% reliability over raw network speed.

High-Level Architecture

[ Low-End Client Device ]
   │
   │  (5MB Chunked Requests)
   ▼
[ API Gateway / Node.js ] ──► [ Redis Rate Limiting ]
   │
   ├──► [ PostgreSQL Cluster ] (User state & Metadata)
   │
   ▼
[ Upload Processing Worker ]
   │  (Chunk Aggregation & Validation)
   ▼
[ Secure Object Storage ]
                    

The Result

Zero crash reports on heavy payload transfers. Reduced average file-retrieval time by 40% across the student base.

LIVE DEMO ↗ SOURCE CODE →

Additional Archive

01 / TOOLING

HTML, CSS, JavaScript

Typer Trainer

Problem: Need an engaging way to improve typing speed while memorizing programming commands.
Features: Built Command-Sprint and Bug-Fix Rush modes to practice coding terms and terminal commands simultaneously.
→ Impact: An interactive platform that records high scores and makes practicing both fast typing and syntax fixing seamless.

LIVE DEMO ↗ SOURCE CODE →

UTILITY / EDUCATION

05 / EXPERIMENT

In Progress

Mizan

Status: Currently in development.

Concept: An evolving project exploring data balancing, architecture constraints, and efficient user flows. Embracing the "build in public" philosophy to document architectural decisions and trade-offs.

SuhoorCall

Status: Currently in development.

Concept: A targeted scheduling and notification service to automate timing logistics. Currently experimenting with web service workers, push notifications, and high-reliability scheduling.

UTILITY / SCHEDULING

Follow Progress ↗

Graphic Design Projects

I handle all visual design for my own projects — from brand identity to UI systems. Owning the full stack from architecture to pixel means I ship faster and with fewer handoffs.