Skip to content

A sensor data collection and visualization mobile app and web app using Flutter, ReactJS and Firebase RTDB

License

Notifications You must be signed in to change notification settings

Kshitijpawar/Sensors-App

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

54 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Project Title: Sensor Data Visualization and Streaming

Website hosted on Firebase

https://sensorappdb.web.app/

Motivation

A data collection application which can be used to record sensors onboard smartphones for smart visualization and detection of anomalies or events

Overview

This project comprises two applications:

  1. Flutter Mobile App: A mobile application built using Flutter to monitor and record sensor data (accelerometer and gyroscope) and stream it to Firebase Realtime Database.
  2. React JS Web App: A web application built using React JS to view and chart the recorded sensor data from Firebase Realtime Database.

Flutter Mobile App

Features

  • Sensor Data Visualization:

    • One screen displays the accelerometer and gyroscope data.
    • Data is charted using a custom painter class for dynamic visualization.

      Custom Painter class for viz.

  • Data Recording and Streaming:

    • Records sensor values (accelerometer and gyroscope).
    • Streams the recorded data to Firebase Realtime Database in real-time.

    Dialog box for streaming Statusfor streaming

Images

Installation and Setup

  1. Clone the Repository:

    git clone https://github.com/Kshitijpawar/Sensors-App.git
    cd Sensors-App/flutter-sensors-app
  2. Install Dependencies:

    flutter pub get
  3. Run the App:

    flutter run

Configuration

  • Ensure you have the correct Firebase configuration in lib/firebase_options.dart. You can create one on Firebase console for free.
  • Update your pubspec.yaml file with necessary dependencies.

React JS Web App

Features

  • Data Visualization:
    • Reads accelerometer and gyroscope data from Firebase Realtime Database.
    • Uses Chart.js to visualize the recorded sensor data in real-time.

    React webapp homepage Charts page

Installation and Setup

  1. Clone the Repository:

    git clone https://github.com/Kshitijpawar/Sensors-App.git
    cd Sensors-App/react-webapp
  2. Install Dependencies:

    npm install
  3. Run the App:

    npm start

Configuration

  • Ensure you have the correct Firebase configuration in src/FirebaseSettings.js.

Future To-Dos

  1. Enhance Mobile App:

    • Add more sensors and data visualization screens.
    • Implement offline data storage and sync when the network is available.
  2. Improve Web App:

    • Add user authentication for secure data access.
    • Implement data export functionality (CSV, Excel).
    • Enhance data visualization with more chart options and customization.
  3. General Improvements:

    • Optimize data streaming and database interactions.
    • Improve the user interface and user experience across both apps.
    • Conduct extensive testing and bug fixing.

Contributing

Contributions are welcome! Please fork this repository and submit pull requests.

License

See the LICENSE file for details.

Contact

For any queries or suggestions, please contact [email protected].

About

A sensor data collection and visualization mobile app and web app using Flutter, ReactJS and Firebase RTDB

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published