Jason OmemuFrontend Engineer
Go back to top

Crown Clothing Inc.

Crown CLothing Inc. is a fictional company used by Andrei Neagoie and Yihua Zhang in their ZTM course - Complete React Developer in 2020.

Project Stack

React
Sass
Firebase
Stripe
Redux
Express.js
Netlify
Styled components logo.Styled Components
Screenshot of part of the Crown Clothing app homepage.

Why I chose the stack I used

The course covers everything state management from hooks, context api, graphql, and more. After spending time with each one, I decided to leave the ones I felt most comfortable with in the codebase - like a get-together of state management tools of some sort. I used redux, without sagas, context api and hooks. Some functionality, like signing in the user if it's the same visitor to the app, would be most efficiently handled with a lifecycle method. So a class-based component was used for this.

Problems I ran into.

The client code of this project was separated into a different folder with the server at the root. So for a little while I had trouble setting up the build command on netlify. Again, I had to figure out how to handle react routing on production but for netlify this time. I found an article here that helped with this. I needed a netlify.toml file as explained in the netlify docs as well.

Full-page screenshot of the shop page of the crown clothing web app.
Screenshot of cart items on a mobile screen. A brown brim, a blue beanie and a brown shearling have been added to the cart.Screenshot of the checkout page.

What I learned and plan to add

This project helped me learn a lot of state management tools that can be used with react. I, more importantly, learned when each would be more useful than the other as with all programming tools really.

To make the project a little less generic, I styled it my own way, brought in a little color scheme and separated the sign in and sign up pages. I also worked a lot on the app's accessibility and plan to add a few more features and improvements like a means for the user to see a record of everything they've 'ordered' on the app to further improve the project's semblance to something in the real world and improve the contact page's content.