Online Registration Done Easy
I’m Donna. I know everything.
Donna is the code name for the World Affairs Conference's online registration system. We originally designed Donna for this conference, but it could be modified easily to be used for other student-led conferences to make registration easy and customizable.
Donna is named after Donna Paulsen, the omnipotent secretary from Suits.
I will continue to stay awesome, because I’m Donna.
More documentation is coming soon in this
Donna was created by students at Upper Canada College running registration for their annual current affairs conference.
Each year, ~1000 students from the Greater Toronto Area register this conference through their teachers. This pose a difficult challenge since we need to collect lots of information such as sessions they prefer, dietary restrictions, accommodations, payment status, etc. We got tired of processing endless emails and mails, and decided to create a customized digital system for this.
Through Donna, we can automate many of these processes:
- Teacher from each school register an account.
- Teacher can view important communication through their portal such as registration deadline.
- Teacher can register students along with important information such as student's name, year, preferred panels, and accommodation.
- Teacher can view the status of their payment (updated by us after receiving the cheque).
- Teacher can delete students as well as their own account, no related records will be kept in our database.
With the data stored in our database in
JSON format, we can easily run algorithms to generate name tags, plan the time and room distribution for sessions, and gain insights in our attendee's interests. You can find the set of scripts here.
Production & Deployment
This system has been used for World Affairs Conference since 2018, handling registration from hundreds of conference attendees. You can check out the live deployed version of this system at https://worldaffairsconference.github.io/donna/.
Currently, the deployment environment is GitHub pages.
We made Donna using a few cool technologies!
- Firebase Realtime Database
- Font Awesome
The reason we chose
React + Firebase is that we think the React's state management and Firebase's real-time synchronization makes this system very smooth to develop and reliable to deploy.
The particular set up of this project allow module bundling with webpack, abstracting of helper functions, and access control of authorized vs unauthorized users.
- src/ - components/ - img/ -- resources for webpack bundling - protected/ -- authorized components - *.js -- public components - config/ - config.js -- content configuration - constants.js -- API credential (gitignored) - helpers/ - auth.js -- firebase authentication methods - index.js - index.css - App.test.js -- Jasmine testing script (TO-DO) - setup.sh -- set up API credentials
We use customized components to generate UI representing data response. For example, we add a
StudentRow component for every student, using data passed from parent component via
We use internal
states often for form data field validation. For example, see
We set up real-time listeners at references of the firebase database. Once there is an update on the data, we will re-render the portal. See
We originally developed this application with node
v8.4. The app works with LTS as well (May 2020,
v12.16.3). Currently the application is being tested on node
v12.21.0 to comply with
Firebase Cloud Functions.
Set up your node environment using default global node version or nvm.
Run the following commands:
yarn run setup # Set up firebase API credentials for local testing yarn install # Install node packages ./port # if you want to change the port, defaulted at Port 3000 yarn start
When it asks for your Firebase API Key, paste that in. You'll need access to a valid Firebase set up. The spark (free) plan should work. Please make sure that the
JSON is a single line.
The server will output to
http://127.0.0.1 on the port that you set (default 3000).
To modify the system to fit your conference's needs, feel free modify the parameters in
config/config.js and update the logic of protected components.
Github Actions is already setup for this repository. Make sure to test thoroughly on local host before commiting and pushing. The
Actions is set up like so:
- If a change is made to the
/publicdirectory, the Action will build and deploy the application to
- Any code outside of the two directories will not trigger the deployment.
- The remote
Firebase Config Fileis stored as a
Github Secret. You can only update it with a new value under
Contributor and Maintainer
Donna was originally created by Simon Guo and Nicholas O'Brien, mentored by Matthew Wang.
Previously maintained by Robert Knowles.
Currently maintained and developed by Jefferson Ding
There are many part of this code that can be refactored into more functions and components.
Program logic fix
- Remove forced refresh when data is updated.
- Move Firebase request to a async library function. Call it in
componentDidMountrather than in constructor.
- Make sure all states are set up with initialed data and then updated using
- Replace bind with arrow function/ES6 anonymous functions to ensure
Better modulization of components
- Reduce redundancies of similar JSX elements in
forEach, identified through
Reduxto contain states.
Upgrade React component & dependencies to newer versions.
- Upgrade router from
Better program structure and folder organization.
Shared/folder to add tests.
- Set up Component subfolder that is named by the main component it contains.
Automated Testing, Integration, Deployment
- Set up static test pipeline. Using
Enzymeto mock a call to a function, returning static data that represents snapshot of supposed behavior.
- Set up proper CI pipeline.
- Set up CD in
Github Actionsand manage API key credentials through
- Accessibility tab select key operations.
- Card view table in mobile view.
- Color code icons to replace long texts.
- Make dashboard information viewable in one screen without scrolling horizontally in mobile view.
- Fix Navbar alignment.
- Individual Registration Portal
- Email confirmation of registration, automate pre-deadline reminder
- Fee calculation based on number of registered students
- Payment integration (Stripe API)
- Confirmation of payments, lock-in registrations
- Batch upload from CSV