Inspiration

I'm one of 12 teaching assistants (TA) for a computer science course on Systems and Networks. Every day, multiple TAs hold office hours where students can come into our lab to get help on homework or projects. At peak times we have upwards of 30 students in our lab with only one or two TAs. To keep things organized, we use a queue system where students write their names on the board and the TAs help people in order, erasing names as they go.

Now with our current situation, it is impossible to meet in person as our school has gone online for the rest of the semester. We are still going to hold our office hours through online meetings but we ran into a problem when trying to find a queue system. We need to be able to notify students in real-time when it is their turn and send them the link to join the correct TA videocall. To solve this problem, I built SmartQueue

What it does

SmartQueue is a react webapp that allows students to join the help queue and instructors to notify students when it is their turn to get help. It allows multiple instructors to be online at the same time and each sends their own video chat link to students. When the instructor selects a student, it will send a notification to the student and they can simply click the link to open the video chat.

How I built it

I started with create-react-app and built components from there.

Challenges I ran into

Webhooks are hard - when I deployed the app to my production server, I noticed that the webhooks would sometimes stop working. I found out that nginx was closing the session if no messages were sent in 60 seconds. To fix this, I simply created a ping/keepalive message type that the backend server would send every 40 seconds and the react frontend would respond. If the backend doesn't receive a response in time, it will close the session to save on resources. Notifications are also hard - I had a hard time getting notifications to work with the native HTML5 notifications API so to fix this, I found a react component called react-web-notifications which worked really well.

Accomplishments that I'm proud of

Going into this, I had never worked with native websockets (only socketio, and other similar libraries) so it was really cool to understand how they actually work under the hood. My favorite moment was when I realized that the frontend connection and backend connections were the exact same API! The code was the same for both of them! I'm also really happy that I was able to get everything built and fully deployed to a production server within this short time. In fact, within the first 24 hours, I had a very basic MVP with webhooks working and deployed to my server!

What I learned

I learned how websockets work as well as modern browser push notifications.

What's next for SmartQueue

  1. Implement in my class and start getting feedback from students and other TAs
  2. Rework notification system to be more robust
Share this project:

Updates