This project is a collaboration between the Harvey Mudd College Clinic Program and the South Gate Community Environmental Health Action Team (CEHAT). This repository has all the code for the front and back end of a community air quality monitoring dashboard, accessible at https://sg-cehat-air-quality.web.app. All sensor data is gathered using affordable PurpleAir sensors owned by the CEHAT. This website is tailored for the South Gate community, but it can be used as a template for other communities with the appropriate modifications. For more information about creating this website for another community, see CLONING.md. One important feature of the website is its availability in both English and Spanish, which is relevant to the community of South Gate, but other languages can be added with some code changes and by translating the website content into the other desired languages.
This repository was worked on by students at Harvey Mudd College from August 2020 until May 2021 and will not be maintained afterwards. It is not likely that this project will be expanded, though it is possible if the CEHAT pursues extensions of this work in the future. Since there are no maintainers of the repository, do not attempt to make any changes or submit any pull requests, as they will never be reviewed. If you clone this repository for your own work, note that any major changes to the frameworks used in this project will not be reflected in the code.
See SCRIPTS.md for scripts that can be run with this app.
This project was bootstrapped with Create React App. You can learn more in the Create React App documentation. To learn React, check out the React documentation.
The main programming language used in this project is TypeScript. TypeScript is an object oriented language built on top of JavaScript, adding static type checking at compile time. To learn TypeScript, check out the TypeScript documentation.
This repository uses gts (Google's TypeScript style code) for code style. gts enforces TypeScript code style in the repository and allows some formatting issues to be automatically fixed by running npm run fix (see SCRIPTS.md for more information). Under the hood, gts uses ESLint and Prettier. See the linter configuration settings in the prettierrc.js, .eslintignore, .eslintrc.json and tsconfig.json files in the root directory for the front end code and in the functions directory for the back end code.
See DATABASE.md for a description of how the Google Firestore database is structured.
Chakra UI is an accessible component library for React applications. All of the front end code in the src directory heavily depends on components from this library. To learn how to use Chakra UI, check out the documentation or the GitHub.
HERE Maps is a mapping library that is compatible with JavaScript and TypeScript. We use this library for the map of our sensors that appears on the home page of the website. The only files with code dependent on HERE maps are src/components/Map/Map.tsx and public/index.html (where the scripts are included). We use their JavaScript API using an API key.
react-i18next is an internationalization-framework for React and React Native based off of the i18next library. In our project, we use this library to write English (en) and Spanish (es) versions of all text that appears on the site. Our translations are used throughout the front end code in the src directory, but the translations themselves are found in public/locales/. To learn how to use i18next, check out their documentation.
Axios is a promise-based lightweight HTTP client that allows users to make HTTP requests including GET requests and POST requests. This framework is used to communicate with the PurpleAir API in both the front end code in the src directory and in the Cloud Functions code in the functions/src directory. For more information, check out the documentation or the GitHub.
For a complete list of the packages used in this project check out the package.json file for packages used by the front end and the functions/package.json file for packages used by the Cloud Functions.