Audiophile eCommerce Website

The goal of this project is to build a platform which allow users to view different audio related products. There are three categories of items: headphones, earphones, and speakers. Each category is to have a certain amount of products, with the newest ones on top. When working on this project, my goals were to have a clean layout for the user, make sure nothing seemed murky for the user and take them through a successful journey from the moment they get on the site to the moment they checkout.

Tools Used To Build

1. Gatsby JS

2. Sanity Content Management System

3. Styled Components

Building Process

Having had my goals in place, my tools ready, it was time to settle down and actually make my goals a reality. One additional goal I had was to complete this project within 30 days of coding. Although 30 calendar days would have been perfect, I knew that was not totally feasible. Alright, so all goals in place, all tools ready to go, coding time started. When doing projects which has data and not just an interface, I tend to look at how I can clean up my data. So, my first few days were geared toward building a place to hold my data. While this specific part would not directly impact the user's experience, I know a proper backend meant my life as the developer easier. Once that was ready to go, I spent a few days building the interface with some default data and a default look before introducing the actual real data to it. Finally, interface and data were all together and all that was left was to do a bit of cleanup and submit.

Challenges

Previously, I outlined my process but none of the real challenges. Outside of keeping up with the timeline I set for myself, the biggest challenged I faced was to not think as a developer while coding, but to think as a user. My constant question was "what would I want to see if I was navigating this site to look for products?". Every new piece of the site I built, I had to answer that question. While this was a challenge to start with, it helped me with keeping the user in mind every step of the way. One of the more technical challenges I faced was to make sure if the user add a product to their cart, they still had the ability to update that item while it's in the cart. This took me a couple of attempts to figure it out but ultimately I did. My non technical answer for figuring this out is: "create a shadow copy of the cart and make sure the shadow copy updates affect the original copy".

Final Thoughts

I can go on and on about how much I did during this project, what helped me, what hurts me, etc. but my final thoughts are this project was extremely challenging and attempting to complete it with a timeline made it that much harder. At the end of the day, I was able to complete it in the amount of time I set, while overcoming all of the challenges listed above and some unmentioned ones. I think these sorts of projects definitely help me understand what it takes to build something at a grander scale. One big highlight with this project is scalability. I can have as many products as needed and the interface would not be impacted and neither would the user's possible actions.