Study Bear

Inspiration

With the sudden emergence of the COVID-19 pandemic, public study spaces became limited as social distancing became the norm. Many students who previously studied with others in person became unable to do so. Because of this, we came up with the idea of a virtual study room that people could join together and feel connected in. We wanted to create a welcoming and positive space that helped people accomplish their goals.

What it does

Study Bear is a virtual study room allows for students to feel connected with each other while they study, with relaxing lo-fi music playing in the background to create a cozy environment. When joining a room, users can input their name and write a short description of what they're currently working on, so users can see what hard work everyone else is up to. To facilitate a group study environment, users are able to invite other people to their study room with a shareable link. If they're feeling adventurous or don't have a group, they can even join a random study room. We hope the site's atmosphere gives people a better time when they're studying and helps them accomplish their goals.

How we built it

We knew that we wanted Study Bear to be a web app due to ease of accessibility; users can share links and open them right in their browser without any downloads or setup required. To build this, we chose JavaScript as our language because we all knew it, reducing the need to ramp up. Since we chose JavaScript, we went with React for the frontend and Express for the backend, with Socket.io to glue the two parts together with real-time multiplayer communication. For ease of deployment, we chose a single-server architecture, with our Express backhand communicating to socket events and serving the React frontend as a static file. We used Heroku to host the app.

Challenges we ran into

Because we wanted to cultivate a very cozy user experience, the UI/UX of our application was our highest priority focus. While we had prior experience making website interfaces, this was our first time working on a website with a hybrid interface that was a blend between a traditional website and a game. In order to maintain the responsiveness of our website to different resolutions, while adhering to our vision for the ideal layout of the UI elements, we had to do a lot of fiddling with CSS and HTML hacks that required scouring the darkest depths of Stack Overflow.

Accomplishments that we're proud of

We're really proud of our minimalistic but stylish user interface and the cozy ambiance we set out to create. We think the color palette and UX give off comfy vibes to make the user happy. We also finished most of the features we wanted for our minimal viable product that demonstrates the vision we were going for.

What we learned

We learned a lot of neat tricks for making a website look pretty through CSS, as well as improved our React abilities to design functional components that are leaner. This was our first time using CSS animations to make the elements of our site more interesting to look at.

What's next for Study Bear

We want to increase the functionalities of our site and improve upon the UI design to enhance the user experience and promote more social usage. One major system we want to overhaul is the music system. We want to give the user the ability to choose what songs they want to listen to as well as control things like volume, looping, skipping, etc. We also want the music experience to be social among users in a room so they can all listen along together. There's also room for enhancement in the hover feature - users can hover other bears to see their name and what they're working on, but we can display more social info in here, like how long someone's been in the study room.