/bobarista

Primary LanguageJavaScript

I have a dream to one day open up my own cafe one day, and that dream inspired me to create a website for coffee and tea lovers. I named it the Bobarista because when I was working at a boba tea shop, I came up with that name since I was technically a barista who worked with boba tea.

The main technologies used in this projected were React, Redux, and styled components. I gained a better understanding of how components worked and how props are passed, and it definitely gave me a better appreciation of these technologies.

Website link: https://randychong.github.io/bobarista

Medium Article: https://randychong27.medium.com/crafting-the-bobarista-b12e04b5f153

. . .

cafe-home-full

-Home Page-

Making my applications mobile responsive was one of my main priorities since I understand a majority of users will be viewing my apps on their phones. Also, developing mobile first made media queries easier going from mobile to desktop.

Adding icons for the navbar made the user's mobile experience more efficient, and I even added some button effects to give the app alittle life when they are clicked.

. . .

cafe-app-menu-3

-Menu Page-

The menu items were inspired from coffee shops that I've visited and from my experience as a 'bobarista'. It was crucial that I found high quality photos that did not have too much noise that would take away from the actual product itself.

. . .

cafe-cart-double-column

-Cart Page-

For the cart, it was important that I displayed the total number of items in the cart along with the total value. Also, adding an image for when the cart is empty helped give it some life even when no products have been added yet.

. . .

Overall, it was a very enjoyable working on this project. I understood better how React components can pass data which can manipulate state in the Redux store, and I also gained an appreciation for styled components after seeing how much code it saved by creating reusable components that can be edited through props.