Cafe Connections

• 

  Home Page

• 

• 

Inspiration🍞

As a rising high school senior, I know the struggles of many students overwhelmed with stress as well as trying to connect with others to find jobs or internship opportunities, or some just struggle with dealing with mental health in general. The aesthetic and cozy environment of Korean cafes inspired Cafe Connections in order to provide a comforting virtual hangout for students and anyone who needs an escape from reality or a friend to study with.

What it does

Cafe Connections allows people to join Cafe Rooms where they can "brew up" new relationships with others that join the room. Within each room, there is a chat function to engage in conversations, a timer, a music player, and a to-do list where users can write down tasks and check the checkboxes when completed.

How we built it

The designs, wireframes, and prototype screens were created using Figma and Adobe Illustrator. After these components were completed, an attempt was made with Visual Studio Code to use HTML and CSS into bringing the prototypes into a functional website.

Challenges and What I learned

This was my first time learning and coding with HTML and CSS so I struggled a lot with coding the website and ran out of time to complete it. I often was scavenging my code for that single error that caused my entire page to not show up. I also learned how to use Github better and create repositories for my files. Furthermore, I didn't have that much experience with designing a website layout user interface, so this was a completely different experience from mobile interfaces.

Accomplishments

I'm proud of being able to design and prototype using Figma in such a short amount of time! It was such a learning experience, especially attempting to bring my prototype to life by researching and attending workshops to help me learn as much as I could with HTML and CSS.

What's next for Cafe Connections☕

I definitely want to continue improving and working on coding the prototypes into a functional website and embed functional features such as listening to music, checkboxes for the to-do list, and the chat function with other people.

Built With

• css
• figma
• html