SpeakChatBot Frontend

SpeakChatBot is a SaaS product addressing accessibility on live streaming platforms. The frontend presents a dual interface: a public marketing site with pricing, features, testimonials, and integrations, and a gated dashboard for authenticated users. The dashboard is the core—a multi-section application where streamers configure voice settings, manage allowed/blocked users and phrases, set message requirements (follower-only, subscriber-only), monitor a real-time chat queue, and customize responses. 34 React components handle everything from the homepage hero and pricing tiers to per-user dashboard sections for chat filtering, integrations, and account management.

The implementation is built on Next.js 15 with React 19, using Tailwind CSS for responsive UI with full dark/light mode support throughout. TTS service selection is pluggable: users pick between ElevenLabs (default), Google Cloud, Amazon Polly, or OpenAI's API, each with its own settings component. The VoiceForm component handles demo audio playback before saving, using a custom AudioPlayer that supports playback speed, volume control, and seek scrubbing. Backend integration uses MySQL with bcrypt password hashing, cookie-based session tokens, and server-side auth middleware that verifies tokens before allowing dashboard access.

The frontend is authentication-gated via middleware.js that checks token validity on every dashboard request. Session management uses http-only cookies with 7-day expiration and SameSite-strict headers. The API layer proxies between the frontend and a separate Express backend, handling TTS synthesis, voice list retrieval, and moderation data. Real-time features are scaffolded via WebSocket support (the 'ws' npm package is present) and chat queue pages, though live streaming integration remains in progress per the QA notes.