CompoSense is a web application that visualizes real-time sensor data from an Arduino Uno R4, providing actionable insights through interactive graphs. The sensors integrated into this project include:
- Soil Moisture Sensor
- Temperature & Humidity Sensor (DHT11)
- Gas Sensor
The application displays live and historical sensor data, helping users monitor environmental conditions effectively.
CompoSense is hosted on Vercel!
Take a look at it in action:
https://compo-sense.vercel.app/
-
Frontend:
-
Official Plugins:
@vitejs/plugin-react(uses Babel for Fast Refresh)@vitejs/plugin-react-swc(uses SWC for Fast Refresh)
-
Backend:
- Supabase (for data storage and API)
-
Hardware:
- Arduino Uno R4 with sensor modules
- Real-time data acquisition from Arduino sensors
- Data visualization using responsive graphs
- Insights and historical trends for each sensor
- Minimal, fast, and modern React + Vite setup
-
Clone the repository:
git clone https://github.com/thenamakop/CompoSense.git cd CompoSense -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Configure Supabase:
- Add your Supabase project credentials to
.envas needed.
- Add your Supabase project credentials to
-
Connect Arduino sensors:
- Ensure your Arduino Uno R4 is flashed with the correct firmware and connected to the expected sensors.
- Data should be sent from Arduino to your backend (Supabase or a relay server).
- This template is a minimal setup for React in Vite with HMR and ESLint.
- For production applications, it is recommended to use TypeScript with advanced linting. See the Vite TS Template for more details.
- You can expand ESLint rules and integrate TypeScript as your project grows.
- Arduino Uno R4 collects sensor data.
- Data is sent to the Supabase backend.
- The React frontend fetches and visualizes this data with graphs and insights.
Contributions, feature requests, and feedback are welcome! Please open an issue or a pull request.
This project is licensed under the MIT License.
Happy Coding! 🌱