This project was our first, major React project at Digital Crafts. Peter Piper's comes from my personal love of pickleball. I wanted to make a not-so-serious storefront for the sport. The store features weird themed paddles, balls, and gear. A user can click on a product card and is directed to the product page to see more information about the item. From there, they can add the item to a shopping cart and continue shopping or checkout. Images for the site were generated using the OpenAI tool, DALL-E 2 - it came up with some crazy stuff.
This was a solo project. I began this project like most by mocking up the general page layouts in Adobe Illustrator. Alongside the layouts I created a simple brand with colors and fonts. Skeletons for pages and partials were built next. I then created the database of products in the Redux store so I could see information pass from one page to another. The products were first displayed in cards with basic information. Then, with state, I could pass the item to the product page and display the full item information. The shopping cart stores the item information in state and the customer can view the cart page with all of their selected items. To finish the site I used the brand guide and CSS to bring everything together.
Mock ups of the shop and product page
Illustration for 404 page
