Amazon clone using React.js, Firebase, Stripe, Material UI, React Router DOM, React Context API 🚀
Built an amazon clone using React.js and firebase. I have developed this project with the help of clever programmer youtube channel.
React.js allows you to write JSX (Javascript XML) code which is similar to HTML syntax but not HTML, it’s just Javascript. It enables us to develop component-based applications and hence we can reuse the component anywhere in that project. These applications are SPA’s (Single Page Applications) and React internally uses Virtual DOM to make the rendering faster.
React Router DOM allows you to route/move to another page. They are like anchor tags in HTML but with the difference that they do not reload the page when the user moves to another page.
React Context API allow you to pass the data from a parent component to a child component more efficiently. Generally, we use props to pass data from parent to child component. But for large-scale applications, if we use the props approach we have to pass data through every other component in its hierarchy to reach the child component(i.e, Prop Drilling).To avoid Prop Drilling we use context API which allows us to send the data without passing it through every other component.
Material UI has pre-built designs for buttons, menus, grid systems which makes your work easy and faster.
Firebase allows you to develop high-quality apps. It has many services that are hosted on the cloud-like DB storage, Hosting, Authentication, Analytics, etc. And would scale as the application grows.
Stripe allows you to integrate payment services like payment using debit/credit card etc. In this project along with the stripe plugin, I have used react-stripe-js which makes your work easier.
Axios allows you to make HTTP requests using Promise API. Unlike fetch it transforms the data into JSON data.
This project includes the Home page, Auth page, Cart page, Orders page, Checkout page, and Payment page.
I have integrated stripe as a payment gateway and implemented a dummy payment process.
It has an “ add to cart “ functionality on the checkout page where you can add or remove products. Also, the order page which shows you the orders.
There were a couple of challenges that I faced during this project.
One of them being Integrating firebase in my project and implementing the authentication functionality.
The other challenge was to integrate stripe payment in the amazon clone app. Which was very well explained by Clever Programmer. I had some bugs which I solved using stack overflow and with the help of google.
Now Let’s Talk About React Context
What is React Context API?
Context provides a way to pass data through the component tree without having to pass props down manually at every level.
i. Creating Context:
createContext()
Creates a Context object. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching Provider above it in the tree.
useStateValue() **
Use state value will be used to access the state inside the component
** Refer to last image and description for details
ii. Context Provider:
<StateContext.Provider value={useReducer(reducer, initialState)}>{children}</StateContext.Provider />
Context Provider has a value which takes in reducer and initialState and allows the childrens to access initialState and trigger an action and send it to reducer.
iii.
<StateProvider initialState={initialState} reducer={reducer}><App /></StateProvider>
In index.js we import StateProvider and wrap the app component within it thereby allowing every component inside <App /> component to access state and fire actions to the reducer.
iv. Reducer has different actions and depending on actions we perform some tasks. Let’s look at ADD_TO_BASKET action.
v. useStateValue()
const [{ basket }, dispatch] = useStateValue();
To access the state inside of a component we use useStateValue().**
On click of button we dispatch addToBaket action with the clicked element details like id, title, image to the reducer and update the state and display it in cart page.
Now let’s talk about React Router
What is Routing?
It is the process of resource navigation in a web app. This is how your app determines what to do with a client request.
What is React Router?
A tool that allows you to handle routes in a web app, using dynamic routing. It provides different routing components according to the needs of the application and platform.
The command to install react-router is, use sudo before the command if you are using Linux or Mac.
npm install react-router-dom
We import BrowserRouter as Router(this is an alias), and Switch and Route from “react-router-dom”.
We will wrap all the components in Router. And wrap all the Route inside of Switch.
The job of Switch looks through all the <Route> and renders the first which matches the current URL.
Notice that in the above code the last <Route> has a path of “/”.If we place this Route at the top of all Routes then it will render the matching URL along with the Route of path=”/”.
The solution is to put either the path=”/” at the bottom of all the Routes or there is a property called “exact=true” which only renders the Route when the URL has only a “/”. ex: amazon.com/ (This will only render path=”/”) and it will not display that path in a different URL.
In React if we have a property that has an attribute set to true we can simplify it by just typing the property name “exact”.
What’s the <Link></Link> ?
The <Link> tag renders matching <Route> when you click on them.
Behind the scenes, a <Link> renders an <a> with a real href, so people using the keyboard for navigation or screen readers will still be able to use this app.
Plugins used
@material-ui/core
@material-ui/icons
@stripe/stripe-js
@stripe/react-stripe-js
axios
firebase
react-currency-format
react-router-dom
moment
Animation Plugins
framer-motion
react-flip-move
