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.
WATT is built using React and Firebase, with a backend in Cloud Functions and database using Cloud Firestore. This
repository is a monorepo containing nested node packages managed via npm workspaces
and TypeScript paths
. Within the
repository,
/client
houses WATT's web frontend, built with Vite and React, and the native desktop app, bundled with Tauri.
/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.
/shared
houses shared data and utility functions for use in the client, functions, and scripts.
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!
WATT exposes API endpoints for developers wishing to fetch schedules, alternates, and other data. Read the API docs here.
These instructions assume you have a compatible version of Node installed. Install Node here.
Before running everything, install all necessary packages by running npm install
in the root folder. This should
install all the dependencies required by the client, functions, and scripts and generate node_modules
in each package
and at the root with the installed files.
The following sections will go over how to run each component of WATT locally.
Navigate to the client directory with cd client
. Run npm start
to start the vite development server on localhost:3000
.
Your terminal should look something like this:
Vite leverages react-refresh
to perform hot module replacement
and automatically update the development server whenever files are updated locally; there's no need to rerun npm start
after editing a file.
Note that you will be unable to log in or call Firebase functions without running emulators (see next section).
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
. 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, but this can be done concurrently while the emulator is running.
From the functions directory, running
firebase emulators:start --import ./presets
in a new terminal window should start the emulator suite UI on localhost:4000
as well as the Firestore, Functions, and Auth
emulators on other localhost ports.
Navigating to localhost:4000
should bring up the Emulator UI from which the emulated firestore database and auth
records can be accessed.
To develop desktop-specific features locally, run
npm run tauri dev
in /client
. This starts the Vite dev server on localhost:3000
as usual, but also launches a desktop application
that is automatically recompiled when the Tauri project (in /client/src-tauri
) changes.
Navigate to the scripts directory with cd scripts
. 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.
More detailed documentation on what each script does can be found in the scripts README.
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.