Introduction
Welcome to our comprehensive guide on creating an E-Commerce application using React. Today We’ll be creating a Simple interactive Dynamic Website Using ReactJS. ReactJs is a JavaScript Framework made by Facebook. We will be working with Class Based Components in this application and use the React-Bootstrap module to style the components. You’ll acquire the knowledge of Hooks in ReactJS.
Preview Of Ecommerce Application
PreRequistics
- Basic Knowledge of HTML
- Basic Knowledge of CSS
- Basic Knowledge of JS including ReactJS Concepts.
50+ Interesting React JS Project ideas With Source Code from Beginner and Intermediate-level
Set Up The Environment
Let’s create a new React application using the create-react-app CLI tool:
Copy the following command and run it in your CMD
$ npx create-react-app react-Ecommerce
$ cd react-Ecommerce
$ npm install --save [email protected] [email protected]
$ npm start
This will gonna create the react-Ecommerce application in your desired file folder and Now open in your Favourite Code editor e.g. Vs Code. You’ll see the output on the browser like below:-
Steps to Create a E-commerce Application
Open your favorite Code editor and create the file and folder structure like below. Your Folder Structure should be look like this:-
Inside the Components Folder Create the Below files:-
Footer.jsx
This File will create the Footer part of our Ecommerce website. You can further customized as per your choice.
import React from "react";
const Footer = () => {
return (
<>
<footer className="mb-0 text-center">
<div className="d-flex align-items-center justify-content-center pb-5">
<div className="col-md-6">
<p className="mb-3 mb-md-0">Made with ❤️ by {" "}
<a href="https://sahibsingh.dev" className="text-decoration-underline text-dark fs-5" target="_blank" rel="noreferrer">Sahib Singh</a>
</p>
<a className="text-dark fs-4" href="https://github.com/ssahibsingh" target="_blank" rel="noreferrer">
<i className="fa fa-github"></i>
</a>
</div>
</div>
</footer>
</>
);
};
export default Footer;
Index.js
export { default as Navbar } from './Navbar';
export { default as Main } from './main';
export { default as Product } from './Products';
export { default as Footer } from './Footer';main.jsx
import React from "react";
const Home = () => {
return (
<>
<div className="hero border-1 pb-3">
<div className="card bg-dark text-white border-0 mx-3">
<img
className="card-img img-fluid"
src="./assets/main.png.jpg"
alt="Card"
height={500}
/>
<div className="card-img-overlay d-flex align-items-center">
<div className="container">
<h5 className="card-title fs-1 text fw-lighter">New Season Arrivals</h5>
<p className="card-text fs-5 d-none d-sm-block ">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
</div>
</div>
</div>
</>
);
};
export default Home;
Navbar.jsx
This Component is useful in creating the Navbar for e-commerce websites. We’ve used the <NavLink> tag in ReactJs for routing the Register, Login and Cart page.
import React from 'react'
import { NavLink } from 'react-router-dom'
import { useSelector } from 'react-redux'
const Navbar = () => {
const state = useSelector(state => state.handleCart)
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light py-3 sticky-top">
<div className="container">
<NavLink className="navbar-brand fw-bold fs-4 px-2" to="/"> React Ecommerce</NavLink>
<button className="navbar-toggler mx-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav m-auto my-2 text-center">
<li className="nav-item">
<NavLink className="nav-link" to="/">Home </NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/product">Products</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/about">About</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/contact">Contact</NavLink>
</li>
</ul>
<div className="buttons text-center">
<NavLink to="/login" className="btn btn-outline-dark m-2"><i className="fa fa-sign-in-alt mr-1"></i> Login</NavLink>
<NavLink to="/register" className="btn btn-outline-dark m-2"><i className="fa fa-user-plus mr-1"></i> Register</NavLink>
<NavLink to="/cart" className="btn btn-outline-dark m-2"><i className="fa fa-cart-shopping mr-1"></i> Cart ({state.length}) </NavLink>
</div>
</div>
</div>
</nav>
)
}
export default NavbarProducts.jsx
The below Component will render the Products list on our E-Commerce Website.
import React, { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import { addCart } from "../redux/action";
import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import { Link } from "react-router-dom";
const Products = () => {
const [data, setData] = useState([]);
const [filter, setFilter] = useState(data);
const [loading, setLoading] = useState(false);
let componentMounted = true;
const dispatch = useDispatch();
const addProduct = (product) => {
dispatch(addCart(product))
}
useEffect(() => {
const getProducts = async () => {
setLoading(true);
const response = await fetch("https://fakestoreapi.com/products/");
if (componentMounted) {
setData(await response.clone().json());
setFilter(await response.json());
setLoading(false);
}
return () => {
componentMounted = false;
};
};
getProducts();
}, []);
const Loading = () => {
return (
<>
<div className="col-12 py-5 text-center">
<Skeleton height={40} width={560} />
</div>
<div className="col-md-4 col-sm-6 col-xs-8 col-12 mb-4">
<Skeleton height={592} />
</div>
<div className="col-md-4 col-sm-6 col-xs-8 col-12 mb-4">
<Skeleton height={592} />
</div>
<div className="col-md-4 col-sm-6 col-xs-8 col-12 mb-4">
<Skeleton height={592} />
</div>
<div className="col-md-4 col-sm-6 col-xs-8 col-12 mb-4">
<Skeleton height={592} />
</div>
<div className="col-md-4 col-sm-6 col-xs-8 col-12 mb-4">
<Skeleton height={592} />
</div>
<div className="col-md-4 col-sm-6 col-xs-8 col-12 mb-4">
<Skeleton height={592} />
</div>
</>
);
};
const filterProduct = (cat) => {
const updatedList = data.filter((item) => item.category === cat);
setFilter(updatedList);
}
const ShowProducts = () => {
return (
<>
<div className="buttons text-center py-5">
<button className="btn btn-outline-dark btn-sm m-2" onClick={() => setFilter(data)}>All</button>
<button className="btn btn-outline-dark btn-sm m-2" onClick={() => filterProduct("men's clothing")}>Men's Clothing</button>
<button className="btn btn-outline-dark btn-sm m-2" onClick={() => filterProduct("women's clothing")}>
Women's Clothing
</button>
<button className="btn btn-outline-dark btn-sm m-2" onClick={() => filterProduct("jewelery")}>Jewelery</button>
<button className="btn btn-outline-dark btn-sm m-2" onClick={() => filterProduct("electronics")}>Electronics</button>
</div>
{filter.map((product) => {
return (
<div id={product.id} key={product.id} className="col-md-4 col-sm-6 col-xs-8 col-12 mb-4">
<div className="card text-center h-100" key={product.id}>
<img
className="card-img-top p-3"
src={product.image}
alt="Card"
height={300}
/>
<div className="card-body">
<h5 className="card-title">
{product.title.substring(0, 12)}...
</h5>
<p className="card-text">
{product.description.substring(0, 90)}...
</p>
</div>
<ul className="list-group list-group-flush">
<li className="list-group-item lead">$ {product.price}</li>
{/* <li className="list-group-item">Dapibus ac facilisis in</li>
<li className="list-group-item">Vestibulum at eros</li> */}
</ul>
<div className="card-body">
<Link to={"/product/" + product.id} className="btn btn-dark m-1">
Buy Now
</Link>
<button className="btn btn-dark m-1" onClick={() => addProduct(product)}>
Add to Cart
</button>
</div>
</div>
</div>
);
})}
</>
);
};
return (
<>
<div className="container my-3 py-3">
<div className="row">
<div className="col-12">
<h2 className="display-5 text-center">Latest Products</h2>
<hr />
</div>
</div>
<div className="row justify-content-center">
{loading ? <Loading /> : <ShowProducts />}
</div>
</div>
</>
);
};
export default Products;
Your Pages Folder should look like this :-
AboutPage.jsx
import React from 'react'
import { Footer, Navbar } from "../components";
const AboutPage = () => {
return (
<>
<Navbar />
<div className="container my-3 py-3">
<h1 className="text-center">About Us</h1>
<hr />
<p className="lead text-center">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum
facere doloremque veritatis odit similique sequi. Odit amet fuga nam
quam quasi facilis sed doloremque saepe sint perspiciatis explicabo
totam vero quas provident ipsam, veritatis nostrum velit quos
recusandae est mollitia esse fugit dolore laudantium. Ex vel explicabo
earum unde eligendi autem praesentium, doloremque distinctio nesciunt
porro tempore quis eaque labore voluptatibus ea necessitatibus
exercitationem tempora molestias. Ad consequuntur veniam sequi ullam
tempore vel tenetur soluta dolore sunt maxime aliquam corporis est,
quo saepe dolorem optio minus sint nemo totam dolorum! Reprehenderit
delectus expedita a alias nam recusandae illo debitis repellat libero,
quasi explicabo molestiae saepe, dolorem tempore itaque eveniet quam
dignissimos blanditiis excepturi harum numquam vel nihil? Ipsum
</p>
<h2 className="text-center py-4">Our Products</h2>
<div className="row">
<div className="col-md-3 col-sm-6 mb-3 px-3">
<div className="card h-100">
<img className="card-img-top img-fluid" src="https://images.pexels.com/photos/298863/pexels-photo-298863.jpeg?auto=compress&cs=tinysrgb&w=600" alt="" height={160} />
<div className="card-body">
<h5 className="card-title text-center">Mens's Clothing</h5>
</div>
</div>
</div>
<div className="col-md-3 col-sm-6 mb-3 px-3">
<div className="card h-100">
<img className="card-img-top img-fluid" src="https://images.pexels.com/photos/7679720/pexels-photo-7679720.jpeg?auto=compress&cs=tinysrgb&w=600" alt="" height={160} />
<div className="card-body">
<h5 className="card-title text-center">Women's Clothing</h5>
</div>
</div>
</div>
<div className="col-md-3 col-sm-6 mb-3 px-3">
<div className="card h-100">
<img className="card-img-top img-fluid" src="https://images.pexels.com/photos/1927259/pexels-photo-1927259.jpeg?auto=compress&cs=tinysrgb&w=600" alt="" height={160} />
<div className="card-body">
<h5 className="card-title text-center">Jewelery</h5>
</div>
</div>
</div>
<div className="col-md-3 col-sm-6 mb-3 px-3">
<div className="card h-100">
<img className="card-img-top img-fluid" src="https://images.pexels.com/photos/356056/pexels-photo-356056.jpeg?auto=compress&cs=tinysrgb&w=600" alt="" height={160} />
<div className="card-body">
<h5 className="card-title text-center">Electronics</h5>
</div>
</div>
</div>
</div>
</div>
<Footer />
</>
)
}
export default AboutPageCart.jsx
import React from "react";
import { Footer, Navbar } from "../components";
import { useSelector, useDispatch } from "react-redux";
import { addCart, delCart } from "../redux/action";
import { Link } from "react-router-dom";
const Cart = () => {
const state = useSelector((state) => state.handleCart);
const dispatch = useDispatch();
const EmptyCart = () => {
return (
<div className="container">
<div className="row">
<div className="col-md-12 py-5 bg-light text-center">
<h4 className="p-3 display-5">Your Cart is Empty</h4>
<Link to="/" className="btn btn-outline-dark mx-4">
<i className="fa fa-arrow-left"></i> Continue Shopping
</Link>
</div>
</div>
</div>
);
};
const addItem = (product) => {
dispatch(addCart(product));
};
const removeItem = (product) => {
dispatch(delCart(product));
};
const ShowCart = () => {
let subtotal = 0;
let shipping = 30.0;
let totalItems = 0;
state.map((item) => {
return (subtotal += item.price * item.qty);
});
state.map((item) => {
return (totalItems += item.qty);
});
return (
<>
<section className="h-100 gradient-custom">
<div className="container py-5">
<div className="row d-flex justify-content-center my-4">
<div className="col-md-8">
<div className="card mb-4">
<div className="card-header py-3">
<h5 className="mb-0">Item List</h5>
</div>
<div className="card-body">
{state.map((item) => {
return (
<div key={item.id}>
<div className="row d-flex align-items-center">
<div className="col-lg-3 col-md-12">
<div
className="bg-image rounded"
data-mdb-ripple-color="light"
>
<img
src={item.image}
// className="w-100"
alt={item.title}
width={100}
height={75}
/>
</div>
</div>
<div className="col-lg-5 col-md-6">
<p>
<strong>{item.title}</strong>
</p>
{/* <p>Color: blue</p>
<p>Size: M</p> */}
</div>
<div className="col-lg-4 col-md-6">
<div
className="d-flex mb-4"
style={{ maxWidth: "300px" }}
>
<button
className="btn px-3"
onClick={() => {
removeItem(item);
}}
>
<i className="fas fa-minus"></i>
</button>
<p className="mx-5">{item.qty}</p>
<button
className="btn px-3"
onClick={() => {
addItem(item);
}}
>
<i className="fas fa-plus"></i>
</button>
</div>
<p className="text-start text-md-center">
<strong>
<span className="text-muted">{item.qty}</span>{" "}
x ${item.price}
</strong>
</p>
</div>
</div>
<hr className="my-4" />
</div>
);
})}
</div>
</div>
</div>
<div className="col-md-4">
<div className="card mb-4">
<div className="card-header py-3 bg-light">
<h5 className="mb-0">Order Summary</h5>
</div>
<div className="card-body">
<ul className="list-group list-group-flush">
<li className="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0">
Products ({totalItems})<span>${Math.round(subtotal)}</span>
</li>
<li className="list-group-item d-flex justify-content-between align-items-center px-0">
Shipping
<span>${shipping}</span>
</li>
<li className="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
<div>
<strong>Total amount</strong>
</div>
<span>
<strong>${Math.round(subtotal + shipping)}</strong>
</span>
</li>
</ul>
<Link
to="/checkout"
className="btn btn-dark btn-lg btn-block"
>
Go to checkout
</Link>
</div>
</div>
</div>
</div>
</div>
</section>
</>
);
};
return (
<>
<Navbar />
<div className="container my-3 py-3">
<h1 className="text-center">Cart</h1>
<hr />
{state.length > 0 ? <ShowCart /> : <EmptyCart />}
</div>
<Footer />
</>
);
};
export default Cart;
Checkout.jsx
import React from "react";
import { Footer, Navbar } from "../components";
import { useSelector } from "react-redux";
import { Link } from "react-router-dom";
const Checkout = () => {
const state = useSelector((state) => state.handleCart);
const EmptyCart = () => {
return (
<div className="container">
<div className="row">
<div className="col-md-12 py-5 bg-light text-center">
<h4 className="p-3 display-5">No item in Cart</h4>
<Link to="/" className="btn btn-outline-dark mx-4">
<i className="fa fa-arrow-left"></i> Continue Shopping
</Link>
</div>
</div>
</div>
);
};
const ShowCheckout = () => {
let subtotal = 0;
let shipping = 30.0;
let totalItems = 0;
state.map((item) => {
return (subtotal += item.price * item.qty);
});
state.map((item) => {
return (totalItems += item.qty);
});
return (
<>
<div className="container py-5">
<div className="row my-4">
<div className="col-md-5 col-lg-4 order-md-last">
<div className="card mb-4">
<div className="card-header py-3 bg-light">
<h5 className="mb-0">Order Summary</h5>
</div>
<div className="card-body">
<ul className="list-group list-group-flush">
<li className="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0">
Products ({totalItems})<span>${Math.round(subtotal)}</span>
</li>
<li className="list-group-item d-flex justify-content-between align-items-center px-0">
Shipping
<span>${shipping}</span>
</li>
<li className="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
<div>
<strong>Total amount</strong>
</div>
<span>
<strong>${Math.round(subtotal + shipping)}</strong>
</span>
</li>
</ul>
</div>
</div>
</div>
<div className="col-md-7 col-lg-8">
<div className="card mb-4">
<div className="card-header py-3">
<h4 className="mb-0">Billing address</h4>
</div>
<div className="card-body">
<form className="needs-validation" novalidate>
<div className="row g-3">
<div className="col-sm-6 my-1">
<label for="firstName" className="form-label">
First name
</label>
<input
type="text"
className="form-control"
id="firstName"
placeholder=""
required
/>
<div className="invalid-feedback">
Valid first name is required.
</div>
</div>
<div className="col-sm-6 my-1">
<label for="lastName" className="form-label">
Last name
</label>
<input
type="text"
className="form-control"
id="lastName"
placeholder=""
required
/>
<div className="invalid-feedback">
Valid last name is required.
</div>
</div>
<div className="col-12 my-1">
<label for="email" className="form-label">
Email
</label>
<input
type="email"
className="form-control"
id="email"
placeholder="[email protected]"
required
/>
<div className="invalid-feedback">
Please enter a valid email address for shipping
updates.
</div>
</div>
<div className="col-12 my-1">
<label for="address" className="form-label">
Address
</label>
<input
type="text"
className="form-control"
id="address"
placeholder="1234 Main St"
required
/>
<div className="invalid-feedback">
Please enter your shipping address.
</div>
</div>
<div className="col-12">
<label for="address2" className="form-label">
Address 2{" "}
<span className="text-muted">(Optional)</span>
</label>
<input
type="text"
className="form-control"
id="address2"
placeholder="Apartment or suite"
/>
</div>
<div className="col-md-5 my-1">
<label for="country" className="form-label">
Country
</label>
<br />
<select className="form-select" id="country" required>
<option value="">Choose...</option>
<option>India</option>
</select>
<div className="invalid-feedback">
Please select a valid country.
</div>
</div>
<div className="col-md-4 my-1">
<label for="state" className="form-label">
State
</label>
<br />
<select className="form-select" id="state" required>
<option value="">Choose...</option>
<option>Punjab</option>
</select>
<div className="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div className="col-md-3 my-1">
<label for="zip" className="form-label">
Zip
</label>
<input
type="text"
className="form-control"
id="zip"
placeholder=""
required
/>
<div className="invalid-feedback">
Zip code required.
</div>
</div>
</div>
<hr className="my-4" />
<h4 className="mb-3">Payment</h4>
<div className="row gy-3">
<div className="col-md-6">
<label for="cc-name" className="form-label">
Name on card
</label>
<input
type="text"
className="form-control"
id="cc-name"
placeholder=""
required
/>
<small className="text-muted">
Full name as displayed on card
</small>
<div className="invalid-feedback">
Name on card is required
</div>
</div>
<div className="col-md-6">
<label for="cc-number" className="form-label">
Credit card number
</label>
<input
type="text"
className="form-control"
id="cc-number"
placeholder=""
required
/>
<div className="invalid-feedback">
Credit card number is required
</div>
</div>
<div className="col-md-3">
<label for="cc-expiration" className="form-label">
Expiration
</label>
<input
type="text"
className="form-control"
id="cc-expiration"
placeholder=""
required
/>
<div className="invalid-feedback">
Expiration date required
</div>
</div>
<div className="col-md-3">
<label for="cc-cvv" className="form-label">
CVV
</label>
<input
type="text"
className="form-control"
id="cc-cvv"
placeholder=""
required
/>
<div className="invalid-feedback">
Security code required
</div>
</div>
</div>
<hr className="my-4" />
<button
className="w-100 btn btn-primary "
type="submit" disabled
>
Continue to checkout
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</>
);
};
return (
<>
<Navbar />
<div className="container my-3 py-3">
<h1 className="text-center">Checkout</h1>
<hr />
{state.length ? <ShowCheckout /> : <EmptyCart />}
</div>
<Footer />
</>
);
};
export default Checkout;
ContactPage.jsx
import React from "react";
import { Footer, Navbar } from "../components";
const ContactPage = () => {
return (
<>
<Navbar />
<div className="container my-3 py-3">
<h1 className="text-center">Contact Us</h1>
<hr />
<div class="row my-4 h-100">
<div className="col-md-4 col-lg-4 col-sm-8 mx-auto">
<form>
<div class="form my-3">
<label for="Name">Name</label>
<input
type="email"
class="form-control"
id="Name"
placeholder="Enter your name"
/>
</div>
<div class="form my-3">
<label for="Email">Email</label>
<input
type="email"
class="form-control"
id="Email"
placeholder="[email protected]"
/>
</div>
<div class="form my-3">
<label for="Password">Message</label>
<textarea
rows={5}
class="form-control"
id="Password"
placeholder="Enter your message"
/>
</div>
<div className="text-center">
<button
class="my-2 px-4 mx-auto btn btn-dark"
type="submit"
disabled
>
Send
</button>
</div>
</form>
</div>
</div>
</div>
<Footer />
</>
);
};
export default ContactPage;
home.jsx
import { Navbar, Main, Product, Footer } from "../components";
function Home() {
return (
<>
<Navbar />
<Main />
<Product />
<Footer />
</>
)
}
export default Homeindex.jsx
ADVERTISEMENT
export { default as Home } from './Home';
export { default as Products } from './Products';
export { default as Product } from './Product';
export { default as AboutPage } from './AboutPage';
export { default as ContactPage } from './ContactPage';
export { default as Cart } from './Cart';
export { default as Login } from './Login';
export { default as Register } from './Register';
export { default as Checkout } from './Checkout';
export { default as PageNotFound } from './PageNotFound';Login.jsx
ADVERTISEMENT
import React from "react";
import { Link } from "react-router-dom";
import { Footer, Navbar } from "../components";
const Login = () => {
return (
<>
<Navbar />
<div className="container my-3 py-3">
<h1 className="text-center">Login</h1>
<hr />
<div class="row my-4 h-100">
<div className="col-md-4 col-lg-4 col-sm-8 mx-auto">
<form>
<div class="my-3">
<label for="display-4">Email address</label>
<input
type="email"
class="form-control"
id="floatingInput"
placeholder="[email protected]"
/>
</div>
<div class="my-3">
<label for="floatingPassword display-4">Password</label>
<input
type="password"
class="form-control"
id="floatingPassword"
placeholder="Password"
/>
</div>
<div className="my-3">
<p>New Here? <Link to="/register" className="text-decoration-underline text-info">Register</Link> </p>
</div>
<div className="text-center">
<button class="my-2 mx-auto btn btn-dark" type="submit" disabled>
Login
</button>
</div>
</form>
</div>
</div>
</div>
<Footer />
</>
);
};
export default Login;
PageNtFound.jsx
ADVERTISEMENT
import React from "react";
import { Link } from "react-router-dom";
import { Navbar } from "../components";
const PageNotFound = () => {
return (
<>
<Navbar />
<div className="container my-3 py-3">
<div className="container">
<div className="row">
<div className="col-md-12 py-5 bg-light text-center">
<h4 className="p-3 display-5">404: Page Not Found</h4>
<Link to="/" className="btn btn-outline-dark mx-4">
<i className="fa fa-arrow-left"></i> Go Back to Home
</Link>
</div>
</div>
</div>
</div>
</>
);
};
export default PageNotFound;
Product.jsx
ADVERTISEMENT
import React, { useEffect, useState } from "react";
import Skeleton from "react-loading-skeleton";
import { Link, useParams } from "react-router-dom";
import Marquee from "react-fast-marquee";
import { useDispatch } from "react-redux";
import { addCart } from "../redux/action";
import { Footer, Navbar } from "../components";
const Product = () => {
const { id } = useParams();
const [product, setProduct] = useState([]);
const [similarProducts, setSimilarProducts] = useState([]);
const [loading, setLoading] = useState(false);
const [loading2, setLoading2] = useState(false);
const dispatch = useDispatch();
const addProduct = (product) => {
dispatch(addCart(product));
};
useEffect(() => {
const getProduct = async () => {
setLoading(true);
setLoading2(true);
const response = await fetch(`https://fakestoreapi.com/products/${id}`);
const data = await response.json();
setProduct(data);
setLoading(false);
const response2 = await fetch(
`https://fakestoreapi.com/products/category/${data.category}`
);
const data2 = await response2.json();
setSimilarProducts(data2);
setLoading2(false);
};
getProduct();
}, [id]);
const Loading = () => {
return (
<>
<div className="container my-5 py-2">
<div className="row">
<div className="col-md-6 py-3">
<Skeleton height={400} width={400} />
</div>
<div className="col-md-6 py-5">
<Skeleton height={30} width={250} />
<Skeleton height={90} />
<Skeleton height={40} width={70} />
<Skeleton height={50} width={110} />
<Skeleton height={120} />
<Skeleton height={40} width={110} inline={true} />
<Skeleton className="mx-3" height={40} width={110} />
</div>
</div>
</div>
</>
);
};
const ShowProduct = () => {
return (
<>
<div className="container my-5 py-2">
<div className="row">
<div className="col-md-6 col-sm-12 py-3">
<img
className="img-fluid"
src={product.image}
alt={product.title}
width="400px"
height="400px"
/>
</div>
<div className="col-md-6 col-md-6 py-5">
<h4 className="text-uppercase text-muted">{product.category}</h4>
<h1 className="display-5">{product.title}</h1>
<p className="lead">
{product.rating && product.rating.rate}{" "}
<i className="fa fa-star"></i>
</p>
<h3 className="display-6 my-4">${product.price}</h3>
<p className="lead">{product.description}</p>
<button
className="btn btn-outline-dark"
onClick={() => addProduct(product)}
>
Add to Cart
</button>
<Link to="/cart" className="btn btn-dark mx-3">
Go to Cart
</Link>
</div>
</div>
</div>
</>
);
};
const Loading2 = () => {
return (
<>
<div className="my-4 py-4">
<div className="d-flex">
<div className="mx-4">
<Skeleton height={400} width={250} />
</div>
<div className="mx-4">
<Skeleton height={400} width={250} />
</div>
<div className="mx-4">
<Skeleton height={400} width={250} />
</div>
<div className="mx-4">
<Skeleton height={400} width={250} />
</div>
</div>
</div>
</>
);
};
const ShowSimilarProduct = () => {
return (
<>
<div className="py-4 my-4">
<div className="d-flex">
{similarProducts.map((item) => {
return (
<div key={item.id} className="card mx-4 text-center">
<img
className="card-img-top p-3"
src={item.image}
alt="Card"
height={300}
width={300}
/>
<div className="card-body">
<h5 className="card-title">
{item.title.substring(0, 15)}...
</h5>
</div>
{/* <ul className="list-group list-group-flush">
<li className="list-group-item lead">${product.price}</li>
</ul> */}
<div className="card-body">
<Link
to={"/product/" + item.id}
className="btn btn-dark m-1"
>
Buy Now
</Link>
<button
className="btn btn-dark m-1"
onClick={() => addProduct(item)}
>
Add to Cart
</button>
</div>
</div>
);
})}
</div>
</div>
</>
);
};
return (
<>
<Navbar />
<div className="container">
<div className="row">{loading ? <Loading /> : <ShowProduct />}</div>
<div className="row my-5 py-5">
<div className="d-none d-md-block">
<h2 className="">You may also Like</h2>
<Marquee
pauseOnHover={true}
pauseOnClick={true}
speed={50}
>
{loading2 ? <Loading2 /> : <ShowSimilarProduct />}
</Marquee>
</div>
</div>
</div>
<Footer />
</>
);
};
export default Product;
Products.jsx
ADVERTISEMENT
import React from 'react'
import { Footer, Navbar, Product } from "../components"
const Products = () => {
return (
<>
<Navbar />
<Product />
<Footer />
</>
)
}
export default ProductsRegister.jsx
import React from 'react'
import { Footer, Navbar } from "../components";
import { Link } from 'react-router-dom';
const Register = () => {
return (
<>
<Navbar />
<div className="container my-3 py-3">
<h1 className="text-center">Register</h1>
<hr />
<div class="row my-4 h-100">
<div className="col-md-4 col-lg-4 col-sm-8 mx-auto">
<form>
<div class="form my-3">
<label for="Name">Full Name</label>
<input
type="email"
class="form-control"
id="Name"
placeholder="Enter Your Name"
/>
</div>
<div class="form my-3">
<label for="Email">Email address</label>
<input
type="email"
class="form-control"
id="Email"
placeholder="[email protected]"
/>
</div>
<div class="form my-3">
<label for="Password">Password</label>
<input
type="password"
class="form-control"
id="Password"
placeholder="Password"
/>
</div>
<div className="my-3">
<p>Already has an account? <Link to="/login" className="text-decoration-underline text-info">Login</Link> </p>
</div>
<div className="text-center">
<button class="my-2 mx-auto btn btn-dark" type="submit" disabled>
Register
</button>
</div>
</form>
</div>
</div>
</div>
<Footer />
</>
)
}
export default RegisterInside your redux Folder create below mentioned files for e-commerce website:-
You can study further about Reduc concepts in ReactJs from here
Create inside action folder, redux/action/index.js
Index.js
// For Add Item to Cart
export const addCart = (product) =>{
return {
type:"ADDITEM",
payload:product
}
}
// For Delete Item to Cart
export const delCart = (product) =>{
return {
type:"DELITEM",
payload:product
}
}Create inside reducer folder, redux/action/handlerCart.js
handlerCart.js
const cart = []
const handleCart = (state=cart, action) =>{
const product = action.payload
switch(action.type){
case "ADDITEM":
// Check if product already in cart
const exist = state.find((x) => x.id === product.id)
if(exist){
// Increase the quantity
return state.map((x)=>x.id ===product.id?{...x, qty: x.qty+1}:x)
}
else{
return [...state, {...product, qty:1}]
}
break;
case "DELITEM":
const exist2 = state.find((x) => x.id === product.id)
if(exist2.qty === 1){
return state.filter((x)=>x.id!==exist2.id)
}
else{
return state.map((x)=> x.id===product.id?{...x, qty:x.qty-1}:x)
}
break;
default:
return state
break;
}
}
export default handleCartCreate inside action folder, redux/action/index.js
index.js
import handleCart from './handleCart'
import { combineReducers } from "redux";
const rootReducers = combineReducers({
handleCart,
})
export default rootReducersstore.js
import {configureStore} from '@reduxjs/toolkit';
import rootReducers from './reducer';
const store = configureStore({
reducer: rootReducers,
})
export default store;
Final Output of E-commerce Website
Topics You Must Learn while Creating an E-commerce Application
- Redux
- Props
- Hooks
- Arrow Functions
- Class-based and Functional Based Components
- ReactJS state and State management
100+ JavaScript Projects For Beginners With Source Code
Conclusion
Congratulations, You have completed your Major E-Commerce Web Application ReactJs Project and further you can enhance this as per your preferences. You can deploy it on the Github, Vercel, or Netfliy platforms and make it live for your friends. Add this to your resume after adding or enhancing more functionality like Live Product, Out Of Stock, UPdate your Adress, Intractive UI, and many more. You can add further functionalities to your E-Commerce Website.
I hope you liked this Tutorial and must have learned Something new. If you have any questions regarding this feel free to drop your comments below and contact our team on Instagram @Codewithrandom.
HAPPY CODING!!!
