How course5-intelligence-limited/sonicvue-raipid-prototype-ui works
SonicVUE is a call-audio upload and customer-service analytics frontend: users sign in, upload audio, then inspect dashboard metrics, call-level tables, and transcripts. The app also exposes a chatbot route, but its behavior is not shown in the sampled source. Authentication and upload state persist in browser local storage; the Express simulation provides sample-data dashboard, table, and transcript endpoints. UploadPage calls an upload endpoint that the simulation excerpt does not implement. Wiring for unsampled pages is limited to the routes documented in App.tsx.
Main entry points: Layout.tsx Authenticated layout · App.tsx React app and routes · UploadPage.tsx Audio upload · AuthContext.tsx Authentication state
Components 15
Application shell
- React app and routes
src/App.tsx - Authenticated layout
src/components/Layout.tsx - Chatbot page
src/pages/ChatbotPage.tsx
Access and navigation
- Authentication state
src/context/AuthContext.tsx - Login page
src/pages/LoginPage.tsx - Sidebar navigation
src/components/Sidebar.tsx
Audio and transcripts
- Audio upload
src/pages/UploadPage.tsx - Upload and transcript state
src/context/FileContext.tsx
Call analytics
- Analytics dashboard
src/pages/TryDashboard.tsx - Call table and transcripts
src/pages/TableView.tsx - Express sample API
src/backend-silumation.js - Sample call records
src/backend-silumation.js
Other components
- User
- Browser local storage
- HTTP API
Connections 17
- User → React app and routes: uses
- React app and routes → Authentication state: provides auth
- React app and routes → Login page: routes unauthenticated
- React app and routes → Authenticated layout: wraps protected routes
- Authenticated layout → Sidebar navigation: renders
- Authenticated layout → Audio upload: routes to
- Authenticated layout → Analytics dashboard: routes to
- Authenticated layout → Call table and transcripts: routes to
- Authenticated layout → Chatbot page: routes to
- Audio upload → Upload and transcript state: reads and updates
- Authentication state → Browser local storage: reads and writes
- Upload and transcript state → Browser local storage: reads and writes
- Audio upload → HTTP API: posts audio
- Analytics dashboard → HTTP API: requests metrics and rows
- Call table and transcripts → HTTP API: requests metrics, rows, transcripts
- HTTP API → Express sample API: serves sample endpoints
- Express sample API → Sample call records: filters and aggregates