Portfolio project · 2026

SignSpeakHand Gesture Tracker

Real-time hand gesture recognition with browser-based AI feedback. Practice guided gestures, track your confidence, and study your progress — no install, no upload.

Real-time AI
Instant feedback
High Accuracy
Advanced models
Privacy First
On-device processing
TypeScriptReactTensorFlow.jsNode.jsBrowser CameraReal-Time AI
Live Hand Tracker
Camera is off
Enable your webcam to start live hand gesture recognition.
Camera: Idle
Predicted Gesture
Demo mode
Confidence Score
0%
0%100%
Camera off
Prediction History
Predictions will appear here once tracking starts.
Practice Sessions

Guided practice, one gesture at a time

Each session sets a target confidence and rep goal. Complete reps by holding the gesture above the target threshold.

👋
Hello
Easy

Open palm wave — a friendly greeting gesture.

Target Confidence
90%
Reps
10
🙏
Thank You
Medium

Hands together at chest — an expression of gratitude.

Target Confidence
90%
Reps
10
Help
Hard

Raised open hand — a request for assistance.

Target Confidence
90%
Reps
10
👍
Yes
Easy

Thumbs up — an affirmative response.

Target Confidence
85%
Reps
8
👎
No
Easy

Thumbs down — a negative response.

Target Confidence
85%
Reps
8
🤲
Please
Medium

Cupped hands — a polite request.

Target Confidence
88%
Reps
8
Session History

Every practice, logged

Sessions stream from localStorage today — the API shape mirrors a Node.js backend for a drop-in swap later.

No sessions yet
Complete a practice session to see it appear here.
Technical Case Study

How SignSpeak is built

A portfolio breakdown of the architecture, honest about scope: this is a gesture recognition & practice tracker, not a full ASL translator.

Real-time webcam input

Uses the browser MediaDevices API to stream a live camera feed with graceful permission handling.

TensorFlow.js inference

Client-side model loading with automatic fallback to a realistic demo predictor when no model is present.

TypeScript component architecture

Reusable, strictly-typed primitives — CameraPanel, PredictionCard, ConfidenceMeter, ProgressStats, and more.

Practice-session state management

Deterministic React state for reps, confidence, timer, and completion feedback — with celebration UX.

Session history & progress tracking

Persists locally via a service layer that hides the storage backend from consumers.

Node.js-ready API structure

sessionService is shaped after REST endpoints (GET/POST /api/sessions, GET/PUT /api/progress) for a drop-in swap.

Portfolio summary

Rebuilt a hand gesture recognition app with real-time browser camera input, prediction feedback, confidence scoring, guided practice sessions, session history, and user progress tracking.

Tech stack
TSTypeScriptReactTFTensorFlow.jsNNode.jsBrowser CameraAIReal-Time AI