Coffii

Enjoy the ambiance of your favourite places, from the comfort of your home.

Comment

Team

We are team 34 on discord. Members are Kevin Liang, Conrad Fernandez, Aaron Chen and Owen Rocchi.

Inspiration

COVID-19 has devastated our global society like never before, but above all, the shutdowns have substantially lowered our productivity levels. People miss the ambiance of the hustle and bustle, and yearn for the surge in productivity while working from coffee shops and public places. We strived to recreate that feeling, so you could enjoy the ambiance of your favourite places from the comfort of your home - enjoying the best of both worlds, right at your fingertips.

What it does

Coffii is a web application that simulates the feeling of sitting inside your favourite coffee shops, restaurants, and public places. Search your favourite place to work from, then zone out and grind your work in its 360 degree live stream, and order your favourite drink/meal while you’re at it! Coffee chat and co-work at the virtual tables, network with like-minded netizens, and thrive just like the good old days! With the premium plan, users can also virtually travel to shops around the world, from the comfort of their home.

How I built it

We built Coffii using HTML/CSS and JavaScript, along with a Google Maps API.

Challenges I ran into

Our biggest challenge by far was optimizing our web layout for an intuitive design - spending hours of brainstorming, experimentation, and a bit of frustration - don’t worry, no keyboards were hurt :) Furthermore, we ran into some issues with the CSS and JavaScript, making sure the icons animated properly.

Accomplishments that I'm proud of

For all four of us, this was the most productive programming session we’ve ever done. Within two days, we tackled a dire need using a stimulating and user-friendly web application. Aside from our product, we were amazed by how much our diverse expertise backgrounds strengthened our productivity and team chemistry - we will definitely be competing at the next QHacks together :)

What I learned

Over the course of an intensive weekend, we learned how to optimize the user experience, while using JavaScript and CSS for the first time to animate our icon buttons. We learned more about frontend web development from QHacks than anywhere else.

What's next for Coffii

  • Enhancing the animations to further simulate an in-person environment
  • Incorporating elements of virtual reality to engage our users’ senses more
  • Adding pomodoro timer feature or timed productivity reminders to get a coffee, take a break, etc.

Domain.com Competition

Our domain name is coffii.space, because we will always need some space to enjoy a nice cup of hot coffee ;)

Built With

Share this project:

Updates