DEV Community

TagorenathV
TagorenathV

Posted on • Edited on

IoT-SaaS: Web App using ReactJS, MongoDB Atlas & Realm

Overview of My Submission

Nowadays, SaaS platforms & IoT devices are gaining popularity in a variety of use-cases. I built a prototype for IoT based SaaS platform for aquaculture. Users can register to the platform, subscribe to a device and get Real-Time alerts and Dashboards on the fly. Importantly, Pay-as-you-use.

Though IoT use cases primarily focus on Timeseries collections, I tried to include random features as much as possible to experience different MongoDB features with this proto-type project.

Submission Category:

Prime Time

Link to Code

https://github.com/tagorenathv/iot-saas

Tool Stack Used

  • All data stored in MongoDB Atlas
  • Timeseries collection for storing sensor_data with granularity and expireAfterSeconds defined
  • Atlas Search: Search Index on device collection for fields: title with analyzers & mapping defined for Autocompletition functianality
  • Text Index on device collection for fields: title and description for Full-Text search functionality, including spell corrections
  • Scheduled-Triggers for:
    • simulating data
    • calculating aggregated sensor data values
    • generating bills every month
  • Database-Triggers on every aggregated-value to check alert condition and insert into alert collection if any
  • Used Realm-Functions for performing data manipulations present in MongoDB Atlas collections
  • Frontend made with React JS, ant.design UI library and used Realm-Web-Client SDK for calling Realm-Functions
  • Used Email/Password provider of Realm-Authentication for UI authentication
  • Applied Realm-DataAccess Rules for added layer of Authorization for each collection
  • Hosted react application on Realm-Hosting

Demo

To Watch: Link-1 or Link-2
To Experience: iot-saas

Wana Try?

Please follow README file for setup details and also to understand how different MongoDB services are combined together to perform some action in this project

Take-Aways

My Take-Aways on MongoDB ecosystem after this project

  • MongoDB ecosystem has evolved at its best, making developers life easy and bringing ideas into existance with matter of clicks! Importantly, no need to go for other services. One stop solution for all your usecases.
  • Want Autocomplete feature? Use Atlas-Search. No more replicating data to Elasticsearch
  • Want Timeseries feature? Use Timeseries collection. Utilize granularity and expireAfterSeconds for data archivals and performance enhacement Out-of-the-box. (P.S: Use Atlas cluster from v5.0 for Timeseries collections)
  • Want Full-Text search feature? Create Text-Index on collection. No more replicating data to Elasticsearch
  • Want Authentication? Use Realm-Authentication
  • Want Authorization? Use Realm-Rules
  • Want Event-Driven triggers both Scheduled & Database? - Use Realm-Triggers
  • Want to access data Serverlessly without backend? Use Realm-Client SDKs or Enable HTTP Endpoints
  • Want to host your application? Use Realm-Hosting
  • and lot lot lot more out-of-the-box

What else could be better?

PS.: In my opinion

  • Times I felt, documentation is misleading. Navigations could be more clear
  • Folders uploading not available at Realm-Hosting UI. Need to create folders and upload files individually if needed. Would save time if this is available from UI
  • At Realm-Deployment, it would be helpful to modify all json configuration files and deploy from UI itself. External & Github actions are quite helpful thought.
  • Eagerly waiting for Flutter Realm-SDK GA. Can't wait to use two best things for a project 🔥🔥🔥

Additional Resources / Info

PS: Project is built and hosted with MongoDB ecosystem and ❤️

Top comments (11)

Collapse
 
longvd89 profile image
longvd89

Hi. I am building a iot project. I have a lists of pi with data sensor sub from mqtt topic. How I can update realtime data for each only a row in table when data sensor change. Thanks

Collapse
 
tagorenathv profile image
TagorenathV

sync all data to a timeseries collection lets say sensor_data initially from mqtt topic. For every scheduled time, perform aggregation on this sensor_data and write updated data to aggregated_sensor_data. We have upsert operation in mongo. take pi device id as key reference and apply upsert operation on aggregated_sensor_data. now, at any given time you will have updated value for pi devices in aggregated_sensor_data collection.

Benefits: Because raw data is in timeseries collection, you can mention expireSeconds. aggregated_data collection could be normal collection type and can use this for database triggers. (At the moment, we cant use timeseries collection for realm-database-triggers)

Collapse
 
longvd89 profile image
longvd89

I want to ask the solution on front end with react

Thread Thread
 
tagorenathv profile image
TagorenathV

From UI perspective we just give a json response to populate a chart. For fetching that value for a pid we need to use mongo aggregation pipeline. Please check this if it helps:
github.com/tagorenathv/iot-saas/bl...

Collapse
 
kondalajagan profile image
jagan reddy

Good project!

Collapse
 
tagorenathv profile image
TagorenathV

Thankyou.

Collapse
 
techbelle profile image
rachelle palmer

This is so rad. I had to forward it to our product manager for time series. :) Thanks for building!!!

-Rachelle, Product Lead for Developer Experience at MongoDB

Collapse
 
tagorenathv profile image
TagorenathV

Thankyou. Glad You liked project.

Collapse
 
skkhajamohiddin96 profile image
SkKhajaMohiddin96 • Edited

This submission could be a startup itself ! Nice Project

Collapse
 
tagorenathv profile image
TagorenathV

Thankyou.

Collapse
 
josethz00 profile image
José Thomaz

Hi, very nice project congratulations! I have a question, how are you doing to monitor the devices? Are you connecting to he devices through MQTT and getting its data and then storing in the database?