I started out on my React project with a few ideas in mind. I knew I wanted to create an art showroom with art created by DALL·E so after narrowing down my scope, I decided to not only use the required React and Redux to create my project, but also Tailwind and TypeScript.
I pushed a bit further and decided to use Jira to organize myself and Figma to map my flow and edit images, and because CSS is my least favorite part of programming, similar to my frontend project I decided to do it first.
Once the project was officially given out I researched up and coming 2023 colors and happened to find a picture I responded to:
From there I visited Canva to create my 4-pan color palette, while still having a few extras I liked left over:
That evening I set up my project, creating a base structure and installing everything I planned to use. The next morning on our first day of work I separated out all the aspects of the site into separate JIRA tickets. This helped me stay organized and cut down on the bevy of open browser windows I’m known for.
Although I created my navbar first from several different tutorials, I quickly discovered my fancy navbar did not play well with having a cart amount bubble attached to it. Not having a full tutorial for what I wanted to do became a blocker, so after creating my background image via DALL*E and struggling to have it visually appear on the front page as I needed, I started my search for a modern tailwind react e-commerce design while in the meantime creating all the art shown on the project page via DALL*E.
After finding a react tailwind tutorial that I liked (which unfortunately did not use Redux or TypeScript) I finally started heading towards having a design with pieces which worked well together.
Because the tutorial I'd chosen used Context and I was using Redux, I actually got my logic working far ahead of finishing the styling since I used state to hold my cart, data, product information, and whether my sidebar cart was open or not, and used dispatch to call for the data with the reducer functions to add/remove/clear, etc.
I also ended up being able to cut numerous "pages" after creating a Layout component, which held my header, sidebar, and footer and let me sandwich any applicable children content to create the “page” I needed.
Because I'd chosen to use TypeScript I also created interfaces I kept in the slice, and made sure all my functions were typed. Since I'm used to writing in C++, typing doesn't feel odd to me, however Typescript is different enough that it made it interesting.
Overall, I am extremely proud of my final product, and as the project prompt requested, it is "the prettiest application [ I ] have ever made".
Top comments (0)