Home
The SDZWA Sensor Dashboard frontend was built by employing React-Bootstrap components and custom components and ran through a Next.js server. The frontend is connected to the backend using REST API calls such as POST and GET.
Overall system architecture resembles that of the diagram above. The front-end portion of this project involves the React (Web)App along with connecting to the back end using API calls for retrieving and updating user and sensor data.
Primary design choices for the React app are as follows:
-
Modularity
-
Customizability
-
Flexibility
We wanted our application to follow the design principle of modularity to aid in the implementation along with extensibility in the future. All of the pages in this repo can be thought of as separate system components, that can easily be extended or modified without impact on the remaining pages. The only dependency that exists between pages involves logging in to have a valid authentication token and connecting a sensor tile in the dashboard to a corresponding individual sensor page. The primary component of our react app, the dashboard tile page, easily allows for more components to be added as an extension or deletion of components (via the individual sensor page).
As for customizability, our application has been designed in a generalized manner, which allows for customization for current and future developers. We knew that there may be new sensors or connectors in the future, and did not want the overall system design to interfere with these future operations. All API calls are generalized to support a sensor data type, which with the assistance of the back-end team can be modified if need be. From the sensor data type, the react app can then render a different component based on the need.
Flexibility is the last of our primary design principles followed. Our web application has made use of CSS styling in a manner that supports an easy and responsive user experience, regardless of the platform. For this, we considered viewpoints of all types of devices, from handheld smartphones to full-screen desktops -- regardless the user experience will be seamless.
