Kierans Coffee Collection

With Kieran's Coffee Collection I wanted to build a modern e-commerce store that would satisfy the needs of this business to move online and sell their products. It would need to be fast as to not lose customers through the process and be responsive on all screen sizes. This will ensure the largest possible reach allowing the company to sell as much as possible.

In order to accomplish several key features would be required from launch. First of all there would need to be a storefront where products could easily be added and removed. Secondly a persistent cart is required to hold the users products until their ready to make the purchase. Finally there would need to be a checkout process and payment system in place to allow the user to complete checkout successfully.

The primary focus of the stack was to allow for building a fast, serverless application that would be up and running quickly so the company could begin selling products. By going the serverless route we get the benefits of running the site on a lightning fast Content Delivery Network while still being able to communicate with our backend API's and have a dynamic site. This is important because we need communicate with a back-end that is responsible for handling user authentication and accounts.

To keep focus on the front-end and the companies requirements I decided on Auth0 for user authentication because there is no need to re-invent the wheel. Hasura provides instant graphql API's to setup our user database quickly.

In order to be able to hand off the project to a potential client I decided to use GraphCMS to store the company's products so they could easily control their own products without needing to write code.

Arguably the most important part of the project is payment and so the choice was to integrate a leading and reliable payment processor called Stripe. There was no need to attempt to code a potential security risk like this and sticking to the tried and trusted API's provided by Stripe is the best option.

Finally I decided to go with Chakra UI as my component library in order to bootstrap a modern and accessible user interface with speed. They have a lot of pre-built components that would be perfect for an e-commerce site.

Overall I am extremely pleased with the outcome of the project. I believe it meets the criteria of providing the company with an online outlet for their products. Users can control their carts, create and manage accounts and complete the checkout process with payments.

The next feature I would like to add is a search feature that would allow users to query for different products or categories. Although not required at launch due to there not being many products, as the store grows it could be necessary to help filter the list of products.

Personally I learned a lot during the building of this project. It was the first time I had integrated payments into an application which will benefit me in future projects. Something I could have done better is the design. Although It looks modern and simple I believe I could have done more with the home page to make it pop by first designing it using a tool like Figma.