https://github.com/storres20/bio-data-nextjs

A real-time monitoring web application built with Next.js that displays temperature and humidity data using dynamic, auto-updating charts. Data is captured by a DHT11 sensor connected to an ESP8266 NodeMCU and sent to a backend server, where it's fetched and displayed on the frontend with interactive graphs.
https://github.com/storres20/bio-data-nextjs

arduino-ide dht11 esp8266 mongodb-database netlify-deployment nextjs14 realtime tailwindcss

Last synced: 5 days ago
JSON representation

A real-time monitoring web application built with Next.js that displays temperature and humidity data using dynamic, auto-updating charts. Data is captured by a DHT11 sensor connected to an ESP8266 NodeMCU and sent to a backend server, where it's fetched and displayed on the frontend with interactive graphs.

• Host: GitHub
• URL: https://github.com/storres20/bio-data-nextjs
• Owner: storres20
• Created: 2024-08-12T19:23:16.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-10-05T21:02:09.000Z (about 1 month ago)
• Last Synced: 2024-10-11T05:40:57.095Z (27 days ago)
• Topics: arduino-ide, dht11, esp8266, mongodb-database, netlify-deployment, nextjs14, realtime, tailwindcss
• Language: JavaScript
• Homepage: https://bio-data-nextjs.netlify.app/
• Size: 68.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![image](https://github.com/user-attachments/assets/0f3cbb55-82b9-4c1e-896e-c806765127a9)

# Real-Time Temperature and Humidity Monitoring System

## Overview

This project is a real-time temperature and humidity monitoring system built with a Node.js backend and a Next.js frontend. Data is collected from a DHT11 sensor connected to an ESP8266 NodeMCU and is sent to the backend server, which stores the data in a MongoDB database. The frontend retrieves and displays this data using dynamic, auto-updating graphs.

## Features

- **Real-Time Monitoring:** Temperature and humidity data are updated on the frontend every 0.5 seconds.

- **Responsive Design:** The frontend is responsive, with charts displayed side-by-side on larger screens and stacked vertically on mobile devices.

- **Data Storage:** The backend stores sensor data in a MongoDB database.

- **Secure Communication:** Data is sent from the ESP8266 to the backend using HTTPS.

## Tech Stack

### Backend (Node.js)

- **Express.js:** For handling API routes.

- **Mongoose:** For interacting with MongoDB.

- **CORS:** To allow cross-origin requests.

- **dotenv:** For managing environment variables.

### Frontend (Next.js)

- **React.js:** For building the user interface.

- **Chart.js and react-chartjs-2:** For rendering dynamic graphs.

- **Tailwind CSS:** For styling the application.

### IoT Device

- **ESP8266 NodeMCU:** For collecting temperature and humidity data and sending it to the backend server.

- **DHT11 Sensor:** For measuring temperature and humidity.