Recording and connection state change independently
The team built a voice-feedback app with group and statistics screens. I worked on Expo interfaces, group integration, connection state, and audio resource handling.
Permission, server connection, and recording can change at different moments. Starting, stopping, and disconnecting needed clear ordering so the screen and microphone state did not drift apart.
Model the lifecycle alongside the interface
Show recording and server feedback together
Expo Router separates Home, Group, Create, and Statistics. The home screen reflects the recording toggle, connection, and parsed server text, detection, confidence, and energy values.
Connection timeouts, errors, and close codes are distinguished. An unexpected disconnect triggers cleanup and a reconnect attempt while the user has the feature enabled. Resource cleanup is separate from stop-API calls to avoid a recursive shutdown path.
Use environment-specific audio paths
The browser converts Web Audio input to Int16 samples and sends them over WebSocket. The native path uses expo-av to start and stop recording and sends recording-status messages.
Cleanup covers processors, audio contexts, stream tracks, recording objects, and timers. Permission, recording API, and connection checks run in sequence, with toggle state restored when a step fails.
Connect group operations and build exploratory statistics UI
The group flow covers creation, joined groups, invitation codes, forbidden-word actions, and sortable member lists.
The statistics interface uses sample data for React Native SVG charts, hourly and weekly views, point selection, tooltips, and metric cards. Horizontal scrolling keeps hourly values explorable on a narrow screen.
A complete hackathon presentation across the main screens
The app connected detection feedback, recording and connection state, group operations, and statistics interfaces and received the 11th Highthon Excellence Prize.
The project combined fast interface delivery with explicit permission, connection, and audio cleanup sequencing.
Trace
- Excellence Prize
- 11th Highthon2025
- WebSocket
- Connection and detection-result states
- Web Audio
- Browser audio capture and transmission