8080.AI
DesignReqsTasksUser FlowArchitecture
Log inSign up for free

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.

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document

System Requirements Document (SRD)

Project Name: velvet-navigation

1. Introduction

The velvet-navigation project is an AI-powered assistive system designed to empower visually impaired users by providing real-time navigation, obstacle detection, voice-controlled interaction, and emergency SOS alerts. This system aims to replace traditional smart sticks with a smartphone-based intelligence platform that is scalable, production-ready, and demo-ready.

Developed with cutting-edge technologies, velvet-navigation ensures a professional-grade user experience, prioritizing accessibility, safety, and caregiver monitoring. This document outlines the system's requirements, features, and design principles to guide its development.

Page 1 of 7

2. System Overview

The velvet-navigation system is a comprehensive assistive technology solution for visually impaired users. It integrates real-time GPS tracking, AI-based obstacle detection, voice interaction, and caregiver monitoring into a cohesive platform. The system is designed to operate seamlessly in urban and rural environments, ensuring accessibility and safety for users in India (IN) and beyond.

Key features include:

  • Real-time navigation with voice guidance.
  • AI-powered obstacle and traffic signal detection.
  • Emergency SOS alerts with caregiver notifications via SMS, WhatsApp, and calls.
  • Voice-controlled commands for hands-free operation.
  • A caregiver dashboard for live monitoring and alert history.

The system is built using a modern tech stack, including React, Vite, TypeScript, Tailwind CSS, Supabase, and Twilio, ensuring scalability and reliability.

3. Functional Requirements

Page 2 of 7

As a Blind User:

  • I should be able to trigger an SOS alert via a button, voice command, or fall detection.
  • I should be able to receive real-time GPS navigation with voice guidance.
  • I should be able to use voice commands to interact with the system (e.g., "Take me to hospital").
  • I should be notified of obstacles or traffic signals via voice alerts.
  • I should be able to save and navigate to favorite places like "Home" or "Hospital."
  • I should receive a battery low alert when my device's battery is below 15%.
  • I should be able to use the system in offline mode with limited functionality.

As a Caregiver:

  • I should be able to monitor the live location of the user on a map.
  • I should receive instant notifications when an SOS alert is triggered.
  • I should be able to view the user's status, including safety indicators and battery levels.
  • I should have access to a history of past alerts and emergencies.

4. User Personas

Page 3 of 7

1. Blind User

  • Description: A visually impaired individual relying on the system for navigation, safety, and independence.
  • Goals: Seamless navigation, obstacle detection, and emergency support.
  • Challenges: Limited vision, reliance on voice feedback, and safety concerns in unfamiliar environments.

2. Caregiver

  • Description: A family member or professional responsible for monitoring the user's safety.
  • Goals: Real-time updates on the user's location and status, quick response to emergencies.
  • Challenges: Ensuring timely intervention during emergencies.

5. Visuals Colors and Theme

The velvet-navigation project will use a unique, premium color palette to create a professional and accessible user interface:

  • Background: #0D1117 (Deep Midnight Blue)
  • Surface: #161B22 (Charcoal Gray)
  • Text: #E5E7EB (Soft White)
  • Accent: #FF7F11 (Vibrant Orange)
  • Muted: #6B7280 (Cool Gray)

This palette ensures high contrast for readability and a modern, sleek aesthetic suitable for assistive technology.

Page 4 of 7

6. Signature Design Concept

The velvet-navigation homepage will feature an interactive 3D cityscape that represents the user's environment.

Key Features:

  • Dynamic 3D Map: A real-time, animated cityscape that updates based on the user's location. Buildings and landmarks will "light up" as the user navigates.
  • Voice-Activated Interaction: Users can say commands like "Zoom in" or "Show hospital," and the map will respond with smooth transitions.
  • Ambient Animations: Subtle animations like moving clouds, flowing traffic, and glowing pathways will create an immersive experience.
  • Caregiver View: A split-screen mode allows caregivers to see the user's live location on the map alongside alerts and status updates.

This design will make the system visually captivating while maintaining functionality and accessibility.

7. Non-Functional Requirements

  • Performance: The system must handle real-time updates with minimal latency.
  • Scalability: The architecture should support thousands of users simultaneously.
  • Accessibility: Ensure compliance with WCAG 2.1 standards for visually impaired users.
  • Security: Implement robust authentication and data encryption to protect user information.
  • Reliability: The system must operate with 99.9% uptime.
Page 5 of 7

8. Tech Stack

Frontend

  • React + Vite + TypeScript
  • Tailwind CSS
  • Framer Motion (for animations)

Backend

  • Supabase (Auth, Database, Realtime)
  • Supabase Edge Functions

External APIs

  • Geolocation API
  • Web Speech API
  • Twilio API

AI Models

  • TensorFlow.js (for object detection)

Orchestration

  • Docker
  • Kubernetes
Page 6 of 7

9. Assumptions and Constraints

  • The system assumes users have smartphones with internet connectivity and GPS capabilities.
  • Offline mode will have limited functionality, relying on preloaded data.
  • The caregiver must have access to a smartphone or computer to monitor the user.
  • The system will initially support English voice commands, with plans for multilingual support in future updates.

10. Glossary

  • SOS: Emergency alert system to notify caregivers of the user's location and status.
  • GPS: Global Positioning System used for real-time location tracking.
  • Supabase: A backend-as-a-service platform for authentication, database, and real-time updates.
  • TensorFlow.js: A JavaScript library for machine learning and AI-based object detection.
  • WCAG: Web Content Accessibility Guidelines, a standard for making web content accessible.

This updated SRD incorporates all your requirements, Eniya, while adding creative and technical details to make **velvet-navigation** a standout project. Let me know if you'd like any further refinements!
Page 7 of 7

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

No user flows yet.

The User Flow Agent will generate per-persona navigation diagrams after SRD updates.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

No user flows yet.

The User Flow Agent will generate per-persona navigation diagrams after SRD updates.