A live-updating scoreboard powered by React and a Google Spreadsheet.
This project is based on the react-production
boilerplate, whose code lives in the commit history of this repository. That boilerplate has since become razzle, but I like the original version so much that I decided to preserve it.
- Create a Google Spreadsheet with the same format as this one.
- Clone this repository.
npm install
oryarn
.- Create a subdirectory called
secret
in the root. Also create a file called.env
. Both are ignored from version control. - Follow steps A-H under "Step 1" of this Node.js + Google Spreadsheets tutorial. Instead of putting
client_secret.json
in the root, put it insecret/
. - Paste the following into
.env
. All of the values can be found inclient_secret.json
except forGOOGLE_SPREADSHEET_KEY
andGOOGLE_SCOPES
.
GOOGLE_SPREADSHEET_KEY
: Can be found in your spreadsheet's URLGOOGLE_CLIENT_ID
GOOGLE_PROJECT_ID
GOOGLE_AUTH_URI
GOOGLE_TOKEN_URI
GOOGLE_AUTH_PROVIDER_CERT_URL
GOOGLE_CLIENT_SECRET
GOOGLE_REDIRECT_URIS
: Inclient_secret.json
, this is an array with multiple elements. Make sure to include all of them here, separated by a spaces.GOOGLE_SCOPES
: Set tohttps://www.googleapis.com/auth/spreadsheets.readonly
- Execute
npm run token
. This will puttoken.json
intosecret/
. Open it and fill in.env
with the remaining values found in the file:
GOOGLE_ACCESS_TOKEN
GOOGLE_REFRESH_TOKEN
GOOGLE_TOKEN_TYPE
GOOGLE_TOKEN_EXPIRY
- You're ready. These environment variables are pulled into
server/config.js
and dispersed into the application logic from there.
npm run token
: Generate a Google authorization token intosecret/
.npm start
: Start the development server.npm run start:prod
: Run the Node.js server in production.npm run scrape
: Start the scraper in development.npm run scrape:prod
: Start the scraper in production.npm run build
: Build for productionnpm run clean
: Empty outbuild/
andpublic/assets/
- The
build/
subdirectory has a.gitkeep
file inside so we can version control the directory itself but not the files inside. This is necessary so Node can write files to this directory. - Don't run the application and the scraper concurrently (for example,
npm run scrape & npm start
). Some cursory experimentation indicates this can cause wonkiness due to port overlap. Instead, I'd recommend doingnpm start
in one shell tab, thennpm run scrape
in another. - By default, the scraper runs every 20 seconds while the application fetches new scores every 30 seconds. If the timing between the two processes isn't synced correctly, the score cards won't always get the CSS animation indicating an update happened.
The interval for fetching new scores in the ScoresListPage
should always be longer than the scraper interval in server/scrape/scrape.js
to ensure the "updated" CSS class gets properly applied to each score card.
- Fix
[react-router] Index routes should not have paths
console error - Non-horrible date formatting
- Unit tests
- React Router 4.x
- Better styles
- More robust scores data
- React Fiber
- Better timing between scraper interval and fetch for new scores, per the last bullet point in the section above.
MIT