Muhammad Abdullah, frontend and full-stack engineer

Eight products.
Each one an aperture.
One engineer.

I build web products where the interface is not an afterthought. Every piece below was shipped inside its own deliberate visual system, because the way a thing feels is part of what it does. Hover any entry and this page takes on its colours, right down to the scrollbar.

See the workAbudora-0
8
Products shipped
8
Design languages
8
Live deployments
32
Technologies used
01Selected work
01

Wanderlens

Spin a 3D globe, drop into any place on Earth, get the trip worth taking.

Design language

Aperture optics. A photographic lens as the interface: an iris that opens on load, deep space blues, hairline reticles.

LiveSource2026
Screenshot of Wanderlens

Type a place or click a country on an interactive three.js globe and Wanderlens assembles one briefing: the best places to visit, blended and de-duplicated from Wikivoyage and geo-tagged Wikipedia, live weather with a seven day outlook, and full country context with animated counters. Every data source is fetched independently, so one slow or failing API degrades the page instead of breaking it.

  • Interactive WebGL globe with a cobe-rendered fallback
  • Six open datasets merged, ranked and attributed at runtime
  • No API keys, no accounts, no trackers, no database
  • Next.js
  • React
  • TypeScript
  • three.js
  • Motion
  • Lenis
  • Tailwind CSS v4
02

Dish It

Cook the thing you are actually craving.

Design language

The interface is the food. The scrollbar drips like sauce, counters roll like an old till, the theme switch is a stove dial, dropdowns open like a lifting pot lid.

LiveSource2026
Screenshot of Dish It
Open live siteBlocks embedding

An animated recipe kitchen for food, shakes and drinks. Explore by flavour and mood on a draggable craving wheel, follow a full screen cook mode with stacking countdown timers and a screen wake lock, and build layered drinks in a mixer that fills the glass as you drop parts in. A saved cookbook, a categorised shopping list and a drag and drop weekly meal planner all live on-device with no account.

  • Full screen cook mode with stacking timers and servings scaling
  • Drink mixer with live nutrition, a flavour radar and URL-encoded share links
  • Command palette, per-recipe OG images, Recipe JSON-LD, PWA, a Konami code
  • Next.js 16
  • React 19
  • TypeScript
  • Framer Motion
  • Sanity CMS
  • Tailwind CSS 4
  • PWA
03

Tessera

A generative wallpaper studio. It does not store images, it draws them.

Design language

Gallery instrument. Warm graphite, a single amber accent, Space Grotesk over Geist Mono, a shelf you curate. Calm chrome around a loud canvas.

LiveSource2026
Screenshot of Tessera

Pick one of six drawing families, Waveform, Bauhaus, Halftone, Terrazzo, Ripple or Marble, and a palette, then tune seed, density, contrast, detail and turbulence until the composition is yours. Everything renders deterministically on a 2D canvas with no WebGL dependency, then exports pixel perfect for any phone, tablet or desktop up to 5K.

  • Six procedural drawing algorithms driven by simplex noise flow fields
  • Deterministic seeds, so every wallpaper is a shareable number
  • Pixel perfect export at device presets or a custom size
  • Next.js 16
  • React 19
  • TypeScript
  • Canvas 2D
  • Zustand
  • simplex-noise
  • Tailwind CSS v4
04

CODEREVIEW.SYS

Paste code, get a structured review in seconds: bugs, security, performance, refactor.

Design language

Phosphor audit terminal. Warm graphite and an amber CRT accent, all JetBrains Mono, faint scanlines, zero border radius, a segmented instrument gauge, compiler-style diagnostics and a vim status line.

LiveSource2026
Screenshot of CODEREVIEW.SYS

An AI code review tool that analyses a snippet and returns an animated quality gauge with a stamped verdict, bug detection with exact line numbers, OWASP-style security findings, performance suggestions and a fully rewritten version of the code. Thirteen languages, a Monaco editor, one-click export of the full report as Markdown, and Ctrl+Enter to run.

  • Animated instrument gauge scoring 0 to 100 with a stamped verdict
  • Line accurate bug, security and performance diagnostics
  • Groq and Llama 3.3 70B, Monaco editor, Markdown export
  • Next.js 16
  • TypeScript
  • Tailwind CSS 4
  • Monaco Editor
  • Groq API
  • Llama 3.3 70B
05

Kernal

Your GitHub activity as a Bloomberg terminal.

Design language

Financial market terminal. Deep navy-black panels with signal green ticks, IBM Plex Mono readouts with tabular numerals, dotted leader lines, function key tabs and a segmented DEV INDEX gauge.

LiveSource2026
Screenshot of Kernal

A GitHub-integrated developer dashboard that turns public activity into a data-rich profile: a letter-grade developer score derived from real metrics, a contribution heatmap, current and longest streaks, a language breakdown, top repositories, an activity feed and an hourly heatmap. Sign in with GitHub for your own dashboard, or look up any public username at a shareable URL.

  • Letter-grade DEV INDEX computed from live GitHub REST and GraphQL data
  • Contribution graph, streak tracking and hourly activity heatmap
  • GitHub OAuth, shareable public profile pages
  • Next.js 14
  • TypeScript
  • Tailwind CSS 3
  • NextAuth.js
  • PostgreSQL
  • Prisma 5
  • Recharts
06

Dossier

A Kanban job application tracker that looks like a paper dossier desk.

Design language

Paper dossier desk. Warm cream ground, manila folder columns with real tabs, applications as ruled index cards, priorities as tilted rubber stamps, Courier Prime typewriter labels.

LiveSource2026
Screenshot of Dossier

Drag applications through five folders, from Wishlist to Applied to Interview to Offer to Rejected, with deadline tracking that auto-highlights overdue cards in red, colour-coded priority flags, search and filter, and a statistics dashboard of pipeline counts. One-click seed data for demos, GitHub OAuth to keep a board private, and confetti when a card reaches Offer.

  • dnd-kit drag and drop across a five stage pipeline
  • Automatic overdue deadline highlighting and priority stamps
  • Stats dashboard, GitHub OAuth, one-click demo seed
  • Next.js 14
  • TypeScript
  • Tailwind CSS 3
  • NextAuth.js
  • PostgreSQL
  • Prisma 5
  • dnd-kit
  • Recharts
07

Nexus

Chat with your documents, fully local by default, or try the hosted demo.

Design language

Neon terminal and data archive. Void black with a drifting circuit grid and cyan-magenta glow, Orbitron over Rajdhani, a hexagonal glitching logo mark, gradient neon scrollbars.

LiveSource2026
Screenshot of Nexus

Upload a PDF or text file and ask questions about it, powered by retrieval augmented generation. Documents are chunked, embedded and stored in LanceDB for vector search. Answers stream token by token over Server-Sent Events with source citations for every claim, plus full document summarisation and browser-persisted chat history. The chat and embedding backends are pluggable: run fully local on Ollama with nothing leaving your machine, or point at a hosted Groq and Gemini pipeline for a zero-cost public demo.

  • Pluggable backend, local Ollama by default or hosted Groq and Gemini
  • Token-streamed answers over SSE with per-chunk source citations
  • The hosted demo runs on a free Render tier, so a quiet backend can take a moment to wake up
  • FastAPI
  • Python
  • React 19
  • Vite
  • TypeScript
  • Ollama
  • LanceDB
08

Typeset

A zero-setup GitHub portfolio generator. Any username, one shareable page.

Design language

Swiss International Typographic Style. Paper white ground, one red accent, massive Archivo grotesk headlines, an exposed hairline grid, numbered sections and crosshair grid marks.

LiveSource2026
Screenshot of Typeset

Enter any GitHub username and get a print-styled profile page in seconds: a searchable repository grid sortable by stars, forks or last update, a segmented language breakdown, recently active repositories, and a stats overview. No database, no auth, no API key, it runs on the public GitHub API. Every portfolio lives at a shareable URL.

  • Instant print-styled portfolio for any GitHub user
  • Segmented language bar, sortable repo grid, shareable URLs
  • Zero config on the public GitHub API, no credentials
  • Next.js 16
  • React
  • TypeScript
  • Tailwind CSS 4
  • GitHub REST API
02About

My work spans zero-backend static apps that merge open datasets at runtime, full-stack products with Postgres, Prisma and OAuth, and a local-first RAG pipeline running entirely on-device. The common thread is finish: reduced motion fallbacks, real loading states, structured metadata, keyboard support and a point of view on how the product should look.

This site is built the same way. No animation library and no UI kit. The wordmark, the illustrations, the counters, the listbox and the command palette are all hand rolled from CSS keyframes and a few small hooks, which is why the whole page still ships as static HTML.

CurrentlyOpen to frontend and full-stack roles, and building things that take the interface as seriously as the data behind it.

Languages and frameworks

  • TypeScript
  • React 19
  • Next.js 14 to 16
  • Python
  • Node.js

Interface and graphics

  • Tailwind CSS v4
  • Framer Motion
  • Canvas 2D
  • three.js
  • Lenis
  • Design systems

Backend and data

  • FastAPI
  • Route handlers
  • PostgreSQL
  • Prisma
  • Supabase
  • Sanity CMS
  • LanceDB

APIs, auth and AI

  • NextAuth
  • GitHub REST and GraphQL
  • Groq
  • Ollama
  • RAG
  • SSE streaming

Craft and delivery

  • Accessibility
  • Reduced motion
  • SEO and JSON-LD
  • PWA
  • Vercel
  • Lighthouse

Contact

m.abdullah21306@gmail.com