Booklet is a simple catalogue management and item booking system,
designed for the media department at my high school. I built it in
collaboration with another student, using
Express,
MySQL, and
Pug.
The system allows students to easily book media equipment using an
interactive form, and automatically determines item stock levels based
on existing bookings. It provides an interface for admin users to
perform CRUD operations on any item in the catalogue, as well as query
current bookings by date or by item.
Finally, the system automatically emails admin users when a new booking
is created, and reminds students when their booking is available to
collect. The website is fully mobile responsive, allowing students to
begin creating a booking by scanning a QR code.
Design
The first stage of the design process involved interviewing the media
department to determine project requirements. Then, we created an ER
Diagram detailing the database structure, and several design drawings
outlining the layout and content of each page.
Throughout development, we regularly communicated with the media
department to recieve feedback as the initial designs were implemented.
This allowed us to produce a final product that fully met all the
project requirements, as well as providing a simple, intuitive user
experience.
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 us to break the user interface into
reusable components, such as the top navigation bar, making it easier to
maintain.
The catalogue and booking information was stored in a
MySQL database, and we used the
Sequelize ORM to automate table
creation and simplify the process of writing database queries.
Finally, we used Nodemailer to
automate email sending, and
Ethereal Mail to test this
functionality. The interface itself was constructed using
Bootstrap, which provided a
clean, consistent look and feel.
