Website: https://tyler-pruitt.github.io/cafedotcalm/
It's been a while since we've been able to sit at a pleasant little coffee shop and study, relax, chill with friends and strangers. Though we have technologies like Facetime and text, there's something different about sitting at the table across from a stranger or the warm atmosphere of a public space. We wanted to help generate that feeling of community comfort by building a virtual café.
Our web app creates a virtual space that anyone can join. It has a video player to sync everyone to a shared soundtrack of calm, chill, café beats, but anyone can add comments and add music to the queue. It's a simple and easy way to quickly interact with others around the globe, with the same calming vibe of a morning at the coffee shop.
Using HTML, CSS, and JavaScript, we created a simple and clean web interface for users to interact with. The video player (at least for now) depends on YouTube to run. We used Firebase to store the video queue shared between all users.
One of the greatest challenge we ran into was syncing the videos to each user in real time. We integrated another aspect of the project by adding in Firebase to store our data. Without a whole lot of experience in web development, this project was definitely a learning opportunity for every one of us.
Successfully having videos play simultaneously for different users was a huge accomplishment for us. On the technical side, we were working with technologies that we had never worked with before, so we were learning as we went. But more importantly, the feeling of community in having one quick change be reflected across all of our screens only solidified our vision that this app could be a huge source of comfort in such an isolating time.
Many of us had little to no experience in front-end technology. Through this project, we had a great first experience in HTML, CSS, and JavaScript. We also learned a thing or two about domain names. :)
The ultimate vision is to have as many café functionalities, turned virtual, as possible. For example, simulating walking across the shop to your friend's table, glancing over to see what your neighbor is doing (studying bio! reading the newspaper!), or making quick personal small talk with the barista. We would love to implement far more graphical elements, such as personal avatars or a clickable clock or radio, almost like a game or virtual reality. All to make the experience as immersive and true to life as possible.
JavaScript, Firebase, HTML, CSS