Signing Bee

Signing Bee is an ASL spelling practice game that uses webcam-based gesture recognition, a React frontend, and an Express backend to track users and leaderboard scores.

PFW Fall 2025
CS53701 Full-Stack Web Development
Term Project

• Harrison Niswander
• Ricardo Saldana-Cervantes
• Steven LaGoy
• Zachary McGill

---

Project Context

This started as a team project for a full-stack web development course. I maintain this fork as a portfolio version with the deployment and data layer moved onto Google Cloud so the project can stay live without depending on the original team-owned database.

Recent work in this fork:

• Replaced the original PostgreSQL/Supabase dependency with Google Cloud Firestore.
• Refactored the backend into testable Express app and repository layers.
• Added a single /leaderboard API route so the frontend no longer makes one request per user.
• Updated Cloud Run/Cloud Build deployment docs and removed unused legacy database code.

---

Tech Stack

• Frontend: React + Vite
• Computer vision: MediaPipe hand tracking + TensorFlow.js landmark classifier
• Backend: Node.js + Express
• Database: Google Cloud Firestore
• Cloud services: Cloud Run, Cloud Build, Firestore, Cloud Text-to-Speech
• Testing: Jest (unit & integration), Supertest (API), Cypress (E2E)

---

Requirements

• Node.js >= 18
• npm >= 9
• Google Cloud project with Firestore enabled for deployed backend data
• Git
• Chrome or another Cypress-supported browser

---

Getting Started

1. Clone the repository

git clone https://github.com/zmcgill7/SigningBee.git
cd SigningBee

2. Install dependencies

Make sure you have Node.js (>=18) installed.

From the project root, run:

cd frontend && npm i

And again from the project root, run:

cd backend && npm i

3. Run the development server

• Start the frontend:

cd frontend && npm run dev

• Start the backend:

cd backend && npm start

The Vite dev server prints the local frontend URL. The backend defaults to port 8080.

Backend routes that read or write app data use Firestore. For local Firestore access, authenticate with Google Application Default Credentials:

gcloud auth application-default login

---

Available Commands

• Build for production

  cd frontend && npm run build

  Creates an optimized production build in frontend/dist/.

  The Dockerfile builds the frontend and serves it from the Express backend in Cloud Run.

• Run backend tests

  cd backend && npm test

• Run frontend tests

  cd frontend && npm test

• Run end-to-end tests

  cd frontend && npm run test:e2e

  Or run headless with:

  cd frontend && npm run test:e2e:headless

• Lint frontend

  cd frontend && npm run lint

Deployment

This fork is configured for Google Cloud Build and Cloud Run using cloudbuild.yaml. The backend uses Firestore through Google Application Default Credentials, so Cloud Run should use a service account with Firestore access. No service account key should be committed to the repo.

Deployments should pass an explicit project and region when using gcloud, especially if another project is being managed in a separate terminal:

CLOUDSDK_CONFIG=/tmp/signingbee-gcloud gcloud builds submit --project=<project-id> --region=us-central1

This keeps the app on GCP with Cloud Run for the containerized web service and Firestore for user and score data.