🇺🇸 Read in English | 🇪🇸 Leer en Español
This project is a multi-application ecosystem that integrates hardware and software for unified IoT device control through a modern React web interface.
Developed with a hybrid architecture, it combines the efficiency of ESP8266 chips (for actuation devices) with the power of the ESP32 (for the Physical Remote Control), allowing the management of multiple independent applications from the same codebase:
- Robot Car: Remote-controlled vehicle with telemetry.
- Cocktail Machine: Automatic drink dispenser.
- Irrigation System: Smart irrigation control.
The dashboard features a high-quality cyberpunk design with glassmorphism effects, neon glows, and fluid animations.
Complete robot control with:
- Neural Telemetry: Real-time MPU gyroscope visualization
- RGB Module: Color selector with preview and glow effects
- Kinetic Control: D-pad for directional control with status indicators
- Actuators: Pin and output control panel
Smart irrigation automation:
- Current Status: Real-time temperature and ESP clock
- Scheduling: Task management by days and times
- Configuration: Day and time selector for new tasks
- Manual Control: Direct pump adjustments
Automated drink mixing system:
- Drinks Grid: Quick selection with premium visual effects
- Pump Configuration: PWM control and time calibration
- Manual Control: D-pad for individual pump activation
- React (v19+): Dynamic and reactive interface.
- Vite: Ultra-fast build system (replacing CRA).
- TypeScript: Robustness and static typing with
@/alias. - Material UI (MUI): Modern design system.
- WebSocket: Low-latency real-time communication.
- Clean Code Architecture: Separation into Models, Hooks, and Components.
- ESP8266 Core for Arduino: Optimized firmware for ESP8266 chip.
- AsyncWebServer: Asynchronous HTTP server for ESP8266.
- Node.js (Mock Server): For local development without physical hardware.
The repository is organized modularly to facilitate maintenance and scalability:
/client: React + Vite frontend application (Cyberpunk Dashboard)./remote-control: Firmware for Physical Remote Control (ESP32) with joystick, gyroscope, and direct telemetry support./server/firmware: Modular source code for Robot (ESP8266/ESP32)./apps/robot car: Motor control and internal gyroscope logic./apps/drinks machine: Pump management, recipes, and OLED display./apps/irrigation: Schedule programming and irrigation tasks./utils: Shared components and Communication Hub.
The ESP8266 firmware (/server/firmware/serverEspReact) is modular by design. You can choose which "personality" to load on the robot by editing a single file.
This avoids library conflicts (e.g., using irrigation libraries when you only want the drinks machine) and saves memory.
- Open the file
server/firmware/serverEspReact/AppConfig.h. - Uncomment (
//) only the module you want to compile.
Example to activate only the Drinks Machine:
#define ENABLE_DRINKS_MACHINE
// #define ENABLE_IRRIGATION_SYSTEM
// #define ENABLE_ROBOT_CARThis system doesn't connect to a single server but orchestrates a network of distributed devices, combining technologies according to data nature:
The React Frontend uses a hybrid architecture:
-
WebSockets (Real-Time Telemetry)
- Why? For continuous and critical data flow like Gyroscope (Joystick/Robot).
- How it works: A permanent "tube" is opened. The ESP32 "pushes" thousands of data points per second without the browser having to request them.
- Latency: Minimal (<10ms), allowing smooth graphics that react to the millisecond.
- Implementation:
RemoteControlContextmaintains a global connection so the physical remote works on any screen.
-
HTTP/REST (Commands)
- Why? For specific and confirmed actions like "Turn on Pump", "Change Color", or "Save Configuration".
- How it works: The browser makes a one-time request (GET/POST) and waits for confirmation ("OK").
- Security: Ensures an order (e.g., irrigation) has been received and processed correctly.
The system manages 4 IPs simultaneously, allowing each module to have its own brain but operate under a single unified interface:
| Device | .env Variable |
mDNS Hostname | Main Function | Protocol |
|---|---|---|---|---|
| Robot Car | VITE_ROBOT_IP |
robot-car.local |
Movement, Motors, Lights | HTTP + WebSocket |
| Remote Control | VITE_REMOTE_IP |
remote-control.local |
Physical Joystick, External Gyroscope | Global WebSocket |
| Drinks Machine | VITE_DRINKS_IP |
drinks-machine.local |
Peristaltic Pumps, OLED Display | HTTP + WebSocket |
| Irrigation System | VITE_IRRIGATION_IP |
irrigation-system.local |
Water Management, Calendar | HTTP |
Additionally to WiFi, the Remote Control talks directly with the Robot using ESP-NOW (Espressif's direct radio protocol). This allows controlling the robot outdoors without Router or WiFi, while if WiFi is available, both devices simultaneously report their data to the web.
I've created scripts to facilitate project startup (installs dependencies and launches servers):
- Mac/Linux:
./run-mac.sh
- Windows:
Double-click
run-windows.bator runrun-windows.batfrom the terminal.
-
Simulation Mode (Mock):
- If you don't have the physical robot with you, you can activate simulation mode to see the UI working with fake data.
- In the
client/.envfile, changeVITE_MOCK_SERVER=true. - This also activates automatically if you deploy on Vercel (HTTPS) to avoid secure connection errors.
-
Open the file in
/server/firmware(Robot) or/remote-control/firmware(Remote).
Note for ESP32: If using an ESP32 board, make sure to have this URL in Arduino IDE -> Preferences -> Additional Board Manager URLs:
https://espressif.github.io/arduino-esp32/package_esp32_index.json
⚠️ Troubleshooting: If the latest version installation fails (DEADLINE_EXCEEDEDerror or similar), try installing version 2.0.17 from the Boards Manager.
- Open the file in
/server/firmware(Robot) or/remote-control/firmware(Remote). - Secrets Configuration:
- This project requires two
secrets.hfiles (one for the remote, another for the robot). - In each firmware folder (
server/firmware/serverEspReact/andremote-control/firmware/remote-control/), you'll find asecrets_example.h. - Rename them to
secrets.hand fill in your WiFi credentials and MACs.
- This project requires two
- Upload the sketch to your devices.
If the frontend doesn't connect to the ESP32 (ws: connection failed or No route to host error) and you're using mDNS (remote-control.local), check this:
- Browser and Mixed Content (Common errors on Vercel/HTTPS):
- Problem: If you deploy this web on Vercel (
https://...), the browser will block the connection to ESP32 (ws://...) for security ("Mixed Content"). You'll see a red error message in the application. - Recommended Solution: Run the client locally (
npm run dev) on your computer. Fromhttp://localhost, the robot connection works perfectly. - Alternative Solution (Difficult): Configure Chrome to allow insecure content (
chrome://flags/#block-insecure-private-network-requests), although this doesn't always work for WebSockets from public HTTPS domains.
- Problem: If you deploy this web on Vercel (
- mDNS on Windows/Android:
.localworks natively on Apple (Mac/iPhone). On Windows you need to have Bonjour installed (comes with iTunes) or use the direct IP instead ofremote-control.local. - Firewall: Sometimes the computer's firewall blocks incoming/outgoing connections to ESP32's port 80.
- Long-range wireless control (ESP-NOW)
- Direct telemetry from remote to Web (WebSocket
/ws/remote) - 3D visualization of remote's gyroscope in real-time
- Hybrid Web/Physical control without interruptions
- High-frequency motor control
- Internal tilt telemetry (Pitch/Roll)
- Synchronized RGB lighting effects
- Direct communication with Remote Control (ESP-NOW)
- Physical interface on OLED display (Standalone menu)
- Drink selection from remote (Joystick Up/Down/Accept)
- Remote control API and dashboard visualization
- Manual water pump control (ON/OFF)
- Irrigation task programming by days and times
- DHT22 humidity and temperature telemetry (simulated/real)
- Automatic time synchronization (NTP)