green-voiceflow

byChittuluri Sathvika

Pasted-Build-a-full-stack-AI-Voice-Automation-SaaS-web-applica_1775946970166.txt Build a full-stack AI Voice Automation SaaS web application called "VoiceFlow". IMPORTANT: - Do NOT create a basic app. - Build a premium, production-like SaaS UI with modern design. - Use a dark theme with gradients, glassmorphism cards, smooth spacing, and icons. - The UI must look impressive for a hackathon demo. --------------------------------------- 🎯 CORE IDEA --------------------------------------- VoiceFlow helps businesses handle missed calls automatically using AI. Flow: Customer calls → missed or handled → AI processes → lead is created → dashboard updates in real time. --------------------------------------- 🧠 10 CORE FEATURES (IMPLEMENT ALL) --------------------------------------- 1. 🔐 Authentication System - Login page (/login) - Email + password input - Demo credentials: admin@example.com / admin123 - Use localStorage for login state - Protect /dashboard route - Logout button --------------------------------------- 2. 🌐 Landing Page (/) - Hero: “Never Miss a Business Call Again” - Subtext explaining AI automation - CTA buttons: - Try Live Demo - Login - Sections: - Features - How it works (3 steps) - Pricing preview - Premium SaaS UI --------------------------------------- 3. 🎯 Demo Page (/demo) For judges demo Include: - Phone number card - Buttons: - Simulate Incoming Call - Simulate Missed Call - Simulate Callback - Complete Booking - Reset Demo - Live status panel --------------------------------------- 4. 📊 Dashboard (/dashboard) (VERY IMPORTANT) Build a PREMIUM dashboard with: Top Stats: - Total Calls - Missed Calls - Recovered Calls - Leads Generated - Conversion Rate - Avg Satisfaction Sections: - Recent Calls list - Emotion/Sentiment section (colored badges or bars) - Lead Pipeline (cards or table) - Quick Actions panel - Summary panel - Floating notifications - Voice Simulation modal UI: - dark theme - gradients - glass cards - icons - responsive - visually rich --------------------------------------- 5. 📞 Calls Page (/calls) - list of call history 6. 👥 Leads Page (/leads) - list of leads 7. 📈 Analytics Page (/analytics) - summary stats 8. ⚙️ Settings Page (/settings) --------------------------------------- 9. ⚙️ Backend API (Node + Express or Next.js API) Create routes: POST /api/simulate-call GET /api/leads GET /api/dashboard-stats POST /api/demo/incoming-call POST /api/demo/missed-call POST /api/demo/callback POST /api/demo/complete-booking POST /api/demo/reset All routes must return JSON. --------------------------------------- 10. 🔄 Real-time Behavior Use polling every 2 seconds (important for demo stability): - fetch leads - fetch dashboard stats Dashboard must update: - stats cards - recent calls - leads list --------------------------------------- 11. 🔔 Notifications Show floating toast: - Incoming Call - Missed Call - Callback Started - Booking Completed - Reset Add animation + auto-hide --------------------------------------- 12. 🎤 Voice Simulator Add modal: - show conversation like: Customer: Hello AI: How can I help? Customer: Booking AI: Done - triggered by button --------------------------------------- 13. 🗄️ Data Storage Use simple JSON or in-memory storage (for Replit demo) OR SQLite if possible Data: Lead: - id, name, phone, status Call: - id, duration, status --------------------------------------- 14. 🎨 UI DESIGN RULES - dark + blue gradient - glass cards - rounded corners - shadows - spacing - icons (lucide or similar) - smooth hover effects --------------------------------------- 15. 🎯 FINAL USER FLOW User: 1. Opens website 2. Clicks "Try Live Demo" 3. Clicks simulate buttons 4. Opens dashboard 5. Sees real-time updates --------------------------------------- 📦 OUTPUT REQUIRED - full working app - frontend + backend - all pages - working demo - working dashboard - clean UI - no errors --------------------------------------- After building, show: 1. file structure 2. how to run 3. demo steps