icedTet / watt

WATT: Web App of The Titans

Gunn WATT

Gunn WATT (Web App of The Titans) is a complete revamp of UGWA, the Unofficial Gunn Web App, complete with a backend, database, Schoology integration, and many more features.

WATT can be found live at gunnwatt.web.app.

About

WATT is built using ReactJS and Firebase, with a backend in Cloud Functions and database using Cloud Firestore.

/client houses WATT's frontend, built with React (CRA).

/functions houses WATT's Firebase Functions backend.

/scripts houses various scripts to fetch and update the JSONs WATT uses for clubs, staff, and alternate schedules.

If you have bug fixes or features you want to implement, you can fork this repository and create a pull request with your changes. All contributions are welcome!

Running Locally

These instructions assume you have a compatible version of Node installed. Install Node here.

Client

Navigate to the client directory with cd client and install the required NPM dependencies with npm install. Run npm start to start the webpack development server on localhost:3000. Your terminal should look something like this:

npm start uses Webpack's hot reload feature which will automatically refresh localhost:3000 when new changes are detected in the project; there is no need to rerun the start script after changing code locally.

Note that you will be unable to log in or call Firebase functions without emulators running (see next section).

Functions

When running locally, WATT uses Firebase's Emulator Suite to emulate production databases for testing. To run emulators, first set up the Firebase CLI.

To replace the private credentials WATT uses in production, visit https://pausd.schoology.com/api and obtain your own API keys (make sure to keep them secret). In /functions, create a .runtimeconfig.json populated with the key and secret like so:

{
    "schoology": {
        "key": "hmu2a86v9qekgmg64vgyicfkj7u5t2wiee9gwxfkh",
        "secret": "8bwt4zpa6izfpapcdieni2u5g4e57w26"
    }
}

Navigate to the functions directory with cd functions and install the necessary dependencies with npm install. Before starting the emulators (and after changing any code), compile the TypeScript source files with npm run build. If you change the functions code, you will have to run build again.

From the root directory (cd ..), running firebase emulators:start --import ./functions/presets in a new terminal window should start the emulator suite UI on localhost:4001 as well as the Firestore, Functions, and Auth emulators on other localhost ports.

Navigating to localhost:4001 should bring up the Emulator UI from which the emulated firestore database and auth records can be accessed.

Scripts

Navigate to the scripts directory with cd scripts and install the necessary dependencies with npm install. WATT's scripts use ts-node to skip having to manually compile TypeScript before running, with each script having a corresponding command defined in package.json. Run npm run to see a list of scripts, or npm run [name] to execute a script.

Credits

Yu-Ting, Kevin, and Roger are the primary creators of WATT. Special thanks to Sean and the rest of the UGWA team for advice and tips along the way. The WATT logo was designed and created by Mylie.

Google Search and Stack Overflow helped greatly. Thanks to the Schoology API for integration with Schoology, as well as the libraries (and ReactJS and Firebase itself) that were used.

Many of the core features were inspired by UGWA. Also thanks to those that helped in user testing and providing feedback.