Crafting the Bobarista
Growing up, I watched my parents as they managed their own businesses — a restaurant and a beauty salon. This has inspired me to one day open up my own cafe, but in the meantime, I’m on a journey to becoming a web developer. I decided that if I can’t start my dream business now, perhaps I can start by crafting a website that will give me the foundation I need in the future.
So why the name, Bobarista? Back when I was in Orlando, there was a time where I worked at a boba tea shop. This was where I developed a passion for working in a cafe because I loved the social aspects of being in a cafe and connecting with others. Technically, my role was that of a barista, but since I was working with boba tea, I came up with the name, bobarista. So that’s how that started.
Currently, I’m in week 14 of my 16-week coding bootcamp and it’s project time so I began planning out the idea for the Bobarista website. The first important task was creating the menu which contained coffees and teas. I researched popular coffee shops I’ve been to such as Vespr Coffee in Orlando and La La Land in Dallas for inspiration. For teas, I referenced Gong Cha (one of my favorite boba shops) and my own experience from my time as a bobarista. Once the menu was created, it was time to get to work coding the menu page. Mobile responsiveness is a priority for my projects so this page features a single-column format when mobile and a double-column format when desktop-sized.
After tackling the menu page, it was time to move onto the shopping cart page. The key features I wanted on this page were a cart quantity, a cart total, and an individual product total (for multiple purchases of the same item). This part of the project definitely tested my understanding of how data is stored, moved, and manipulated.
Lastly, I needed to create a home page that was welcoming to the user. I chose an artsy coffee image for my banner that was eye-catching. For the navigation, I used icons that made sense to the user for where the links will go. Overall, I kept this page minimalistic and clean.
So far, this project has helped me understand things such as how data is stored, moved, and manipulated in Redux. I also have a better understanding of React components and styled components, and now I see their advantages. I learned that starting a project mobile-first made it easier for me to adjust the application for larger devices such as tablets and desktops. And most importantly, I learned that I love design, coffee, and tea.
There’s still so much more that can be added to make this project even better, and I can’t wait to see what other features I can add in the days to come. Till next time, my friends.
— Randy
