Coffee Brothers

I'm a big fan of coffee, so I thought it was only right to build out an e-commerce store that sells Coffee! The main objectives for this project were to focus more on design using vanilla CSS. I really wanted to get a better handle on layouts, animations, and building out interactive user components. Additionally, I wanted to include a legitimate checkout solution, so I connected to the Stripe API.

Type

Full-Stack

Dynamic

Stripe API

Stack

Angular

Node.JS

Stripe API

Vanilla CSS

RxJS

Source Code

Github

Project Goal and Purpose

I intended to treat this project as if I were working for a real client. Keeping track of user stories, implementing sprints, and reworking the design to accommodate potential client changes were a few of the methods that I adopted while building this website.

Angular

Angular

Node.JS

Node.JS

Stripe

Stripe

Web Stack Choices

I chose Angular for the ease of implementing the cart system. RxJS worked very well in maintaining the state of the cart as the user interacts with the site, enabling features such as adding, removing, updating quantity, and checking out.

Apart from the cart, the other concern was maintaining a server that would be able to connect the user to the Stripe checkout. I went with Node.js for the ease of using JavaScript, and to quickly set up a server that could be up and running within minutes. This approach ended up working well, and the overall design of the project went pretty smoothly.

Problems and Thoughts

Coming from a Java/Spring background of implementing REST APIs, this time around, I needed to change that up and learn more about Node.js. Initially, I needed to do some more research to get the right syntax going and to understand how to package everything correctly in the package.json file.

The coffee slide animation on the home page was also a big undertaking that I initially did not think would take so long to figure out. I knew I wanted to build it from scratch to really understand the inner workings a bit more. As a result, this functionality took longer than expected, but ultimately, it proved to be a great learning experience. Finally seeing it work provided a great feeling of victory.

Lessons Learned

Getting experience with the Stripe API was a good lesson for me. I ended up spending some time going through their documentation, created an account, and implemented their free API test keys. This payment process makes for a great user experience, while the API keeps the development implementation friendly.

Furthermore, this project strengthened my working knowledge of CSS as I delved deeper into grid layouts, flex layouts, and positioned layout. I gained a better understanding of in-flow and out-of-flow elements, as well as creating responsive layouts in a more concise and scalable manner. This was an important learning experience for me.