Ever since the start of the pandemic, I've missed going to my local coffee shops for some great coffee. Additionally, I can only imagine how difficult it is for the local coffee shops to stay in business with fewer people out on the street while competing with the larger coffee chains. In addition to this, a scary headline I read about coffee running out soon due to the climate crisis has also sat at the back of my mind for the longest time. From these three ideas, Coffee Corner was created to help local coffee shops engage with the community while supporting climate change initiatives.

What it does

Coffee Corner is a website that provides a 'one-stop shop' for customers to engage with local coffee shops and vice versa. It provides a place for coffee shops to promote and sell their products on an easy-to-navigate website. Coffee Corner also aims to support local coffee chains and donate 1$ from every purchase to climate change initiatives to ensure coffee sticks around in the long run.

How we built it

Coffee Corner was built using HTML, CSS, JavaScript, and Bootstrap all in Visual Studio Code. The website also includes a Google map which was accessed using a Google Maps API.

Challenges we ran into

A challenge I faced when completing this project was formating all the items I wanted into a coherent flow. I also wanted a nice color theme for the website and finding one that reflected the design I was aiming for took some time. Getting all the interactions to behave as I wanted them with JavaScript was another element I took time on and implementing the Google API was definitely challenging at first as it was new to me.

Accomplishments that we're proud of

I'm really proud of the look and feel of the website. I liked that I made it my own and was able to structure everything to the best of my ability while ensuring all the interactions stayed in their proper place. I like that it provides a platform that local coffee shops can use to showcase their products and locals can leave reviews so everyone is engaged and supported within the coffee community.

What we learned

I learned how to implement the Google Maps API and have it mark down locations on the map and display it on the website. I was able to touch up and clean up my front-end development skills via HTML, CSS, and JavaScript. I also was able to implement design thinking with structure and hierarchy to display all the items I wanted in a coherent and user-friendly manner.

What's next for Coffee Corner

Now that I have the front-end design of the web platform, I want to be able to implement more interactions for the user so that they can navigate through more areas of the website, like the shopping cart and the profile. I also want to be able to allow the user to subscribe and get emails on occasion about special offers and deals that Coffee Corner is helping to promote.

Share this project: