A modern Electron application built with React, featuring real-time WebSocket communication, camera monitoring, and telemetry data visualization with a beautiful dark theme.
- React + Vite: Lightning-fast development with Hot Module Replacement (HMR)
- Component-Based Architecture: Clean, modular React components
- Real-time WebSocket: Live telemetry and camera data streaming
- React Router: Client-side routing with navigation
- Context API: Centralized state management
- Collapsible Sidebar: Responsive navigation with smooth animations
- Dark Theme: Custom color palette with professional styling
- Monitoring Dashboard: Real-time sensor and camera status display
- Responsive Design: Works on desktop and mobile devices
minibot/
├── src/ # React source directory
│ ├── main.jsx # React entry point
│ ├── App.jsx # Main App component with routing
│ ├── index.css # Main stylesheet
│ ├── components/ # React components
│ │ └── Layout.jsx # App layout with sidebar
│ ├── contexts/ # React Context providers
│ │ ├── AppContext.jsx # App state management
│ │ └── WebSocketContext.jsx # WebSocket connection management
│ ├── pages/ # Page components
│ │ ├── Dashboard.jsx # Main dashboard
│ │ ├── Projects.jsx # Sensors page
│ │ ├── Analytics.jsx # Logs page
│ │ ├── Settings.jsx # Diagnose page
│ │ └── Help.jsx # Advanced page
│ ├── services/ # WebSocket services
│ │ ├── WebSocketService.js
│ │ ├── TelemetryWebSocketService.js
│ │ └── CameraWebSocketService.js
│ ├── constants/ # Application constants
│ └── utils/ # Utility functions
├── index.html # Main HTML file
├── vite.config.js # Vite configuration
├── main.js # Electron main process
├── preload.js # Electron preload script
├── styles.css # Global styles
└── package.json # Dependencies and scripts
The app uses a custom dark theme with the following color scheme:
- Primary Dark:
#0e2954(Deep navy) - Secondary Blue:
#1f6e8c(Medium blue) - Accent Teal:
#2e8a99(Teal blue) - Text Color:
#84a7a1(Sage mint)
- Node.js (v16 or higher)
- npm or yarn package manager
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Create distribution
npm run distnpm run dev- Start Vite dev server with Electronnpm run build- Build application for productionnpm run preview- Preview production buildnpm run dist- Create distributable packages
The application follows senior-level best practices with a clean component hierarchy:
src/components/
├── ui/ # Reusable UI components (Card, Button, PageHeader)
├── icons/ # SVG icon components
├── domain/ # Business-specific components (StatusBar, CameraGrid)
└── index.js # Central export point
Key Features:
- ✅ Single Responsibility Principle
- ✅ Component Composition
- ✅ PropTypes for type safety
- ✅ Reusable, testable components
- ✅ Separation of concerns
- ✅ Well-documented with JSDoc
See COMPONENT_ARCHITECTURE.md for detailed documentation and COMPONENTS_SUMMARY.md for quick reference.
- Sets up routing with React Router
- Wraps app with Context providers
- Manages global state
- Collapsible sidebar with navigation
- Main content area
- Responsive design
- Composed from smaller components
- Real-time telemetry data display
- Camera feed management
- Sensor status indicators
- Camera state management (camera1, camera2)
- Camera mode switching (side-by-side, window-in-window)
- Camera configuration updates
- WebSocket connection management
- Telemetry data streaming
- Camera data streaming
- Auto-reconnection logic
- Connection status tracking
- Handles telemetry WebSocket connections
- Automatic reconnection with exponential backoff
- Event-based message handling
- Heartbeat mechanism
- Manages camera WebSocket connections
- Video frame streaming
- Camera status updates
-
Dashboard - Main monitoring interface with:
- Real-time sensor data (temperature, air quality)
- Battery status and power management
- Connection status and link quality
- Dual camera feeds with PiP mode
-
Sensors - Sensor management and configuration
-
Logs - System logs and analytics data
-
Diagnose - System diagnostics and settings
-
Advanced - Advanced settings and help
Default WebSocket URLs (configured in src/constants/urls.js):
- Telemetry:
ws://192.168.1.39:8080/telemetry - Camera:
ws://192.168.1.39:8080/rgb_camera
Both services run on port 8080 with different paths.
To change these URLs, either:
- Edit the URLs in
src/constants/urls.jsfor permanent changes - Use the Settings page → Network URLs section to configure URLs at runtime
- Temperature monitoring
- Air quality tracking
- Battery status with critical alerts
- LoRa connection status
- Link quality percentage
- Transmission rate monitoring
- Dual camera support
- Side-by-side view mode
- Picture-in-Picture (PiP) mode
- Click to switch camera modes
- Real-time camera status
- React Context API for global state
- Custom hooks for accessing state
- Automatic WebSocket reconnection
- Connection status monitoring
- Clone the repository
- Install dependencies with
npm install - Configure WebSocket URLs in
src/contexts/WebSocketContext.jsxif needed - Start development with
npm run dev - Build for production with
npm run build
# Build the React app
npm run build
# Create Electron distribution
npm run distThis will create distributable packages in the dist folder.
The app uses a CSP that allows:
- WebSocket connections to configured endpoints
- Google Fonts
- Inline styles for React
- Self-hosted scripts and resources
- React plugin for JSX support
- Electron plugins for main and renderer processes
- Path aliases (
@→./src) - Optimized production builds
This project was migrated from vanilla JavaScript to React + Electron. See MIGRATION.md for detailed information about:
- Architecture changes
- File structure updates
- Component conversions
- Breaking changes
- Migration benefits
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
Built with ❤️ using React, Electron, and Vite