A mock temperature management system for a smart residential dormitory in NUS built using Meteor and React. This project was built as part of the final assignment for the CS3249 UI Development module at the National University of Singapore (NUS).
If you are new to Meteor, install Meteor first by following this quick start guide.
To deploy this application locally, clone this repository onto your computer. Then, navigate to the folder where you cloned the repository. Then run the following commands in your command prompt/terminal:
meteor npm install
meteor
The application will take a minute or two to initialize the mock data before you see this line:
...
=> App running at: http://localhost:3000
Visiting http://localhost:3000 in your browser then launch the app.
Here is the basic core folder structure of the Meteor app with description on what each file contains or does.
public/ # Fonts, Images, favicon, Web manifest files
private/ # Mock raw CSV data for the room temperature time-series data
server/ # Launch point for Meteor's server.
# The raw CSV data is formatted and handled here.
client/ # Main CSS for the application and the launch point for React
imports/
api/ # Collection imported here for UI access
ui/ # React Components
...
Most notably, this file structure allows Meteor to quickly recognise where relevant assets (client, server, public, etc) and closely follows the recommendations in Meteor's official documentation.
To break down the ui folder structure further:
components/ # Stateless Components - UI logic
containers/ # Stateful Components - Presentation logic
data/ # Data processing utility functions - Business logic
React Components are split into components and containers, according to stateful containers and "contained" stateless components. This architecture of containers and components allow for easy extensibility down the line as complex UI components can just be grouped and contained entirely within containers.
The temperature time series data in this application is provided to us in a form of a CSV file (/private/room-temperatures.csv) with the following (parsed) schema:
# Old temperature time series schema
const tempObject = {
roomId: 6,
data: new Date("2013-10-02T05:00:00"),
temperature: 23.112
};
However, this schema represents each time series data at its most atomic level, which presents performance issues when plotting all the points in the graph, given that there can be up to thousands of points!
Thus, the server upon startup, will treat the parsed CSV data into a format where we aggregate room data according to common timings. This reduces the amount of data objects we need to load into the database and send to the frontend. Like so:
# Treated temperature time series schema
const tempObject = {
date: new Date("2013-10-02T05:00:00"),
room Temps:. {
room0: 22.329,
room1: 20.615,
room2: 20.415,
room3: 20.612,
room4: 19.121,
room5: 25.123,
room6: 21.111
}
}
Using Meteor, our front React Application can seamlessly interact with our backend datastore (MongoDB) as the data is published from the back end as a topic which is subscribed to by the frontend graph interface. The received data is then filtered according to the parameters set by the user. For our graph interface, we used Dygraphs due to its lightweight footprint and simple-to-use API.
The floor plan of "Floor 6" on the side of the app is connected with DyGraph instance. Clicking on the rooms will toggle the temperature reading on the graph. The colour of the rooms are also tied to the average temperature of the room shown on the graph compared to the global min and max temperatures recorded, with red for hotter temperatures and blue for colder temperatures. The intensity of the colours are also tied to deviation away from the average temperatures.
This project is licensed under the MIT License - see the LICENSE file for details.