Building a demo E-commerce application using React.js
Most often we try to master the concepts we learn by building an application that will cover most of the scenarios required to build a real-world application and to showcase it in our profile.
E-commerce is one domain that we can relate to easily as we have used many e-commerce applications and have an overview of how it works.
Also, I feel building an e-commerce application is kind of exciting as we are surrounded by online selling these days.
But the problem for frontend developers is to explore building e-commerce they need APIs to make it look like a real app if the not complete real application.
While exploring options to build an e-commerce application without investing my time on APIs I came across https://fakestoreapi.com/ where you can find all the fake API required to build an E-commerce app.
By using this I have built a basic e-commerce app using react.js which I would like to share hoping it would help others who want to build a demo e-commerce application for practice or to add it to their profile. The demo application has been hosted on GitHub. (https://suhas86.github.io/react-ecomm-sample/)
A brief overview of how the application is built
The web application is built on the latest version of react.js and styling is done using material-ui.
I have used https://fakestoreapi.com/ to fetch a list of products and a single product
The cart is built using the React context and it is not connected to any API so the data we see in the cart is cached data and will be deleted when we reload the page. If you are new to react context you can find my article on react context here
For making API calls I have used Axios and a custom hook to make API calls which will help us reduce the effort in making calls inside our component.
The checkout page is a dummy page built using Material-UI stepper and useReducer hook to manage the state on the main component. Validations have not been handled in this application.
The entire code of this application can be found in GitHub and a live link here
Hope this helps you in some way building a sample e-commerce application.
Happy Coding!!! Cheers !!!
