Johanne is a fictional e-commerce store related to swimwear. I build this project to enhace my skills with React and Redux. The ultimate goal was to provide an intuitive interface and the experience of a real e-commerce website. I was able to utilize Redux Toolkit to take care of the products and cart state. Also, used tailwindcss and MUI to style the website. It is responsive accross all devices.
- My biggest challenge was to integrate Stripe for checkout. My first attempt was to build a server to connect the store to stripe but I did not have much knowledge on how the backend works, I decided to use the client side alternative. By watching this tutorial Youtube link and reading Stripe documentation I was able to add it to my project.
- Another problem I faced was with React Router. I was very much unaware that React-Router 'only' provides client-side routing which means my app updates the URL without making a request for another document from the server and whenever I refreshed my pages with exception of the homepage, the website would crash. To fix this issue I provided vercel with the code below.
{
"rewrites": [{"source": "/(.*)", "destination": "/"}]
}I am still working on this project UI and learning more about Redux Persist to be store the product data in the localStorage. Also, studying Nodejs and MongoDB to make this project a fullstack.
The project is currently being hosted on Vercel