🚀 ESP8266 React Web Server (Captive Portal)

A lightweight IoT project that hosts a modern React (Vite) web app directly on an ESP8266 using LittleFS.

This project turns your ESP8266 into a WiFi hotspot + captive portal, automatically redirecting users to a hosted website (portfolio/dashboard) without internet.

---

✨ Features

• 📡 ESP8266 acts as a WiFi Access Point
• 🌐 Captive Portal (auto opens site on connect)
• ⚡ Serves React (Vite) build from LittleFS
• 📁 Static file handling (HTML, JS, CSS, images)
• 📱 QR code support for instant WiFi connection
• 🔁 SPA routing fallback (React Router support)
• 📴 Fully offline web app

---

🛠️ Tech Stack

• ESP8266 (NodeMCU)
• Arduino IDE
• LittleFS
• React + Vite
• DNS Server (Captive Portal)

---

📂 Project Structure

project/
├── sketch_may18a.ino   # ESP8266 server code
├── data/               # React build files (LittleFS)
│   ├── index.html
│   ├── assets/
│   └── ...

---

⚙️ Setup Instructions

1️⃣ Install Dependencies

• Install ESP8266 board in Arduino IDE

• Install required libraries:

  • ESP8266WiFi
  • ESP8266WebServer
  • DNSServer
  • LittleFS

---

2️⃣ Build React App

In your React project:

npm run build

Update vite.config.js:

export default {
  base: "./"
}

---

3️⃣ Upload Files to ESP

• Rename build/ → data/
• Upload using:

Tools → ESP8266 LittleFS Data Upload

---

4️⃣ Upload ESP Code

Flash your .ino file via Arduino IDE.

---

📶 Usage

1. Power the ESP8266
2. Connect to WiFi:

Sabari_Webserver

3. Captive portal will open automatically OR open manually:

http://192.168.4.1

---

📱 QR Code (Optional)

Scan to connect:

WIFI:T:WPA;S:Sabari_Webserver;P:sabari123;;

---

🧠 How It Works

• ESP8266 creates a WiFi hotspot
• DNS server redirects all domains → ESP IP
• Web server serves React build from LittleFS
• Captive portal tricks OS into auto-opening site

---

⚠️ Limitations

• Limited memory (optimize build size)
• No HTTPS support
• Performance depends on ESP8266 hardware

---

🚀 Future Improvements

• OTA updates
• ESP32 support
• Gzip compression for faster load
• IoT device control dashboard
• PWA support

---

🤝 Contributing

Pull requests are welcome! Feel free to open issues for improvements or bugs.

---

📄 License

MIT License

---

👨‍💻 Author

Sabarivasan S.M Full Stack Developer | IoT Enthusiast

---