01. Panther City Leather

project preview

Overview

A custom leather goods ecommerce site built with ReactJS, Commerce.js, and hosted on Netlify.

Process

This is the first full site I built with ReactJS. The learning curve was steep but by the end of the project, I felt very comfortable using components, managing state/context, and implementing React hooks.

The client wanted the site to look similar to another ecommerce site so there was no heavy lifting involved on the design.

The hardest part of this project was integrating the front-end with the Commerce.js API where all of the products and shipping info are stored. This required a good amount of planning and thought about user flow and API request timing.

The checkout form in particular tested my ability to handle errors. I ended up using Formik to handle most of the validation but there were some custom validation hooks required as well.

On the front-end, I wrote custom scss for all of the components to make the site responsive and cross-browser supported.

Though there is much to improve upon in the structure and testing of the code, I learned more in this project than any other I had previously built and am proud that my code is being used to support a small business.

© Josiah Brown 2024