A print-at-home race bib generator in the time of COVID-19.
The 43rd Annual Austin-American Statesman Cap10K scheduled for April 5, 2020 was cancelled due to the coronavirus, but Coach Gary came up with a brilliant idea: to organize a safe, alternative virtual race that our running team members – spaced at least 6 feet apart – could run or walk wherever they are.
But what's a race without an official bib number to wear and celebrate in your selfies at the virtual finish line?
So we built this bib generator site just a few days before the event, and invited the whole community to participate. The event raised over $6,000 for the SAFE Austin Children's Shelter.
We hope this success will inspire similar efforts on behalf of those in need in your community, too.
- React
- Google Firebase, Analytics, and Hosting
- Facebook Login
- Fabric.js Javascript Canvas Library
The code in this repo is built around a specific event but can be easily modified to support a virtual race or similar event of your own.
By default, the web app:
- generates a printable bib (PNG) with unique bib number, participant name, and city
- outputs an award certificate (PDF) when the event is complete
- logs bib entries in a Firebase Realtime Database
- displays an animated slider listing random participants
- (optional) Facebook Developer Account and Application ID
- Familiarity with Fabric.js is helpful but not required
- Set up a free Firebase account and start a new Firebase project.
- Create a new Firebase Realtime Database and set up rules.
- Install the Firebase CLI.
- Set up Firebase Hosting.
- Clone this repo.
git clone https://github.com/ahtraddis/totallyspacedout.git- Install NPM packages
npm install- Edit the
defaultsandfirebaseConfigobjects inApp.jsto suit your event and Firebase configuration:
const defaults = {
name: "YOUR DEFAULT NAME",
city: "YOUR DEFAULT CITY",
missionText: "YOUR SLOGAN OR MISSION STATEMENT",
missionSubText: "www.yoursiteurl.com",
baseFilename: "YourBibFilenamePrefix_",
awardBaseFilename: "YourAwardCertificateFilename",
tosUrl: "https://www.yoursiteurl.com/terms",
privacyPolicyUrl: "https://yoursiteurl.com/privacy",
};
...
const firebaseConfig = {
apiKey: "YOUR-API-KEY",
authDomain: "YOUR-AUTH-DOMAIN",
databaseURL: "YOUR-DATABASE-URL",
projectId: "YOUR-PROJECT-ID",
storageBucket: "YOUR-STORAGE-BUCKET",
messagingSenderId: "YOUR-SENDER-ID",
appId: "YOUR-APP-ID",
measurementId: "YOUR-MEASUREMENT-ID"
};- Edit the following functions to modify the bib and award certificate layouts:
createBibGroup()- generates a standard race bib outlinecreateTextGroup()- generates bib number, name, and city fieldscreateTextGroup2()- generates mission statement and site URLaddImages()- adds logo images and thumbnails to canvasaddAwardElements()- generates the award certificate PDF
See the Fabric.js docs for usage info.
- Edit the HTML body, substituting your own event info, links, and images.
yarn buildfirebase deployThis was created in just a few days, so next steps will be to clean up and abstract things to make it more easily reuseable for ongoing events. Let us know your ideas and needs and we'll try to incorporate them.
| Status | Milestone | ETA |
|---|---|---|
| Abstract text, graphics and layouts via configurable templates | ||
| Add support for ongoing team/community events with the same participant base |
This project is licensed under the MIT License - see the LICENSE file for details.
If you appreciate and benefit from this project, please consider making a tax-deductible donation to SAFE Austin via the Team FX Donate page.
Eric Schwartz - eric@whyanext.com
Project Link: https://github.com/ahtraddis/totallyspacedout
- Team FX Austin and our amazing coach Gary Walker
- SAFE Austin Children's Shelter
- React Awesome Slider
This project was bootstrapped with Create React App.