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 .env populated with the key and secret like so:
SGY_KEY="hmu2a86v9qekgmg64vgyicfkj7u5t2wiee9gwxfkh"
SGY_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 devin /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.