Control an Arduino LED with a MERN Web App – A Beginner’s IoT Project

Introduction

As a tech enthusiast, I’ve always been fascinated by the power of the Internet of Things (IoT)—the way physical devices can seamlessly interact with the digital world. Recently, while learning the MERN stack, I was eager to explore how IoT can integrate with web technologies.

In this beginner-friendly project, I’ll walk through connecting an Arduino UNO board to a web app to control an LED remotely. This project demonstrates a two-way communication system:

✅ The user interacts with a web app to turn an LED on/off.✅ The real-time status of the LED is displayed in the web app for instant feedback.

Note: At this stage, I’m not using MongoDB (keeping it simple), focusing instead on establishing a basic connection between an IoT device and a web application.

🔌 Hardware Setup
1️⃣ Set Up the Arduino UNO

• Connect the Arduino UNO to your computer via USB.
• Install and open the Arduino IDE.
• Select the correct port for the Arduino in the Tools → Port section.

2️⃣ Connect the LED to Arduino

• Use a digital output pin (e.g., Pin 13) to control the LED.
• Connect the longer leg (anode) of the LED to Pin 13.
• Connect the shorter leg (cathode) to GND.
• Use a resistor (330Ω) in series to prevent excess current.

3️⃣ Ensure Proper Power Supply

• The Arduino will be powered via USB, so no external power supply is needed.

🖥️ Software Integration
🔹 Backend Setup (Node.js & Express)

• Set up a Node.js project and install Express to create a simple web server.
• Use the serialport library to communicate with the Arduino via the serial port.
• Define a /led route in the Express server to handle LED control requests.
• The backend sends ON/OFF commands to the Arduino based on user input.

🔹 Upload Arduino Code

• Write and upload Arduino code to listen for serial commands (ON/OFF) and control the LED accordingly.

🔹 Frontend Setup (React & Axios)

• Create a simple React app with buttons to turn the LED ON/OFF.
• Use Axios to send POST requests to the backend.
• Display the current LED status in the frontend based on backend responses.

📡 How It Works

1️⃣ User clicks ON/OFF button in the web app.
2️⃣ A request is sent to the backend server.
3️⃣ The server sends a command to the Arduino via serial communication.
4️⃣ Arduino receives the command and controls the LED accordingly.
5️⃣ The web app updates the LED status based on the response.

🎬 Demo Video & Code

📽 Demo Video
💻 GitHub Repository
📝 Medium Blog