Dorm Temperature Monitoring Dashboard

A full-stack Progressive Web App (PWA) web application designed to be a mock building smart temperature management system for a dormitory. This project was coded using TypeScript, React, Sass, and Meteor following a final project specification document for a UI development course.

✨ Preview

Explore and interact with time series data in a visually appealing format!

🔗 Check out the live Heroku deployment demo here! (Made obsolete due to the deprecation of Heroku's free tier)

🔗 Check out the live deployment demo here!

Warning: deployed app speeds were found to be much slower than local server speeds.

⭐ Features (with images)

Responsive website design

The UI dynamically adjusts to fit different form factors

Linkable

App's settings are stored in the URL for easy shareability

Adjust the time window

Adjust date time range using material-ui pickers

Zoom in/out of the plot using the mousewheel

Zoom into the plot using click + drag

Pan the plot using shift + click + drag

Adjust sample granularity

Adjust number of data points shown on the plot using a slider

Floor plan

Filter what data is shown on the plot using the floor plan

The floor plan changes color depending on the average temperature of the data in the date time range

🛠️ Implementation

This project was bootstrapped using Meteor and coded using TypeScript and React hooks.

The server firsts parses the dataset (private/room-temperatures.csv) and inserts them into a Meteor collection i.e., a MongoDB database.

On the client's end, the client requests data from the server-side according to the input date time range. From then on, the client manipulates the data further by downsampling the data as necessary and aggregating the data by room id for futher calculations.

The client then presents the filtered data using a time series graph using Plotly and a floor plan. Both the time series and floor plan is interactive and users can adjust the input parameters (i.e., date time range, sample granularity, visible rooms) through these components.

🧰 Libraries

• Material-UI
• janjakubnanista/downsample
• meteor-fast-render

⚙️ Building this Project

If you are new to Meteor, install Meteor first by following this quick start guide.

To deploy this application locally, first clone this repository and navigate to its directory. Then, in the terminal,

meteor npm install

to install all dependencies. Then,

meteor run

to run a local development build. The app will take a few minutes to intialize the data. Then, in the terminal, you will see

...
=> App running at: http://localhost:3000

Going to http://localhost:3000/ in your browser will then launch the app.

📂 File Structure

private/        ## Mock raw CSV room temperature data
server/         ## Server-side code for parsing and inserting the CSV data
client/         ## Container for the UI code and CSS styling
imports/
  api/          ## Business logic for handling room temperature data
  db/           ## Room temperature collection and custom types
  ui/           ## Presentation logic and UI components
  utils/        ## Convenience and auxiliary functions

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙌🏻 Acknowledgements

Thank you to the creator Flat Icons for temperature monitoring icon I used for the web app's favicon.