Demo Projects

Interactive demonstrations showcasing various technologies, architectures, and problem-solving approaches.

AI Image Generator

Live

Machine Learning

Describe what you want to see and watch AI bring it to life. Powered by Stable Diffusion for high-quality image generation from text prompts.

ReactTypeScriptStable DiffusionAI

Algorithm Visualizer

Live

Frontend

Step through popular sorting algorithms like Bubble Sort, Quick Sort, and Merge Sort. Watch comparisons and swaps happen in real-time with adjustable speed controls.

ReactTypeScriptTailwind CSSGenerators

Pathfinding Visualizer

Live

Frontend

Watch pathfinding algorithms explore a grid to find the shortest path. Draw walls, move start/end points, and compare how different algorithms behave. Features animated visualization with speed control.

ReactTypeScriptAlgorithmsCanvas

Conway's Game of Life

Live

Frontend

Watch cells live, die, and reproduce according to simple rules. Draw patterns, load presets like gliders and the Gosper glider gun, and see emergent complexity arise from simple rules.

ReactTypeScriptCellular AutomataSimulation

Easing Functions Playground

Live

Frontend

Explore 20+ easing functions with interactive curve graphs and real-time animation previews. Compare linear, ease-in, ease-out, bounce, and elastic functions side by side. Copy CSS timing functions directly.

ReactTypeScriptAnimationSVG

Boids Flocking Simulation

Live

Frontend

Watch hundreds of boids exhibit realistic flocking behavior using three simple rules: separation (avoid crowding), alignment (match heading), and cohesion (stay together). Adjust parameters in real-time and enable trails for mesmerizing visuals.

ReactTypeScriptCanvasSimulation

Particle Physics

Live

Frontend

Spawn particles and watch them bounce, collide, and interact. Features realistic physics with gravity, friction, elasticity, and mouse force fields. Click to spawn, or use attract/repel modes.

ReactTypeScriptCanvasPhysics

Pendulum Waves

Live

Frontend

Watch pendulums of different lengths create hypnotic wave patterns as they swing in and out of sync. Adjust parameters like count, length, and damping for different effects.

ReactTypeScriptCanvasPhysics

Fourier Transform Visualizer

Live

Frontend

Explore how any shape can be decomposed into rotating circles using the Discrete Fourier Transform. Draw your own shapes or load presets, then watch epicycles recreate them.

ReactTypeScriptDFTMath

Binary Search Tree Visualizer

Live

Frontend

Visualize binary search tree operations in real-time. Insert and delete nodes, search with animated path highlighting, and run traversals (inorder, preorder, postorder, level-order).

ReactTypeScriptSVGData Structures

GitHub Activity Dashboard

Live

Frontend

Enter any GitHub username to view their profile, repositories, language breakdown, and recent activity. Features SVG charts, caching, and rate limit awareness.

ReactTypeScriptGitHub APISVG Charts

Markdown Playground

Live

Frontend

Write markdown with live preview, export to HTML or .md file, and use templates. Features GitHub Flavored Markdown, auto-save, fullscreen mode, and word count.

ReactTypeScriptreact-markdownGFM

Weather Widget

Live

Frontend

Search any city to view current conditions, hourly forecast, and 3-day outlook. Features dynamic backgrounds, temperature unit toggle, and sunrise/sunset times.

ReactTypeScriptWeather APITailwind CSS

Pomodoro Timer

Live

Frontend

Stay focused with customizable work sessions and breaks. Features circular progress, sound notifications, session history, and daily stats.

ReactTypeScriptWeb Audio APIlocalStorage

ASCII Art Generator

Live

Frontend

Upload any image and convert it to ASCII art. Features multiple character sets, color mode, adjustable width, and export options.

ReactTypeScriptCanvas APIImage Processing

Kanban Board

Live

Frontend

Organize tasks with a visual kanban board. Drag tasks between columns, add custom columns, edit task details, and auto-save to localStorage.

ReactTypeScriptDrag & DroplocalStorage

Code Snippet Manager

Live

Frontend

Store, organize, and search your code snippets. Filter by language or tags, copy with one click, and keep everything saved locally.

ReactTypeScriptlocalStorageSearch

Color Palette Generator

Live

Frontend

Create harmonious color palettes with different color theory modes. Lock colors you like, export as CSS variables, and copy hex codes with one click.

ReactTypeScriptColor TheoryHSL/Hex

Unit Converter

Live

Frontend

Convert between units of length, weight, temperature, volume, area, speed, time, and digital storage. See all conversions at once with one-click copy.

ReactTypeScriptUnit Math

JSON Formatter

Live

Frontend

Validate, format, and minify JSON data instantly. See error messages, statistics about your JSON structure, and export formatted files.

ReactTypeScriptJSON

Regex Tester

Live

Frontend

Build and test regular expressions with real-time highlighting, detailed match info, capture groups, and find & replace functionality.

ReactTypeScriptRegExp

Password Generator

Live

Frontend

Create strong, random passwords with customizable length, character types, and exclusions. Uses cryptographic randomness for security.

ReactTypeScriptWeb Crypto API

Lorem Ipsum Generator

Live

Frontend

Generate placeholder text for your designs. Output paragraphs, sentences, words, or lists with optional HTML tags.

ReactTypeScript

Base64 Encoder/Decoder

Live

Frontend

Encode text or files to Base64, or decode Base64 strings back to their original form. Support for text and file input.

ReactTypeScriptFile API

Countdown Timer

Live

Frontend

Create multiple countdowns to important dates and events. Real-time updates, progress tracking, and local storage persistence.

ReactTypeScriptlocalStorage

Typing Speed Test

Live

Frontend

Measure your typing speed in words per minute with real-time feedback. Track your progress over time with history and statistics.

ReactTypeScriptlocalStorage

Hash Generator

Live

Frontend

Generate SHA-1, SHA-256, SHA-384, and SHA-512 hashes from text. Compare hashes for verification with built-in comparison tool.

ReactTypeScriptWeb Crypto API

Finance Calculator

Live

Frontend

Complete fintech demo with loan calculator (amortization schedule), compound interest projections with visual growth charts, and interactive budget planner with pie chart breakdown.

ReactTypeScriptSVG ChartsFinancial Math

Gradient Generator

Live

Frontend

Build beautiful CSS gradients with a visual editor. Supports linear, radial, and conic gradients with multiple color stops and preset themes.

ReactTypeScriptCSS Gradients

Diff Checker

Live

Frontend

Compare two pieces of text side by side and see differences highlighted. Uses LCS algorithm for accurate line-by-line comparison with unified diff export.

ReactTypeScriptLCS Algorithm

UUID Generator

Live

Frontend

Generate unique IDs in multiple formats: UUID v4 (random), UUID v7 (timestamp), ULID (sortable), and NanoID (compact). Bulk generation and copy support.

ReactTypeScriptWeb Crypto API

Timestamp Converter

Live

Frontend

Convert between Unix timestamps and human-readable dates. View in multiple formats (ISO, UTC, local) and across different timezones.

ReactTypeScriptIntl API

Text Case Converter

Live

Frontend

Convert text between 12 different case formats: lowercase, UPPERCASE, Title Case, camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, and more. One-click copy for each conversion.

ReactTypeScript

iCloud Email Connector

Live

Backend

A full-stack email connector that interfaces with Apple iCloud Mail through IMAP and SMTP protocols. Features include fetching messages, sending emails, folder management, and real-time sync.

Node.jsTypeScriptIMAPSMTPReact

Real-time Analytics Dashboard

Live

Frontend

A responsive dashboard showing real-time metrics with simulated WebSocket updates. Features sparkline charts, live activity feed, traffic analytics, and configurable update speed.

ReactTypeScriptSVG ChartsTailwind CSS

API Gateway Simulator

Live

Backend

Interactive API gateway simulator demonstrating rate limiting, response caching, circuit breaker patterns, and request routing. Watch traffic flow through backend services.

ReactTypeScriptTailwind CSS

ML Image Classifier

Live

Machine Learning

Upload images to see simulated ML classification results. Demonstrates image analysis concepts including feature extraction, confidence scores, and multi-class prediction.

ReactTypeScriptCanvas APIImage Processing

Component Design System

Live

Frontend

A comprehensive design system featuring buttons, inputs, alerts, tabs, modals, accordions, and more. Each component includes live examples and copy-able code snippets.

ReactTypeScriptTailwind CSS

Database Schema Visualizer

Live

Tools

Design database schemas visually with drag-and-drop tables. Define columns, primary keys, foreign keys, and relationships. Export your schema as SQL CREATE TABLE statements.

ReactTypeScriptSVGTailwind CSS

Document Converter

Live

Tools

Convert documents between PDF, Word (DOCX), and Markdown formats. Extract text from PDFs, convert Markdown to professional documents, all processed locally in your browser.

ReactTypeScriptPDF.jsdocxjsPDF

Image Color Picker

Live

Tools

Upload any image and extract color values by clicking or selecting a region. Get RGB, HEX, and HSL values instantly. Analyze regions to find average and dominant colors.

ReactTypeScriptCanvas APIColor Algorithms

Design Inspector

Live

Tools

A frontend development tool for working with design mockups. Pick colors from anywhere on the image, measure pixel distances with rulers, and auto-extract color palettes. Perfect for translating designs to code.

ReactTypeScriptCanvas APIColor Quantization

Real-Time Fraud Detection

Live

Fintech

Streaming transaction pipeline with ML-based anomaly detection. Watch transactions scored in real-time using isolation forest patterns, with SHAP-style explanations for each flagged transaction.

ReactTypeScriptEvent StreamingML Scoring

Order Matching Engine

Live

Fintech

Interactive exchange matching engine demonstrating limit orders, market orders, price-time priority, and real-time order book visualization. Shows low-latency trading system concepts.

ReactTypeScriptOrder BookTrading Systems

Payment Reconciliation Engine

Live

Fintech

Automated reconciliation across multiple payment sources (Stripe, PayPal, bank). Demonstrates double-entry accounting, discrepancy detection, and audit trail generation.

ReactTypeScriptAccountingBatch Processing

Credit Risk Scoring API

Live

Fintech

Credit scoring model with SHAP-style feature explanations. Demonstrates the full ML lifecycle plus regulatory requirements for model interpretability in lending decisions.

ReactTypeScriptML ExplainabilitySHAP

Live CSS Editor

Live

Tools

Load web pages into an iframe and edit their CSS in real-time using Monaco editor. Choose from templates, switch between multiple CSS files, and see changes instantly reflected in the preview.

ReactTypeScriptMonaco Editoriframe

Memory Palace Generator

Live

Tools

Build a memory palace with a 3D rolodex carousel. Add items to remember and get AI-generated silly scenes that blend your content with vivid imagery. Auto-play through your journey or navigate manually.

ReactTypeScriptCSS 3DMnemonic Generation

Screenshot Review

Live

Tools

Upload screenshots, draw boxes around issues, add descriptions, and generate markdown reports. Perfect for bug reports, design reviews, and QA feedback. Features AI-enhanced descriptions.

ReactTypeScriptCanvas APIMarkdown

Form Digitizer

Live

Tools

Upload an image of a paper form, draw boxes around fields, and create a fillable digital form. Enter your answers and print the completed form with values overlaid on the original.

ReactTypeScriptCanvas APIPrint API

Contractor Time Tracker

Live

Tools

Track your contractor hours with a built-in timer or manual entry. Organize by projects with custom hourly rates, filter by month, and export professional timesheets to Excel with automatic totals.

ReactTypeScriptxlsxlocalStorage

Standup Notes

Live

Tools

Track your daily standups with sections for yesterday, today, blockers, questions, and notes. Action items carry over automatically, search past standups, and copy formatted summaries for Slack/Teams.

ReactTypeScriptlocalStorageSearch

Claude Memory

Live

Machine Learning

Chat with Claude CLI while maintaining persistent memory across sessions using Redis. Claude automatically stores and retrieves relevant context, remembering facts, decisions, and conversation history.

ReactTypeScriptRedisMCPClaude CLI

Agile Board

Live

Tools

Complete agile project management tool with vision statements, epics, features, stories, and tasks. Includes Kanban board, sprint planning, daily work logs, and automatic standup generation.

ReactTypeScriptExpressSQLiteREST API

Memory Study

Live

Tools

Study vocabulary and concepts using memory palace techniques. Add keyword-definition pairs, generate silly story chains connecting them, and review in sequential mode or storybook view with vivid imagery.

ReactTypeScriptMemory TechniqueslocalStorage

Conversation Research

Live

Tools

Stream your conversation in real-time and get automatic internet searches for topics as they come up. Features continuous speech recognition, pause-based topic detection, and a split-panel view showing transcript alongside search results.

ReactTypeScriptWeb Speech APIBrave Search API

Drum Machine

Live

Audio

An interactive drum machine with 12 synthesized drum sounds triggered by keyboard keys. Features both live notation mode showing notes on a percussion staff as you play, and a 16-step sequencer for programming beats. All sounds are synthesized with Web Audio API.

ReactTypeScriptWeb Audio APISVG

Therapy Notes

Live

Tools

A therapy session notes app with AI-powered search to find related past discussions, audio recording with live transcription, automatic session summarization, and optional AES-256 encryption for sensitive content.

ReactTypeScriptWeb Speech APIWeb Crypto APISQLiteLLM

Network Monitor

Live

Tools

A comprehensive network monitoring dashboard that scans active ports, performs health checks on services, and includes a built-in HTTP request builder for testing endpoints. Perfect for debugging and monitoring local development environments.

ReactTypeScriptNode.jsExpress

Have a Project Idea?

I'm always exploring new technologies and building interesting projects. Let's collaborate!

Get in Touch