h9419h9419
45

ESP_AP_Webserver

screenshot of ESP_AP_Webserver

A ESP32 project template with a web interface built in React

Github

Overview

The ESP AP Webserver project presents an innovative way to integrate mobile app development with the ESP32 microcontroller. This setup leverages the ESP32's capabilities to create a WiFi hotspot, offering users an interactive interface through a React web application. The project fuses hardware and software to provide a seamless experience, effectively bridging the gap between connectivity and real-time user interaction.

The ESP32 operates as a captive portal, allowing users to connect without a password, only requiring them to agree to terms of service through an automatically opened website. The setup supports real-time communication through websockets, making it a dynamic tool for developers looking to experiment with IoT applications and mobile web interaction.

Features

  • WiFi Hotspot Creation: The ESP32 easily sets up a SoftAP WiFi hotspot named "ESP32 SoftAP" for quick access without a password requirement.

  • Captive Portal Functionality: Automatically prompts users with a login interface, similar to public WiFi networks, to ensure terms of service are accepted.

  • WebSocket Integration: Establishes a real-time interaction channel between the ESP32 and the React web application, enhancing user engagement.

  • Customizable Code Structure: Developers can modify key files like main.cpp and wsEventHandler.cpp to tailor the wireless connection and websocket server to specific needs.

  • Efficient File Management: The platform allows for the building and uploading of the SPIFFS filesystem image, streamlining web app deployment.

  • Responsive React Interface: The React web app acts as a websocket client, updating in real-time with changes made on the ESP32, ensuring a fluid user experience.

  • Easy Installation Setup: Simple instructions for setting up the development environment with VSCode or VSCodium and installing necessary tools like Node.js and Platform IO.

  • User-Friendly Project Structure: The included project files are organized for ease of customization, encouraging creativity and experimentation in personal development projects.