Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yauyenching/dorm-temp-dashboard
A full stack PWA web app for a mock temperature monitoring dashboard built using TypeScript, React.js, Sass, and Meteor.
https://github.com/yauyenching/dorm-temp-dashboard
full-stack meteor pwa react sass typescript
Last synced: about 1 month ago
JSON representation
A full stack PWA web app for a mock temperature monitoring dashboard built using TypeScript, React.js, Sass, and Meteor.
- Host: GitHub
- URL: https://github.com/yauyenching/dorm-temp-dashboard
- Owner: yauyenching
- License: mit
- Created: 2022-09-10T15:20:19.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-23T14:38:54.000Z (about 1 year ago)
- Last Synced: 2024-10-31T03:42:20.519Z (3 months ago)
- Topics: full-stack, meteor, pwa, react, sass, typescript
- Language: TypeScript
- Homepage: https://dorm-temp-dashboard.herokuapp.com/
- Size: 4.98 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://plotly.com/javascript/react/) 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](https://mui.com/)
* [janjakubnanista/downsample](https://github.com/janjakubnanista/downsample)
* [meteor-fast-render](https://github.com/Meteor-Community-Packages/meteor-fast-render)
## ⚙️ Building this Project ##
If you are new to Meteor, install Meteor first by following this [quick start guide](https://guide.meteor.com/).
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](https://github.com/yauyenching/dorm-temp-dashboard/blob/main/LICENSE) file for details.
## 🙌🏻 Acknowledgements
Thank you to the creator [Flat Icons](https://www.flaticon.com/authors/flat-icons) for temperature monitoring [icon](https://www.flaticon.com/free-icon/monitoring_4413491?term=temperature+monitoring&page=1&position=1&page=1&position=1&related_id=4413491&origin=style#) I used for the web app's favicon.