Desktop application for the touchscreen UI of autonomous delivery robots Provides user interaction and robot status visualization throughout the delivery process.
1 / 6
Roles
PlanningDesignFrontendBackend
Tech Stack
Electron
React
TypeScript
NestJS
Socket.io
TailwindCSS
TanStack Query
Key Features
Delivery Destination Setup: Room number input via numeric keypad with destination validation
Door Control: Upper/lower container door open/close with real-time status check
Delivery Workflow: Complete delivery process guidance from item loading to password verification upon arrival
Exception Handling: Response screens for various abnormal situations including path blockage, collision, emergency stop
Charging and Standby Mode: Battery status visualization and Lottie animation-based standby screen
Key Achievements
WebSocket-Based Real-time Bidirectional Communication: Instant event delivery between robot control system and screen via Socket.io for state synchronization
Event-Driven Screen Transition System: Automatic transition to appropriate screens based on robot state changes (charging, arrival, collision, etc.)
React Context-Based WebSocket State Management: Global consistent WebSocket connection and event consumption via custom hooks
TanStack Query Auto-Polling: Automatic refresh of dashboard and door status at configurable intervals
Multi-Step Delivery Workflow Implementation: State-based step management for sequential processing: Greeting → Password → Door Open → Unloading → Door Close
Persistent Settings with Electron Store: Dashboard/door status polling intervals stored locally and maintained after restart
Lottie Animation Sequential Playback: Custom hook for sequential animation playback with loop handling for the final animation