Kicks Kit - React Redux | Shopify

Summary

This was a class project for Software Engineering. The goal was to teach us how to work in an Agile software development team. Our team chose to create an e-commerce store selling office decorations. My focus was on the front end. I learned React Redux and Typescript to make a functional, user-friendly store. For our class final, we gave presentations, and I led a live demo of the site.

Details

This project started during my Software Engineering course in Fall 2022. I worked on a team of 5 and we were tasked with creating an ecommerce store that used a Javascript frontend and a .NET API. After the course ended, I wanted to take the project further and implement services offered by Firebase and Shopify.

When I began, I was focusd on the functionality of the site. I started by setting up Firebase hosting and authentication, then used the Shopify Storefront API to manage products and orders. After everything was functional, it was time to style and promote the site.

As I began styling the site, I found myself overwhelmed by the amount of choices I had to make. What was I selling? Who am I selling it too? What should I do similar to other websites? What should I do different? After some time, I figured it would be best to keep things simple and just sell shoes.

But this added a new challenge: How do I sell MY shoes?

I figured the answer was to make the buying process fun, so I focused the site around letting customers create kits for their kicks. I figured that by making a personalized approach, users would be more inclined to stay on the site. I began adding a kit builder to the home page that would let users select a shoe, laces, something to tie them with, and other accessories. However, development started to feel more like a chore at this point.

I quickly began to realize the difficulties of refactoring projects. The code from the original project was barely used at this point. I was constantly having to change entire pages because I wanted a slightly different flow or look. This is where I truly felt the dangers of scope creep.

I decided the best course of action was to start a new project with the stuff I learned. My new project is another e-commerce website focused on a single product, light up golf balls, which will keep the scope just narrow enough. I don't want to just do the same stuff and change the CSS, so I decided to learn Next.js for my new project.

Kicks Kit currently works with a mock checkout (see the GitHub README on how to use it). This project served as a good learning experience for the development lifecycle, API calls, and using 3rd party services. I hope to revisit this project someday because I think its a cool idea, but I want to work on a new project (opens in a new tab) that demonstrates cleaner, more maintainable code.