live demoConcept project
Field Boundary Drawing Tool
Draw a field near Sargodha, drag its corners, watch hectares update live, then export and re-import it as GeoJSON.
TypeScriptReact.jsNext.jsLeaflet
▶ Open demo// lab
Live demos
These are concept projects I built to show how I work, and every one of them runs right here in your browser. Each demo has a case study explaining the design and a “View source” section with the exact code that runs. They use sample data, are labelled as concepts, and are not client work.
## Maps & geospatial
Leaflet, GeoJSON, NDVI and PostGIS-style queries.
- live demo
live demoConcept project
NDVI Time-Series Viewer
Play a season of NDVI across six fields, compare their curves, and tune the detector that flags a stressed wheat field.
TypeScriptReact.jsNext.jsLeaflet▶ Open demo
live demoConcept project
Location-Based Store Finder with PostGIS
Click anywhere in Lahore to find the nearest stores, filter by open now and services, and read the PostGIS query for each search.
TypeScriptReact.jsNext.jsLeaflet▶ Open demo
live demoConcept project
Vue 3 Property Listing with Filters and Leaflet Map
Filter 60 listings, hover a card to light its pin, search the map area, save a search and reopen it from a copied link.
TypeScriptVue 3PiniaLeaflet▶ Open demo
live demoConcept project
Weather and Crop Advisory Widget
Click a farm on the map, choose a crop and stage, and get live-weather advice on irrigation, heat stress and spray windows.
TypeScriptReact.jsNext.jsLeaflet▶ Open demo
## Backend & APIs
API consoles, queues and webhooks you can poke at.
live demoConcept project
Clinic Booking System
Book a slot in your time zone, race two bookings for one slot, then drag appointments in the admin calendar and watch overlaps fail.
TypeScriptReact.jsNext.jszod▶ Open demo
live demoConcept project
Job Queue and Background Workers with NestJS and BullMQ
Enqueue jobs, add or SIGTERM workers, raise the chaos slider and watch retries back off into the dead-letter set.
TypeScriptReact.jsNext.js▶ Open demo
live demoConcept project
NestJS REST API with Auth, RBAC and Swagger
Sign in as admin, editor or user, call endpoints, untick a permission and watch the same request turn into a 403.
TypeScriptReact.jsNext.js▶ Open demo
live demoConcept project
URL Shortener with Click Analytics
Shorten a link, claim an alias, follow it and watch the 301, the click count and the referrer chart update live.
TypeScriptReact.jsNext.js▶ Open demo
live demoConcept project
File Upload and Image Processing Service in Node.js
Drop a file, pause and resume a chunked upload, and see a renamed .exe and a 12 MB zip get refused.
TypeScriptReact.jsNext.jsWeb Crypto API▶ Open demo
live demoConcept project
GraphQL API with NestJS
Write GraphQL queries and mutations, then compare the SQL count with and without DataLoader batching.
TypeScriptReact.jsNext.jsGraphQL▶ Open demo
live demoConcept project
Inventory Management System
Oversell a product, run a transfer that fails halfway and rolls back, receive a purchase order and export the low-stock list.
TypeScriptReact.jsNext.jszod▶ Open demo
live demoConcept project
Invoice and PDF Generator API
Build an invoice, watch exact totals update, double-submit it to test idempotency, then save it as a PDF.
TypeScriptReact.jsNext.js▶ Open demo
live demoConcept project
Multi-tenant SaaS Backend with NestJS and PostgreSQL
Switch tenants, request another company's data, spoof a tenant header and hit a plan limit, all with the SQL shown.
TypeScriptReact.jsNext.js▶ Open demo
live demoConcept project
Webhook Relay and Event Logger
Fire signed webhooks, tamper with one, resend a duplicate and watch a flaky destination retry on a schedule.
TypeScriptReact.jsNext.jsWeb Crypto API▶ Open demo
## Full-stack apps
Business apps with their data layer visible.
live demoConcept project
Real-time Chat with Next.js and NestJS WebSockets
Chat as three people, take one offline, send messages, reconnect and watch the outbox flush and missed messages sync.
TypeScriptReact.jsNext.jsBroadcastChannel API▶ Open demo
live demoConcept project
E-commerce Storefront with Test-Mode Checkout
Filter the catalogue, pick variants, check out with a test card, trigger 3-D Secure and watch the SQL behind every step.
TypeScriptReact.jsNext.jszod▶ Open demo
live demoConcept project
Mini Learning Management System
Enrol, finish lessons, pass server-graded quizzes for a certificate, then switch to instructor and publish a lesson.
TypeScriptReact.jsNext.jszod▶ Open demo
live demoConcept project
Restaurant Ordering and Kitchen Display System
Scan a table code, order with modifiers, then run the kitchen board from New to Served and watch your tracker update.
TypeScriptReact.jsNext.jszod▶ Open demo
## Vue & Nuxt
Real Vue 3 and Pinia code, mounted on this page.
live demoConcept project
Nuxt 3 News Site with Route Rules and SEO Head
Browse a news site, watch each page come from SWR, ISR or a fresh render, edit a story in the CMS and see the cache catch up.
TypeScriptVue 3PiniaNext.js▶ Open demo
live demoConcept project
Vue 3 Admin Panel with Role-based Access and Pinia
Switch roles, open a guarded URL, edit the permission matrix and force a forbidden API call to see the 403 land in the audit log.
Vue 3PiniaTypeScriptzod▶ Open demo
live demoConcept project
Vue 3 Quiz App with Timed Exams and Spaced Review
Take a timed exam, reorder items by drag or keyboard, see partial credit and explanations, then review missed questions.
TypeScriptVue 3PiniaNext.js▶ Open demo
## WordPress
Plugins, themes and WooCommerce, simulated faithfully.
live demoConcept project
Custom WordPress Booking Plugin
Request a slot, approve it in wp-admin, then break it: stale nonces, a subscriber's crafted URL, two visitors racing.
TypeScriptReact.jsNext.js▶ Open demo
live demoConcept project
Custom WordPress Theme from a Figma Design
Inspect a theme page to see the template part, ACF fields and theme.json tokens behind each section, then edit and reorder it.
TypeScriptReact.jsNext.js▶ Open demo
live demoConcept project
Headless WordPress and Next.js Blog
Publish a post in wp-admin and watch the webhook purge cache tags and the Next.js page regenerate. Preview drafts too.
TypeScriptReact.jsNext.js▶ Open demo
live demoConcept project
WooCommerce Store Customization
Configure a product, check out with a Sunday delivery date and watch which WooCommerce hooks fire, with the PHP for each.
TypeScriptReact.jsNext.js▶ Open demo
live demoConcept project
WordPress Speed Optimization: A Load Simulator
Switch WordPress speed fixes on and off and watch a modelled waterfall, LCP, CLS and TBT change. The model is shown in full.
TypeScriptReact.jsNext.js▶ Open demo
## Front end & React
Interfaces, components and tooling.
live demoConcept project
Kanban Board with Keyboard Drag and Drop
Drag cards by mouse, touch or keyboard, hit a WIP limit, filter by label, edit a card in the drawer and undo it all.
TypeScriptReact.jsNext.js▶ Open demo
live demoConcept project
Multi-step Form Builder with React and zod
Drag fields into steps, add a regex rule or a condition, then fill the live preview and copy the generated zod schema.
TypeScriptReact.jsNext.jszod▶ Open demo
live demoConcept project
SaaS Analytics Dashboard in Next.js with SVG Charts
Filter 18 months of fictional subscriptions by range, plan, region and channel; hover the charts, read cohorts and export CSV.
TypeScriptReact.jsNext.js▶ Open demo
live demoConcept project
Accessible React Component Library
Use Dialog, Tabs, Combobox, Menu, Toast and Switch by keyboard while an inspector shows the role, name and ARIA state.
TypeScriptReact.jsNext.js▶ Open demo
live demoConcept project
Design-to-Code Landing Page with a Spec Overlay
Switch phone, tablet and desktop frames, turn on the spec overlay and grid, and click any element to see its tokens.
TypeScriptReact.jsNext.jsTailwind CSS▶ Open demo
live demoConcept project
Markdown Blog Engine with a Hand-written Parser
Write Markdown and watch the preview, TOC, reading time, Google snippet and social card update; try a javascript: link.
TypeScriptReact.jsNext.jszod▶ Open demo