velvet-navigation

byEniya

Build a FULLY COMPLETE, production-ready, startup-level Smart Blind Assist web application using React + Vite + TypeScript + Tailwind CSS + Supabase + Twilio. This system must be REAL-TIME, PROFESSIONAL, and DEMO-READY with ZERO mock behavior for critical features. --- ## PROJECT GOAL Develop an AI-powered assistive system for visually impaired users that provides: * Real-time navigation * AI-based obstacle detection * Voice-controlled interaction * Emergency SOS alerts * Caregiver monitoring system This must behave like a real-world product, not a simple student UI. --- ## TECH STACK Frontend: * React + Vite + TypeScript * Tailwind CSS (premium dark + orange theme) * Framer Motion (animations) Backend: * Supabase (Auth + Database + Realtime) * Supabase Edge Functions External APIs: * Geolocation API (real GPS tracking) * Web Speech API (voice input/output) * TensorFlow.js (optional object detection) * Twilio API (SMS + Call + WhatsApp alerts) --- ## AUTHENTICATION SYSTEM Build a complete auth system: Signup fields: * Name * Email * Password * Role (Blind User / Caregiver) On signup: * Save user in Supabase Auth * Insert into "profiles" table: id (uuid) name role phone_number (optional) created_at Login: * Redirect based on role: Blind → /user-dashboard Caregiver → /caregiver-dashboard --- ## DATABASE STRUCTURE (SUPABASE) Tables: 1. profiles * id (uuid) * name (text) * role (text) * phone_number (text) * created_at 2. contacts (IMPORTANT) * id * user_id * caregiver_number * caregiver_name 3. locations * id * user_id * latitude * longitude * updated_at 4. alerts * id * user_id * message * latitude * longitude * created_at --- ## USER DASHBOARD (PREMIUM UI) Design: * Dark background (#0f172a) * Orange gradients * Glassmorphism cards * Animations (Framer Motion) Features: 1. 🆘 SMART SOS SYSTEM (REAL WORKING) * Large glowing SOS button * Trigger methods: * Button click * Voice command * Fall detection On trigger: * Get real GPS location * Save to Supabase alerts table * Call Supabase Edge Function Edge Function must: * Fetch caregiver numbers from contacts table * Send: SMS via Twilio WhatsApp message Auto-call * Include Google Maps link: https://maps.google.com/?q=lat,lng --- 2. 📍 REAL-TIME GPS TRACKING * Use watchPosition() * Continuously update location in DB * Accuracy + speed display --- 3. 🎤 VOICE CONTROL SYSTEM * Always listening (SpeechRecognition) Commands: * “Send emergency” * “Get location” * “Start navigation” * “Open dashboard” Responses using SpeechSynthesis --- 4. 🧭 REAL NAVIGATION SYSTEM * Voice input: “Take me to hospital” * Use Google Maps Directions API * Provide: Step-by-step voice guidance Distance + ETA --- 5. 👁️ AI OBJECT DETECTION * Camera access (getUserMedia) * TensorFlow coco-ssd Voice output: * “Person ahead” * “Obstacle on your left” --- 6. 🚦 TRAFFIC SIGNAL DETECTION (SIMULATED/AI) * Detect signal state * Voice alerts --- 7. 🧠 ENVIRONMENT AWARENESS * Detect: * Crowded area * Indoor / outdoor * Voice feedback --- 8. 📍 FAVORITE PLACES * Save: Home, Shop, Hospital * Voice: “Take me home” --- 9. 🔋 BATTERY ALERT SYSTEM * If battery < 15% * Voice: “Battery low” * Notify caregiver --- 10. 📡 OFFLINE MODE * If no internet: * Continue voice alerts * Show “Offline Mode Active” --- --- ## CAREGIVER DASHBOARD Professional monitoring system: Features: 1. 🗺️ LIVE TRACKING MAP * Real-time user movement * Auto update via Supabase Realtime 2. 🚨 LIVE ALERT SYSTEM * When SOS triggered: * Instant UI update * Toast notification * Red alert UI 3. 📊 USER STATUS PANEL * Safe / Danger indicator * Last active time * Battery status 4. 📜 ALERT HISTORY * List of past emergencies --- --- ## REAL-TIME SYSTEM * Subscribe to: alerts table locations table Use Supabase channels for live updates --- --- ## EDGE FUNCTION (VERY IMPORTANT) Create Supabase Edge Function: Function: send-sos Steps: 1. Receive user_id, lat, lng 2. Fetch caregiver numbers 3. Create message: "Emergency! User needs help: https://maps.google.com/?q=lat,lng" 4. Send: * SMS (Twilio) * WhatsApp * Call --- --- ## UI/UX REQUIREMENTS * Premium startup-level design * Glassmorphism * Smooth animations * Large accessible buttons * Fully responsive --- --- ## SECURITY * Enable Row Level Security (RLS) * Users can only access their own data * Secure Edge Functions --- --- ## EXPECTED OUTPUT * Fully working login/signup * Real GPS tracking * Real SOS sending SMS * Voice-controlled system * Caregiver live monitoring * AI-based detection * Production-level UI --- --- ## GOAL Deliver a real-world, scalable assistive technology system that replaces traditional smart sticks using smartphone-based intelligence. --- IMPORTANT: Build step-by-step. Ensure each module works before moving forward. Avoid mock data for critical features.