In this project, I connected my front-end to This API. I created a generic home and about page, then I have a store page that fetches product data (price, images, descriptions) from the API. When you click on the actual products, it takes you to a detail page that gives you more data about the product with the ability to add multiple products to your cart. You can add products to your cart, which updates the count in the top right corner. Then when you access your cart you can see everything that you added to your cart with the total of each product and the total for the whole cart at the bottom. Once you click "Checkout" it reloads you to the homepage and makes it as if you never visited the site before.
I used ReactJS because it is a popular and in-demand front-end javascript library, and react-router-dom to navigate multiple routes. I used the Fetch API because it is well documented and makes it simple to use and interact with APIs.
One of the more difficult challenges with this project was figuring out state management. Making the cart count update when products were added especially when multiples of the same product were added was difficult to understand but, I figured it out in the end.
- Learn how to connect a React app to a public api
- Learn how to use React-Router-Dom for page navigation
- State Management
- Clone the project and save it in some directory
- Run
npm installto install all of the neccessary packages - Run
npm run startand it should start working just fine