ClassConnect

Lectures in today's environment stink as students questions don't get answered or they are afraid to ask them. We made a lecture companion site for better anonymous teacher-student communication!

Comment

Inspiration

Based on our own experience at Boston University these past two semesters, we know that asking questions and interacting with the professor on Zoom or other sites used for lectures can be very hard! Two of us are course assistants and without fail our professor mentions how she has no idea if students are actually understanding the material because she has no way to gage the student's reaction. Sometimes we ask questions in the chat and the Professor just never gets around to them because they are focused on lecturing, other times they get buried along with the other questions.

Furthermore, sometimes some students find it hard to send a question to the Professor, even in private, as they are openly showing their name, and they are afraid of looking dumb.

It will also be useful for in-person classes even in-person it is hard to raise your hand. It also helps the professor know which questions are the most relevant.

With this in mind, we created ClassConnect!

What it does

ClassConnect has one basic functionality, it allows students to post anonymous questions that pop up on the Professors screen immediately! Furthermore, they can tag these questions with appropriate tags regarding the content of the question.

After the question is posted, other students can Upvote them, and the most Upvoted questions will show up on the top of everyone's screens. The professor can also selectively delete questions once he has responded to them.

Moreover, the Professor has access to some statistics regarding the current classes, as well as a live meter of the percentage of students that have clicked the "I am confused" button. This last functionality can be crucial for the Professor to gauge how the class is reacting to the lecture, and due to the anonymity, students have nothing to fear and can ask questions that under other circumstances might seem "dumb".

Professors have the ability to create sessions, which generate a unique room code that can be shared with students. Professors can also see previous sessions, which are archived and can be accessed through a database for analytical and review purposes.

How we built it

The program has two sides, the FrontEnd, which is built using Gatsby.js (and React.js); and the BackEnd, which is built using Flask. The live data is held in Google Firebase Firestore, for quick, simple, and synchronized access, while after a session is closed by the Faculty member, the data is put into CockroachDB for long-term storage, always being available for download.

Firebase

Our utilization of Google Firebase is done around one simple implementation. We create the Firebase Object when the website is first built and wrap all pages and content around it, using assistant functions throughout to provide access whenever needed. This also makes it so all access is concentrated into a single Class, which makes editing a lot easier.

Furthermore, we also wrap all pages and content around an authentication wrapper, which gives us access to an authUser object for every logged-in individual (Faculty). This again makes the control of information, and access to said information, a lot easier.

Finally, the utilization of Firebase Firestore and Firebase Authentication means that we have what amounts to unlimited scalability, both in regards to the number of active room sessions and the number of students and faculty, at a fraction of the cost. We have structured all the stored data within Firebase to be able to handle large amounts of inputs and thanks to the cost-structure of the Google Firebase product, we end up having to pay a lot less overall.

CockroachDB

When the user closes a room, we create a permanent record of the session stored in CockroachDB. We have a flask server running in the background that interfaces with the CockroachDB nodes we created. When the user wants to a review closed session, we return the data associated with that session to the frontend where it is neatly downloaded. We chose CockroachDB because it is a good way to store information long term, because it is so scalable and consistent.

Challenges we ran into

The first challenge was that half of our team didn't actually know React.js, no one knew how to use CockroachDB, and we had only minimal knowledge about SQL databases in general.

Beginning with the FrontEnd, we saw some issues in the synchronization of data, but after creating a wrapper method that provides the entire application with Google Firebase and making use of the Google Firebase "subscription" methods, we were able to subscribe to both the specific "user" document (for the Professor) and the "rooms" collection to get the current room data.

When it came to the BackEnd, things got significantly more complicated. After spending a few hours getting familiar with CockroachDB, we began implementing the DB communication methods. After hours of attempts, we finally manage to establish a good connection between FrontEnd and BackEnd and to setup the required functionality to write and read data from CockroachDB.

Accomplishments that we're proud of

Overall we are all incredibly proud of having managed to create this entire project in the span of a couple dozen hours, there were a lot of steps to take in order to produce this product, and just to have completed it is amazing for us.

We are also really happy that we managed to learn a lot along the way, from the implementation of Firebase, which utilizes wrappers in a very neat way; to how much we learned both about CockroachDB and SQL in general! Which was new for a lot of our members.

Finally, I think the fact that we managed to produce such a, in our opinion, clean implementation that still uses live data, really was a huge mark for us.

What we learned

We learned a lot about how to directly implement Firebase in a way that covered the entire application. We also learned how to use and implement CockroachDB.

The members of our team who weren't as familiar with React (and Gatsby), have since learned a lot of the inside-outs of the JS package.

WinHacks Goals

With this project we are targeting the following awards:

  • People's Choice
  • Best UI/UX Design
  • Best use of Google Cloud - [Firebase]
  • Best use of CockroachDB - [Long-term Storage]
  • Best Domain registered with Domain.com - [classconnect.tech]
  • Most Launchable Hack - [Complete Basic Product/Business Idea]

What's next for ClassConnect

There are a few things to add:

  • A language filter (we really wanted to add this but did not have time)
  • A poll feature allowing teachers to dynamically poll students
  • Administrative Panel for Business Purposes (this would be for us)
  • More configurable options for Faculty

Built With

Share this project:

Updates