Coffee Ground

As part of INFO 340, I joined a team of four students to design and develop a responsive website called Coffee Ground—a web app that helps users find local Seattle coffee shops based on their location, preferences, and real-time operating hours. The goal was to create a tool that not only offered accurate information but also personalized recommendations based on user taste profiles (e.g., cold brew lovers, matcha fans, quiet-study seekers).

I took on the role of front-end developer and UI/UX designer, where I focused on bringing the user interface to life and ensuring a smooth, intuitive user experience. I helped shape the visual layout of the homepage, search results, and individual coffee shop pages, using semantic HTML, custom CSS, and React components to build a cohesive and accessible design. I also implemented dynamic rendering based on user inputs, conditional logic for filtering shop listings, and created reusable components for shop cards and modals.

Our team used Git and GitHub for version control and collaborated closely through weekly check-ins and peer code reviews. We also conducted light user testing to iterate on design and improve features such as the taste profile quiz and map integration.

One of the biggest challenges we overcame was designing a clean interface that could handle a variety of shop data (open hours, ratings, tags, etc.) while remaining readable and responsive across devices. By leveraging React’s component-based architecture and thoughtful CSS styling, we created a seamless experience that met both functional and aesthetic goals.

In the end, our team earned a 4.0 and I received positive feedback for my leadership on the front-end and attention to design detail. This project strengthened my ability to collaborate in a technical team, sharpened my front-end development skills, and deepened my understanding of how to design for real-world users.

(*This was one of my first biggest coding project I’ve ever done so please don’t judge harsh! >~<)