SkillSnap Coach

SkillSnap Coach — learn the right step, right now, on the job.

Comment

Inspiration

The inspiration for SkillSnap Coach came from observing frontline workers in construction, retail, and healthcare struggling to access training materials while actively working. Traditional training methods require workers to leave their workstations, attend lengthy sessions, or read through dense manuals. We asked ourselves: What if learning could happen in the flow of work, taking just 30-90 seconds?

What it does

SkillSnap Coach is an offline-first Progressive Web App (PWA) that revolutionizes frontline worker training:

Core Features 📸 Image-Aware Training

Upload photos of your work environment AI analyzes the image and tailors safety guidance accordingly Detects potential hazards with bounding boxes and risk assessments ⚡ 30-90 Second Microlearning

Concise skill cards with step-by-step instructions "Say-Do-Why" methodology for each step Watch-outs for common mistakes and how to fix them Clear escalation criteria for when to get help 📝 Interactive MCQ Assessments

4-7 multiple-choice questions per skill Tests comprehension of critical concepts 70% passing threshold to ensure understanding Immediate feedback with correct answer explanations 💬 AI Chatbot Assistant

Skill-specific Q&A using Gemini AI Contextual responses based on the current training module Available during learning, hidden during assessments to prevent cheating 📚 Training History & Progress Tracking

Complete record of all training completions Visual badges showing passed/attempted skills Performance analytics (pass rate, attempts, scores) Filter by role and review past quiz results 🔊 Hands-Free Learning

Text-to-Speech for the entire skill card Perfect for workers with gloves or in motion Accessible training for all learning styles 📱 Offline-First Architecture

Works without internet connectivity IndexedDB caching of skill cards and completions Service Worker for offline functionality PWA installable on mobile devices

How we built it

Frontend (React + TypeScript + Vite) Backend (Node.js + Express + TypeScript) Gemini AI Integration

Challenges we ran into

Screen State Management Completion Tracking Data Structure

Accomplishments that we're proud of

✨ Full-Stack AI Integration - Successfully integrated Google Gemini for both structured skillcard generation AND conversational chatbot functionality

🎨 User-Centric Design - Created an intuitive UI that requires zero training, perfect for frontline workers who need immediate value

🚀 Offline-First Architecture - Built a truly offline-capable PWA that works in construction sites, retail floors, and hospitals with spotty connectivity

📱 Progressive Web App - Installable on any device with service worker caching and responsive design

🧠 Intelligent MCQ Generation - AI generates contextual, practical quiz questions that test real understanding, not just memorization

📈 Comprehensive Analytics - Training history with completion badges, pass rates, and skill-specific progress tracking

♿ Accessibility Features - Text-to-speech for hands-free learning, suitable for workers in gloves or actively working

What's next for SkillSnap Coach

🔮 Planned Features:

Voice Input - Voice-to-text for hands-free quiz answers Personalized Learning Paths - AI-recommended skills based on role and performance Team Dashboards - Supervisor view of team completion rates and knowledge gaps Multi-Language Support - Spanish, Mandarin, Hindi for diverse workforces Advanced Analytics - Skill decay detection, refresher recommendations Micro-Credentials - Digital badges and certificates for completed training Peer Learning - Share notes and tips on specific skills AR Overlay - Augmented reality step-by-step guidance using device camera Integration APIs - Connect with existing LMS and HRIS systems Custom Skill Creation - Allow supervisors to create organization-specific skills

Built With

Share this project:

Updates