LectureMon

LectureMon is a gamified course feedback system to help course reps on their epic quest. By completing surveys, users can level up and collect trading cards complete with stats based on their ratings.

Comment

Inspiration

Two of our team members are course reps so we decided to build something to help them out! We took a gamified approach to increase user engagement, using XP, a leaderboard and collectable trading cards as rewards.

We definitely weren't inspired by Pokemon, all similarities are clearly purely coincidental.

Team members

Kai - maj3stic#4863, intermediate Noah - NoahNok#9656, intermediate Cameron - Cameron#4030, intermediate Michal - m4ge#1319, intermediate

What it does

Create an account to start completing polls on your course. Each time you complete a poll, you earn XP and a trading card. Trading cards have different rarity and represent either modules or lecturers, with their stats calculated from their collective feedback.

Compete with your friends on the leaderboard to be the most active in giving feedback!

How we built it: Frontend (Kai, Noah)

We used React, Typescript and Tailwind to create a modern looking frontend app. We make use of react-router to do routing on the front end keeping everything quick and responsive The project is split into views that represent each page, and components that allowed us to modularies it into section to reduce repeated code. We made use of typescript as it provides stronger typing for javascript reducing errors and making the development flow much quicker

How we built it: Backend (Cameron, Michal)

Firstly, we got node and express setup in order to allow our frontend-friends <3 to route GET or POST requests to the node server. Then we split off, Michal did the database setting-up while I (Cameron) continued to define the routes that would be used in the API: Cameron - In order to keep the user logged in I decided to research into how to use cookies, this led to me looking at how I could use express-session and cookie-parser npm modules in order to allow the server to know which user the request was coming from. Sessions were confusing at first, but once I had understood what cookies were and how they were used by the server I was quite comfortable using them. Along with routing, I had to deal with validation and in this I was forced to learn about Regex and hashing in order to keep the user authentication adequate, using Regex to verify emails, passwords and names were of the correct format and hashing (bcrypt) to make sure the password was the same. After implementing these successfully I went to helping Michal with some of the database handling, as this was a large part of the project, and found it great to learn how to carry out more complex queries on the database. Being my first hackathon, it was an amazing learning experience and would definitely do it again! Michal - I started off by setting up the database and configuring some API endpoints to handle things like listing a user's modules. The main challenges I faced were as follows: learning to use NodeJS (I'm used to Flask), figuring out how to handle JSON in an SQL database (the answer is - painfully!), and setting up the database in a relatively 'future-proof' way. However, towards the end of the project, I got into the swing of things, and was able to add swathes of useful database-editing API endpoints to flesh out some functionality. It was definitely a rewarding experience!

Challenges we ran into

Database structure design proved difficult and we ended up with a very hacky solution! We had some difficulties with getting the server working so Michal started a Flask rewrite, but we figured out how to fix our major issues by adding callback functions to all out database calls.

The database was definitely the hackiest section though! Given more time, and if we intended to continue this project, our first priority would be a full re-write of the database, potentially swapping to another database altogether (like MySQL). However, we were just about able to navigate our clustered mess of tables before the end.

To store JSON within the SQL database we had a minor problem, as we had to store the JSON as TEXT, but characters like " and : caused some issues. This required us to use escape() when putting data into the database, which would convert characters to %xx which allowed the database to store the data. This meant that upon retrieval, we had to unescape() and JSON.parse() to read in the data. This was a bit confusing, but ultimately proved workeable.

Accomplishments that we're proud of

Our modular survey/poll system! The front end can read in a list of JSON objects that allow us to produce a visual form representation that works with Text, Radios, Checkboxes, Selects and Range Sliders. The results of these can then be gathered and fed back to the backend which will process them. Creating a system like this is quite complex as you have to cover for multiple form input types and manage a more complicated storage system to store each survey and its options

What we learned

Using sessions Working effectively in a team with github and trello Kai had never used react or typescript before

What's next for LectureMon

  • Loot boxes
  • Lecture calendar with automated mailing to remind you to take a poll
  • Increase number of universities
  • Allow course reps to do admin things (e.g. create custom polls)
Share this project:

Updates