Beehive: Save the Classrooms!


Students and Teachers alike do not enjoy using traditional course planning software. Teachers have a hard time understanding how to configure Canvas, and Students prefer more social apps for studying like Discord. However, Discord is not optimized for study: it’s hard to focus discussion on assignments, and the interface is not accessible for all users. Beehive is the simple solution!

What it does

Beehive is an online environment designed to foster clear communication in instructor and student interactions. All students enrolled in a class are given a server code to join an ecosystem conducive to teaching assistant office hours, group project brainstorming, and exam preparation. Beehive seamlessly merges current messaging apps, video sharing services, and online classroom forums onto one platform.

Beehive does not serve as a replacement for an entire course management system (such as Canvas, Blackboard, CCLE, etc.) but rather as an all-encompassing tool to simulate interactions found in a conventional classroom such as breakout sessions, one-on-one talks with Teachers/Teaching Assistants, and casual conversation relating to the course. Key features in our app include the whiteboard breakout room option, which allows one participant to interact with a board, and a calendar populated by the instructors to remind students of due dates.

How we built it

Beehive is implemented with React, and consists of several Classes (“components”) that are declared in javascript files. The three main components are the Sidebar, a Classbar, and the content for a cluster or discussion channel. The Sidebar links to several class pages, each of which link to informational and group work channels.

To implement Beehive’s integrated whiteboards we utilized the collaborative Socket IO whiteboard. Several users can annotate the whiteboard at a time, and the whiteboard is automatically cleared each time the cluster is emptied and then a new group joins.

Challenges we ran into

All participants were very new to using React and website development; however with teamwork a website from scratch was able to be created. Formatting design from paper-to-reality (Figma to JS) was a huge challenge along with formatting a usable whiteboard that could be erased.

Accomplishments that we're proud of

The majority of the Beehive team had little to no experience with Javascript/front-end programming, and so just being able to put together the website that we had in itself is a major success for us! Other features that we were able to implement were a functioning whiteboard, interactive calendar and a clock.

What we learned

Andrey: I have never done anything resembling frontend/backend before this project. Thanks to this project I learned to use git better, and learned the basics of React and components. I also learned a little about databases. It was really wonderful working with a patient and understanding team!

Paolo: In the past I have worked primarily on the backend using Express, so getting an opportunity to focus more on the react side of components and implementing libraries and managing the git repository were valuable learning experiences!

Sabina: Learning Figma was a huge learning curve for me, but gaining more experience with prototyping and website design was valuable. Project managing skills definitely increased as well as collaboration on a product with a completely remote team.

Julius: Thanks to this project, I learned to use React in such a better way and also learned git as well. I also saw a glimpse of the backend which I’m hoping to learn even more in the future! I felt lucky to have the team I have and the project we came up with!

Hayley: Coming into this project, I had zero experience with react.js, let alone Javascript programming in general. I was able to learn how to implement many js functions, and I put my design experience to use by helping to create a Figma mock-up/prototype. I loved being exposed to new ideas and it was so amazing getting to collaborate with my teammates (even if it was extra challenging due to the virtual environment)

What's next for Beehive

Interactions with other students can be incentivized with points gained from interacting with other students and participating in Cluster breakout rooms; these points can be used at the discretion of the instructor (examples include as participation points for the course or bonus points on exams). For the whiteboard discussion, chat would be implemented for text-based communication in homework channels. Extensions for the whiteboard such as a Wolfram Alpha calculator and chemical formula inserted could be implemented for the future as well.

As previously mentioned, due to the time constraints and high learning curve, we were unable to implement many of the features and details that we hoped to. We instead had to prioritize certain components over others and choose to have select working linked pages for demonstration purposes. We hope that we can continue to develop our concept and finalize the design to include all of the different functionalities that we had in mind. These include the login page, the customizable calendars, collaborative speaking environment, and complete working buttons. Finally, we need to link our domain (with three e's) to show our website to anyone interested. We are excited to see where Beehive goes :)

Built With

Share this project: