Pointbase is a scoring system for school sports days, designed for the
junior campus at my school. It's built with
Express,
MySQL,
Pug, and
Socket.IO.
The system provides teachers with access to a form where they can
allocate points as students complete events. The form has several
different layouts, allowing each sport to have a different scoring
system. The system also provides a live results dashboard, which updates
as new points are allocated.
The application implements a role-based permissions system, where
regular users can only access the results dashboard, teachers can access
the results form, and admin users can access pages for managing events,
houses, and sports. This ensures that results cannot be modified by any
unauthorised parties.
Design
To begin, I communicated with the sports department at the junior campus
to understand their existing, paper-based scoring system. Following
these conversations, I began planning my digital replacement. This
involved creating an ER Diagram detailing the database structure, design
drawings outlining the layout and content of each page, and flowcharts
solidifying how different parts of the system would work.
The most difficult part of the design was working out how to support
events with different scoring systems, whilst still allowing for new
events to be created in the future. In the end, I devised a set of four
generic scoring schemes which covered all the existing events, and
provided an interface for creating new events based on these schemes.
Implementation
The application was built using
Node.js with
Express, using the
Pug templating engine. This stack lent
itself to the model-view-controller (MVC) design pattern, which made the
resulting codebase easy to navigate and reason about. Further, the
ability to create templates allowed me to break the user interface into
reusable components, such as the top navigation bar, making it easier to
maintain.
The events, houses, sports, and results were stored in a
MySQL database, and I used the
Sequelize ORM to automate table
creation and simplify the process of writing database queries.
Finally, I used Socket.IO to implement
the live-update functionality of the dashboard page. This was made easy
by its built-in support for
Express, which I was already using
for page rendering and API routes.
