Colorstrike - Next.js | Shopify

Summary

This project is a new online store using Shopify's Storefront API and the Next.js framework. Unlike my previous e-commerce project that sold various shoe accessories, this store focuses on a single product related to a hobby I'm passionate about. This allowed me to concentrate on the website's look and feel. After planning the design, I started developing the cart functionality, aiming to replicate the seamless experience of Walmart's website. Originally, I wanted to begin accepting orders, but my passions lie in development and problem solving. Below is a detailed account of how I devloped the site, including my motivation, how I made the cart, the styling process, and what I hope to improve on this in the future.

Details

Motivation

After my first implementation of the Shopify Storefront API, I decided to make a better store with the knowledge I gained. I decided to go even simpler than shoe accessories and choose a single product in a hobby I am passionate about. This made things much easier and I could focus solely on the look and feel of the website.

I started by drawing some mockups of cart items, product cards, and product details. After I had a good idea about how I wanted the end product to look, I began searching for new frameworks to learn and libraries to use. I wanted to branch out to the latest technologies, so I chose Next.js.

Moving from React Redux to Next.js was a great choice. I spent way too long in Redux trying to organize states when I could have been focused on what the end-user was seeing. For example, if you wanted to add support for the Customers object in the Storefront API, then 4 files would have to be changed to accommodate that feature. Using Next.js, I have one file that exports functions that make requests. If there are any changes to the Storefront API, that is the only file that needs to be changed.

The Cart

Once that was complete I started working on what would take the longest time: the cart. I decided to copy the feel of Walmart's checkout. When using Walmart's site, users can add something to their cart and change its quantity using - and + icons. Any change in quantity is immediately reflected on the bag icon in the navbar and the product card. Then, when a user opens their cart, it loads for a second, then they can check out. Users can make changes to their cart at nearly every moment. It's a seamless experience that only takes time to load when the user looks at the cart page.

On my site, when the user adds an item to the cart, it stores the product's variant ID and the quantity in local storage. When the user opens their cart, it first checks if the user already has a unique cartID. If not, the items in local storage are added to a new cart and the new cartID is stored. If the user has a cart, it is retrieved and compared to local storage. If there are any differences, appropriate requests are made. After the cart is retrieved, it shows up! This definitely isn't what Walmart is doing, but it works and was easy to implement.

Styling

After the cart, I was ready to style everything. I decided to keep everything simple and stick to a golf-centered theme. To develop, I used TailwindCSS, which is recommended by Next.js. It provides pre-made CSS classes, which makes managing handfuls of CSS files and coordinating class names obsolete. It was confusing at first, but as I used it more, everything became easier. I found that I could rapidly iterate through different designs, which made development much faster.

Future Changes

Although the idea of launching the store and accepting orders sounds fun, I am much more passionate about the development process than running a business. I find myself thinking "Oh, I'll add this feature, THEN I'll work on the business stuff," but there are always things to add and update. For example, the next thing I considered adding is a notification icon to the cart to show users how many items have been added. Additionally, I need to do some more styling on the product details page, style the checkout (which can only be done through the Shopify Dashboard), add animations, add customer reviews, etc, etc. While I might make it sound like a chore, I enjoy the cycle of development. With a better product, I may find a way to get through the more businessy parts of running a business.