Skip to content

polyglot

ASL-lingo broadens and accelerates American Sign Language adoption by closing the learning loop.

Code Demo Cerebral Valley

Core trick

MediaPipe hand-landmark tracking on the webcam scores a learner's sign against the target pose in real time.

Tags

educationvision

Description

ASL-lingo broadens and accelerates American Sign Language adoption by closing the learning loop. Traditional tools are one-directional: they show signs but never verify if the learner is signing correctly. ASL-lingo lets users learn a sign, perform it on camera, and receive real-time feedback. Tech stack: Next.js · React · TypeScript · Tailwind CSS · MediaPipe Tasks Vision · Google Gemini API · Git
siva73-git/learning-asl★ 02 forksTypeScriptCreated Mar 7, 2026 · last push Mar 10, 2026

README excerpt

# ASL-lingo

An interactive web app for learning American Sign Language using real-time hand tracking via MediaPipe.

Built with Next.js 16, React 19, Tailwind CSS 4, and TypeScript.

## Prerequisites

- **Node.js** >= 18 (tested on v22)
- **npm** >= 9
- A webcam (required for hand tracking)
- The MediaPipe hand landmark model at `public/models/hand_landmarker.task` (already included)

## Setup

```bash
# 1. Install dependencies
npm install

# 2. Check for lint errors
npm run lint

# 3. Build for production (also catches type errors)
npm run build
```

## Development

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) in your browser.

## Production

```bash
npm run build
npm start
```

## Available Scripts

| Script          | Command           | Description                              |
| --------------- | ----------------- | ---------------------------------------- |
| `npm run dev`   | `next dev`        | Start dev server with hot reload         |
| `npm run build` | `next build`      | Create optimized production build        |
| `npm start`     | `next start`      | Serve the production build               |
| `npm run lint`  | `eslint`          | Run ESLint across the project            |

## Project Structure

```
src/
  app/
    page.tsx              # Homepage (landing page)
    layout.tsx            # Root layout with fonts and metadata
    learn/page.tsx        # Learning page with camera + hand tracking
    globals.css           # Globa

Team