StudyRooms

Inspiration

As students we understand the importance of working with others when it comes to studying and working. However, we have found that the resources to do so online are lacking, and those that exist can be improved upon. Our goal when creating StudyRooms was to provide a user-friendly chat room where individuals can work collaboratively with their peers and strangers to solve their academic challenges.

What it does

StudyRooms is more than just a chat room—it contains added features to enhance the studying experience of all the participants. StudyRooms features two pages: a homepage and a page for the chat room. The first thing a user will come across is the homepage. The user will be asked to enter their username, which will be what shows up in the chatroom. The user will also be given the choice to create their own room, or to join an existing room by entering a randomly generated code. The right side of the room page features the chat window. This chat window displays all messages sent, including the sender and time. The center of the page features the collaborative whiteboard, which allows the users to solve equations together, draw graphs, diagrams, visualize key concepts, or just to draw together. Using this whiteboard, students can help each other visually with any concepts somone struggles with. All users in the room will see live updates on the drawing board. The timer is able to be shown and hidden through the clicking "toggle timer" in the menu. The timer can help students solve timed practice tests or problems together, as well as serve as a pomodoro timer. Users can leave the room by clicking "leave room," in the menu. This sends users back to the homepage.

How we built it

We used HTML and CSS to create and format the UI on the frontend , as well as javascript to make the timer and whiteboard components. Flask was used as the web server to render different pages and routing. Socketio was used to make real time updates occur on the website and between the clients and server.

Challenges we ran into

One challenge we ran into was in determining what framework to use. While we initially planned to use React and Javascript to build StudyRooms, we ran into many difficulties as it was our first time using it. As a result, we switched to using Flask and Python, which proved easier to do and allowed us to make the project that fit our vision. Another challenge we face was in connecting different web flasks with sockets. Each component, the chat window, whiteboard, and timer, all gave their own challenges in trying to make them sync through different clients. We also found difficulties merging our code from Visual Studio Code to Github with different collaborators, as it gave us many errors

Accomplishments that we're proud of

An accomplishment we are very proud of is getting the drawing board to work. When we first conceived the idea of this board we already knew the whiteboard would be one of the most difficult aspects to code. The main challenge lied in using Socketio to allow users to see what is being drawn in real time.

What we learned

We learned how to make a web page that can show edits and change in real time. Using Flask and Socketio were new concepts for us, and only through learning how to use them were we able to successfully create StudyRooms. This was our first time participating in a hackathon, and the process of connecting our frontend code to our backend code was a new experience. We were able to use Socket and Flask to support our backend which proved to be very difficult.

What's next for StudyRooms

The next steps for StudyRooms are to fine tune it and expand its reach. Since it was entirely created over the 36 hours of Bitcamp, there are many things that we would have liked to include in StudyRooms that we didn’t have the time for. We want to deploy it to a web hosting platform like railways.