How To Build A Full E-commerce Website Using React JS | React JS Ecommerce Project From Scratch


Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS, JavaScript, React) tutorials. 

Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.

You can also visit my GitHub where I upload all the code I have.

In this tutorial topic "How To Build A Full E-commerce Website Using React JS | React JS Ecommerce Project From Scratch", we will learn how to create it following these simple easy steps.

Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments. 

Get Source Code.

If interested in watching the video before running the code below, you can click the play button to get started.

Setting Up the Project

Before building the "Full E-commerce Website" with React.js and CSS, ensure Node.js is installed on your computer. If not, download and install it from the official Node.js website.

Create a Project Folder:

  1. Make a new folder, for instance, “ecommerce-website”.
  2. Open this folder in your VS Code editor.

Initialize the Project:

Open your terminal by pressing Ctrl + J and then use Vite to create a new React app with this command:

  npm create vite@latest ./ -- --template react


Install necessary dependencies and start the development server:

npm install
npm run dev

If your project is running in your browser, congratulations! You’ve successfully set up your weather app. Now, let’s move on to modifying folders and files.

Modify folder and CSS Files:

  1. Remove the default assets folder and App.css file.
  2. Replace the content of index.css with the provided CSS code.


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700&display=swap');


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
}

/* News Letter Style */
.news-letter {
  margin: 15vh 0;
  text-align: center;
}

.news-letter h3 {
  font-size: 5em;
  text-transform: uppercase;
  font-weight: 500;
  color: #D5D6D7;
}

.news-letter > div {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  margin-top: 40px;
}

.news-letter > div input {
  flex: 1;
  padding: 10px;
  font-size: 1em;
  font-family: "Poppins", sans-serif;
  outline: none;
  border: 1px solid #000;
} 

.news-letter > div button {
  width: 30%;
  padding: 15px;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: all 0.5s ease;
}

.news-letter > div button:hover {
  border: 1px solid #000;
  background: transparent;
  color: #000;
  letter-spacing: 8px;
}

/* Responsive */
@media (max-width: 768px) {
  .news-letter h3 {
    font-size: 2.5em;
  }

  .news-letter > div {
    flex-direction: column;
    width: 80%;
    gap: 10px;
  }

  .news-letter > div input {
    width: 100%;
  }

  .news-letter > div button {
    width: 100%;
  }
}

  
  
  

Creating the Components

Within the src directory of your project, organize your files by creating a folders.
  1. Article. Create the files. Article.jsx, Article.css
  2. Display. Create the files. Display.jsx, Display.css
  3. Hero. Create the files. Hero.jsx, Hero.css
  4. NavBar. Create the files, NavBar.jsx, NavBar.css
  5. Swiper. Create the files, NavBar.jsx, NavBar.css
  6. VideoPopup. Create the files, VideoPopup.jsx, VidePopup.css
  7. Footer. Create the files, Footer.jsx, Footer.css

Adding the Codes

Add the respective code to each newly created file to define the layout and functionality of your chatbot.

In src/Aricle/Article.jsx, add the code.

import React from 'react'
import "./Article.css"
import article1 from "../assets/article1.jpg"
import article2 from "../assets/article2.jpg"
import article3 from "../assets/article3.jpg"

//Framer Motion
import { motion } from 'framer-motion'

const Article = () => {
  return (
    <div className='articles'>
        <motion.div className="article-header"
            initial={{opacity: 0, x: -200}}
            whileInView={{opacity: 1, x: 0}}
            transition={{duration: 1}}
            viewport={{once: true, amount: 0}}
        >
            <h3>news articles</h3>
            <button>read all</button>
        </motion.div>
        <motion.div className="all-articles"
            initial={{opacity: 0, y: 200}}
            whileInView={{opacity: 1, y: 0}}
            transition={{duration: 0.6}}
            viewport={{once: true, amount: 0}}
        >
            <div className="article">
                <img src={article1} alt="" />
                <h4>best electric produce to buy this season</h4>
            </div>
            <div className="article">
                <img src={article2} alt="" />
                <h4>how to follow the trend budget list.</h4>
            </div>
            <div className="article">
                <img src={article3} alt="" />
                <h4>unique gadget to own by tech collectors.</h4>
            </div>
        </motion.div>
    </div>
  )
}

export default Article



In src/Aricle/Article.css, add the code.

.articles {
    margin-top: 10vh;
    padding: 1em;
}

.article-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

.article-header h3 {
    font-size: 2.7em;
    text-transform: uppercase;
    font-weight: 500;
}

.article-header button {
    padding: 15px 40px;
    border: none;
    text-transform: uppercase;
    cursor: pointer;
    background: #424649;
    color: #fff;
    transition: all 0.5s ease;
}

.article-header button:hover {
    letter-spacing: 8px;
}

.all-articles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1em;
}

.article {
    cursor: pointer;
}

.article img {
    width: 100%;
}

.article h4 {
    text-transform: uppercase;
    font-size: 1.5em;
    margin-top: 10px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .article-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1em;
    }

    .article-header h3 {
        font-size: 2em;
    }

    .article-header button {
        padding: 10px 30px;
    }

    .all-articles {
        gap: 2em;
    }

    .article h4 {
        font-size: 1.4em;
    }
}




In src/Display/Display.jsx, add the code.

import React from 'react'
import "./Display.css"

//Framer Motion
import { motion } from "framer-motion";

const Display = () => {
  return (
    <div className='display'>
        <motion.div 
            initial={{opacity: 0, x: -200}}
            whileInView={{opacity: 1, x: 0}}
            transition={{duration: 0.6}}
            viewport={{once: true, amount: 0.2}}
        >
            <div>
                <h2>deal of the day</h2>
                <span>up to 45% off on laptops</span>
                <button>shop now</button>
            </div>
        </motion.div>
        <motion.div 
            initial={{opacity: 0, y: 200}}
            whileInView={{opacity: 1, y: 0}}
            transition={{duration: 0.6}}
            viewport={{once: true, amount: 0}}
        >
            <div>
                <h2>the best selling</h2>
                <span>starting price from $100</span>
                <button>shop now</button>
            </div>
        </motion.div>
    </div>
  )
}

export default Display




In src/Display/Display.css, add the code.

.display {
    position: relative;
    margin-top: 91vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
}

.display > div {
    position: relative;
    width: 100%;
    height: 700px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.display > div:first-child {
    background-image: url("../assets/display-1.jpg");
}

.display > div:last-child {
    background-image: url("../assets/display-2.jpg");
}

.display > div > div {
    position: absolute;
    top: 80%;
    width: 100%;
    transform: translateY(-80%);
    background: rgba(255, 255, 255, 0.1);
    padding: 3em 0;
    text-align: center;
    color: #fff;
}

.display > div > div h2 {
    font-size: 3.5em;
    text-transform: uppercase;
    font-weight: 500;
}

.display > div > div span {
    display: block;
    margin: 20px 0;
    text-transform: uppercase;
    font-size: 1.5em;
}

.display > div > div button {
    padding: 15px 50px;
    border: none;
    text-transform: uppercase;
    font-size: 1em;
    cursor: pointer;
    background: #fff;
    transition: all 0.5s ease;
}

.display > div > div button:hover {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
}

/* Responsiveness */
@media (max-width: 768px) {
    .display {
        flex-direction: column;
        padding: 0.6em;
        gap: 0;
        margin-top: 90vh;
    }
}





In src/Hero/Hero.jsx, add the code.

import React from 'react'
import "./Hero.css"
import { motion } from 'framer-motion'

const Hero = () => {
  return (
    <div className='hero'>
        <motion.div
          initial={{opacity: 0, x: -200}}
          whileInView={{opacity: 1, x: 0}}
          transition={{duration: 1}}
          viewport={{once: true, amount: 0}}
        >
            <span>up to 50% off</span>
            <h1>the best apple watch series</h1>
            <button>shop collection</button>
        </motion.div> 
    </div>
  )
}

export default Hero





In src/Hero/Hero.css, add the code.

.hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url("../assets/hero.jpg") no-repeat center center/cover;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 15em;
    color: #fff;
}

.hero > div span {
    font-size: 3em;
}

.hero > div h1 {
    font-size: 5em;
    text-transform: uppercase;
    font-weight: 500;
    max-width: 600px;
    line-height: 1.3em;
    letter-spacing: 0.0001em;
}

.hero > div button {
    padding: 15px 50px;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s ease;
}

.hero > div button:hover {
    background: #fff;
    color: #000;
}


/* Responsiveness */
@media (max-width: 1000px) {
    .hero {
        padding-left: 5%;
    }
}

@media (max-width: 768px) {
    .hero > div span {
        font-size: 2em;
    }
    .hero > div h1 {
        font-size: 2.5em;
        line-height: 1.5em;
    }
}







In src/NavBar/NavBar.jsx, add the code.

import React, { useState } from "react";
import "./Navbar.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCartShopping, faChevronDown, faTimes } from "@fortawesome/free-solid-svg-icons";
import { faHeart, faUser } from "@fortawesome/free-solid-svg-icons";
import logo from "../assets/logo.png"

//Framer Motion
import { motion } from "framer-motion";

const Navbar = () => {
  const [menuOpen, setMenuOpen] = useState(false);
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [cartOpen, setCartOpen] = useState(false);
  

  return (
    <>
      <motion.header className="navbar"
        initial={{opacity: 0, y: -50}}
        whileInView={{opacity: 1, y: 0}}
        transition={{duration: 0.6}}
        viewport={{once: true, amount: 0}}
      >
        <a href="" className="navbar-logo"><img src={logo} alt="logo" /></a>

        <nav className={`navbar-links ${menuOpen ? "active" : ""}`}>
          <ul>
            <li>
              <a href="#"><span>Home</span></a>
            </li>
            <li><a href="#"><span>About</span></a></li>
            <li onClick={() => setDropdownOpen(!dropdownOpen)}><a href="#"><span>Shop</span><FontAwesomeIcon icon={faChevronDown} className="icon" /></a> 
              <ul className={`dropdown ${dropdownOpen ? "show" : ""}`}>
                <li><a href="#">Shop Now</a></li>
                <li><a href="#">Shop Products</a></li>
              </ul>
            </li>
            <li><a href="#"><span>Blog</span></a></li>
            <li><a href="#"><span>Page</span></a></li>
          </ul>
        </nav>

        <div className="navbar-icons">
          <a href="#" className="icon" onClick={() => setCartOpen(!cartOpen)}><FontAwesomeIcon icon={faCartShopping} /></a>
          <a href="#" className="icon"><FontAwesomeIcon icon={faHeart} /></a>
          <a href="#" className="icon"><FontAwesomeIcon icon={faUser} /></a>
          <span className="hamburger" onClick={() => setMenuOpen(!menuOpen)}>☰</span>
        </div>
      </motion.header> 

      {/* Cart Dropdown */}
      <div className={`cart-dropdown ${cartOpen && "active"}`}>
            <button className="close-btn" onClick={() => setCartOpen(!cartOpen)}><FontAwesomeIcon icon={faTimes} className="icon" /></button>
            <div className="cart-items">
                <div className="cart-header">
                    <h3>your cart</h3>
                    <div>3</div>
                </div>
                <div className="cart-details">
                    <div>
                        <div>
                            <h4>Product one</h4>
                            <p>Brief description</p>
                        </div>
                        <p>$120</p>
                    </div>
                    <div>
                        <div>
                            <h4>Product two</h4>
                            <p>Brief description</p>
                        </div>
                        <p>$120</p>
                    </div>
                    <div>
                        <div>
                            <h4>Product three</h4>
                            <p>Brief description</p>
                        </div>
                        <p>$120</p>
                    </div>
                    <div className="total">
                        <p>Total (USD)</p>
                        <p>$120</p>
                    </div>
                </div>
            </div>
          <button>continue to checkout</button>
        </div>
    </>
  );
};

export default Navbar;








In src/NavBar/NavBar.css, add the code.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding: 1.5em 3em;
  position: relative;
  z-index: 99;
}

.navbar-logo {
  font-size: 2em;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
}

.navbar-links ul {
  display: flex;
  list-style: none;
  gap: 4em;
}

.navbar-links li {
  position: relative;
  cursor: pointer;
}

.navbar-links li::before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background: #fff;
  top: 100%;
  left: 0;
  transition: all 0.5s ease;
}

.navbar-links li:hover::before {
  width: 100%;
}

.navbar-links li > a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
}

.navbar-links li > a .icon {
    font-size: 0.9em;
}

.navbar-links li .dropdown {
  position: absolute;
  top: 30px;
  left: 0;
  background: #fff;
  padding: 10px 20px;
  min-width: 200px;
  list-style: none;
  z-index: 100;
  border-radius: 5px;
  display: none;
}

.navbar-links li .dropdown li {
  margin-bottom: 8px;
}

.navbar-links li .dropdown li a {
    color: #222;
}

.dropdown li:last-child {
  margin-bottom: 0;
}

.navbar-links li .dropdown.show {
  display: block;
}

.navbar-icons {
  display: flex;
  gap: 20px;
  align-items: center;
}

.navbar-icons .icon {
  cursor: pointer;
  font-size: 1.2em;
  color: #fff;
  transition: all 0.5s ease;
}

.navbar-icons .icon:hover {
  color: #cccc;
}

.hamburger {
  font-size: 1.5em;
  cursor: pointer;
  display: none;
}

/* Cart Dropdown */
.cart-dropdown {
  position: fixed;
  top: 0;
  right: 0;
  background: #fff;
  color: #000;
  padding: 0 20px;
  max-width: 400px;
  width: 100%;
  height: 100vh;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  z-index: 99;
  transform: translateX(9999px);
  transition: all 0.5s ease;
}

.cart-dropdown button.close-btn {
    float: right;
    border: none;
    width: auto;
    padding: 10px 15px;
}

.cart-items {
    margin-top: 80px;
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-header h3 {
    text-transform: uppercase;
}

.cart-header > div {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffff;
}

.cart-details {
    margin-top: 20px;
    border: 1px solid rgba(0,0,0,0.1);
    padding: 10px 15px;
}

.cart-details > div {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 10px 0;
}

.cart-details > div:last-child {
    border: none;
}

.cart-details > div h4 {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.1em;
}

.cart-details > div p {
    font-size: 1em;
    color: rgba(0,0,0,0.5);
}

.cart-details > div.total p {
    color: #000;
    font-weight: 600;
}

.cart-dropdown button {
  margin-top: 20px;
  padding: 15px 0;
  background: #222;
  color: #fff;
  border: none;
  cursor: pointer;
  width: 100%;
  font-size: 1em;
  text-transform: uppercase;
}

.cart-dropdown.active {
  transform: translateX(0);
}

/* Responsive */
@media (max-width: 1000px) {
  .navbar-links ul {
    gap: 1.5em;
  }
}


@media (max-width: 768px) {
  .navbar {
    padding: 1.5em 1.5em;
  }

  .navbar-links {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    background: #000;
    width: 100%;
    padding: 20px 10px;
    flex-direction: column;
  }

  .navbar-links.active {
    display: flex;
  }

  .navbar-links ul {
    flex-direction: column;
    gap: 15px;
  }

  .hamburger {
    display: block;
  }

  .navbar-icons .icon {
    display: none;
  }
}






In src/Swiper/Swiper.jsx, add the code.


import React from 'react'
import "./SwiperFunc.css"
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import { Autoplay, Pagination } from 'swiper/modules';
import 'swiper/css/pagination';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowRight, faTimes, faHeart } from '@fortawesome/free-solid-svg-icons';
import { motion } from 'framer-motion';



const SwiperFunc = ({swiperTitle, imageSlides, content, swiperSubTitle, textSlides, paginationID}) => {

  return (
    <div className='swiper-container'>
      <motion.div className="swiper-title"
        initial={{opacity: 0, x: -200}}
        whileInView={{opacity: 1, x: 0}}
        transition={{duration: 1}}
        viewport={{once: true, amount: 0}}
      >
        {swiperTitle ? <>
        <h3>{swiperTitle}</h3>
        <button>Shop All</button>
        </> : <h3 className='review'>{swiperSubTitle}</h3>}
      </motion.div>
      {imageSlides && 
      <Swiper
        modules={[Autoplay, Pagination]}
        spaceBetween={30}
        slidesPerView={1}
        {...paginationID && {loop: true, autoplay: {delay: 2500, disableOnInteraction: false}, pagination: {enabled: true, clickable: true}}}
        // loop={true}
        // autoplay={{delay: 2500, disableOnInteraction: false}}
        
        //Responsiveness
          breakpoints={{
            0: {
              slidesPerView: 1,
            },
            640: {
              slidesPerView: 1,
            },
            768: {
              slidesPerView: 2,
            },
            1024: {
              slidesPerView: 4,
            },
        }}
      >

      {imageSlides.map((src, index) => (
          <SwiperSlide key={index}>
            <motion.div className='image-slide'
              initial={{opacity: 0, y: 200}}
              whileInView={{opacity: 1, y: 0}}
              transition={{duration: 0.6 * index}}
              viewport={{once: true, amount: 0}}
            >
              <img src={src} alt={`Slide ${index + 1}`} />
              <div className="slide-description">
                <span>Add To Cart <FontAwesomeIcon icon={faArrowRight} /> </span> <FontAwesomeIcon icon={faHeart} /><FontAwesomeIcon icon={faTimes} />
              </div>
              {content && content[index] && (
                <div className='image-content'>
                  <span>{content[index].range}</span>
                  <span>{content[index].price}</span>
                </div>
              )}
            </motion.div>
          </SwiperSlide>
        ))}
    </Swiper>}

    {textSlides && 
    <div style={{width: "90%", margin: "0 auto"}}>
    <Swiper 
      modules={[Autoplay, Pagination]}
      spaceBetween={50}
      slidesPerView={1}
      loop={true}
      pagination={{clickable: true}}

      //Responsiveness
          breakpoints={{
            640: {
              slidesPerView: 1,
            },
            768: {
              slidesPerView: 2,
              spaceBetween: 50
            },
            1024: {
              slidesPerView: 2,
            },
        }}
    >
      {textSlides.map((src, index) => (
          <SwiperSlide key={index}>
            <div className='text-slide'>
              <p>{src.text}</p>
              <span>{src.author}</span>
            </div>
          </SwiperSlide>
        ))}
    </Swiper>
    </div>}
        
    </div>
  )
}

export default SwiperFunc





In src/Swiper/Swiper.css, add the code.

.swiper-container {
    margin-top: 10vh;
    padding: 1em;
}

.swiper-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

.swiper-title h3 {
    font-size: 2.7em;
    text-transform: uppercase;
    font-weight: 500;
}

.swiper-title button {
    padding: 15px 40px;
    border: none;
    text-transform: uppercase;
    cursor: pointer;
    background: #424649;
    color: #fff;
    transition: all 0.5s ease;
}

.swiper-title button:hover {
    letter-spacing: 8px;
}

.image-slide {
    position: relative;
    max-width: 350px;
    width: 100%;
    height: 400px;
    margin-bottom: 100px;
}

.image-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.swiper-pagination-bullet-active {
  background-color: #000 !important;
  transform: scale(1.2);
}

.slide-description {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -80%);
    width: 80%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 50px;
    font-size: 1.2em;
    opacity: 0;
    transition: all 0.5s ease;
}

.slide-description span {
    font-size: 0.9em;
}

.image-slide:hover .slide-description {
    top: 80%;
    opacity: 1;
}

.image-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.2em;
    text-transform: uppercase;
    margin-top: 10px;
}

.image-content span:last-child {
    font-weight: 550;
}

.swiper-title h3.review {
    font-size: 5em;
    color: #D5D6D7;
}

.text-slide {
    text-align: center;
    font-size: 1.2em;
    color: #424649;
    margin-bottom: 50px;
}

.text-slide span {
    display: block;
    margin: 20px 0;
    color: #000;
    font-weight: 550;
}

/* Responsiveness */
@media (max-width: 768px) {
    .swiper-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 1em;
    }

    .swiper-title h3 {
        font-size: 2em;
    }

    .swiper-title button {
        padding: 10px 30px;
    }

    .swiper-title h3.review {
        font-size: 2.5em;
    }

    .slide-description {
        padding: 10px 30px;
    }
}






In src/VideoPopup/VideoPopup.jsx, add the code.

import { faPlayCircle } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import React, { useState, useRef, useEffect } from 'react'
import "./VideoPopup.css"

//Framer Motion
import { motion } from 'framer-motion'

const VideoPopup = () => {
    const [openPopup, setOpenPopup] = useState(false);

    const popupRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (popupRef.current && !popupRef.current.contains(event.target)) {
        setOpenPopup(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  return (
    <>
        <motion.div className='video-popup'
          initial={{opacity: 0, scale: 0}}
          whileInView={{opacity: 1, scale: 1}}
          transition={{duration: 0.6}}
          viewport={{once: true, amount: 0}}
        >
            <button onClick={() => setOpenPopup(true)}><FontAwesomeIcon icon={faPlayCircle} /></button>
        </motion.div>
        {openPopup && <div className='popup-contianer'>
            <div ref={popupRef} className="popup">
                <iframe src="https://www.youtube.com/embed/MOKIi86cx8w?si=vh_skqSdofrrGVfh" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
            </div> 
        </div>}
    </> 
    
  )
}

export default VideoPopup






In src/VideoPopup/VideoPopup.css, add the code.

.video-popup {
    width: 100%;
    height: 70vh;
    background-image: url("../assets/video.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-popup button {
    font-size: 7em;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #fff;
    animation: zoom 4s linear alternate infinite;
}

@keyframes zoom {
    0% {transform: scale(1);}
    100% {transform: scale(1.5);}
}

.popup-contianer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99;
    background: rgba(0, 0, 0, .7);
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup {
    max-width: 700px;
    width: 90%;
    height: 500px;
    padding: 10px;
    background: #fff;
}

.popup iframe {
    width: 100%;
    height: 100%;
}






In src/Footer/Footer.jsx, add the code.

import React from 'react'
import "./Footer.css"
import logo from "../assets/logo.png"
import { motion } from 'framer-motion'

const Footer = () => {
  return (
    <motion.div className='footer'
      initial={{opacity: 0}}
      whileInView={{opacity: 1}}
      transition={{duration: 1}}
      viewport={{once: true, amount: 0}}
    >
        <div className="footer-container">
        <a href='' className="footer-section brand">
          <img src={logo} />
        </a>

        <div className="footer-section">
          <ul>
            <li>ABOUT</li>
            <li>SHOP</li>
            <li>SALE</li>
            <li>ARTICLES</li>
          </ul>
        </div>

        <div className="footer-section">
          <ul>
            <li>TRACK ORDER</li>
            <li>RETURN POLICY</li>
            <li>SHIPPING</li>
            <li>CONTACT US</li>
          </ul>
        </div>

        <div className="footer-section">
          <ul>
            <li>FACEBOOK</li>
            <li>INSTAGRAM</li>
            <li>TWITTER</li>
            <li>YOUTUBE</li>
            <li>PINTEREST</li>
          </ul>
        </div>

        <div className="footer-section contact">
          <p>Do you have any queries?</p>
          <a href="mailto:youremailaddress@gmail.com">
            youremailaddress@gmail.com
          </a>
          <p>If you need support? Give us a call.</p>
          <p>+12 23 34 456 678</p>
        </div>
      </div>

      <div className="footer-bottom">
        <p>
          © All rights reserved by{" "}
          <a
            href=""
            target="_blank"
            rel="noopener noreferrer"
          >
            U-GINE MEDIA
          </a>
        </p>
      </div>
    </motion.div>
  )
}

export default Footer





In src/Footer/Footer.css, add the code.

.footer {
  background-color: #000;
  color: #fff;
  padding: 6em 3em;
  padding-bottom: 0;
  font-family: sans-serif;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 0.9em;
  margin-bottom: 10em;
}

.footer-section {
  flex: 1;
  min-width: 150px;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section li {
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.contact a {
  color: #fff;
  text-decoration: underline;
  display: block;
  margin: 0.5rem 0;
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid #333;
  padding: 2em 0;
}

.footer-bottom p {
  font-size: 1.1em;
}

.footer-bottom a {
  color: #fff;
  text-decoration: underline;
}


/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0;
    gap: 0.5rem;
    padding-top: 2em;
  }

  .footer-section {
    width: 100%;
    margin-bottom: 1.5rem;
  }

  .footer-bottom {
    text-align: left;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .footer {
    padding: 2rem 1rem;
  }

  .brand h2 {
    font-size: 20px;
  }

  .footer-bottom {
    font-size: 12px;
  }
}





In App.jsx, add the code.

import React from 'react'
import Navbar from './NavBar/NavBar'
import Hero from './Hero/Hero'
import Display from './Display/Display'
import SwiperFunc from './Swiper/SwiperFunc'
import item1 from "./assets/item1.jpg"
import item2 from "./assets/item2.jpg"
import item3 from "./assets/item3.jpg"
import item4 from "./assets/item4.jpg"
import item5 from "./assets/item5.jpg"
import VideoPopup from './VideoPopup/VideoPopup'
import Article from './Article/Article'
import Footer from './Footer/Footer'

//Framer Motion
import { motion } from 'framer-motion'


const App = () => {

    const slides = [item1, item2, item3, item4, item5];
    const slideContent = [
      {range: "product one", price: "$22.00"},
      {range: "product two", price: "$50.00"},
      {range: "product trhee", price: "$12.00"},
      {range: "product four", price: "$220.00"},
      {range: "product five", price: "$100.00"},
    ]
    const reviews = [
      {text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsam libero odit dignissimos magni explicabo!", author: "John Doe"},
      {text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsam libero odit dignissimos magni explicabo!", author: "Williams Jack"},
      {text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsam libero odit dignissimos magni explicabo!", author: "Nicholas Anderson"},
      
    ]

  return <>
    <Navbar />
    <Hero />
    <Display />
    <SwiperFunc swiperTitle="New Arrival Items" imageSlides={slides} content={slideContent} />
    <SwiperFunc swiperSubTitle="Customer's review" textSlides={reviews} />
    <VideoPopup />
    <SwiperFunc swiperTitle="Best-selling Items" imageSlides={slides} content={slideContent} paginationID={true} />
    <Article />
    <motion.div className="news-letter"
      initial={{opacity: 0, scale: 0}}
      whileInView={{opacity: 1, scale: 1}}
      transition={{duration: 0.6}}
      viewport={{once: true, amount: 0}}
    >
      <h3>subscribe us</h3>
      <div><input type='text' placeholder='Write your email address here...' /><button>Subscribe</button></div>
    </motion.div>
    <Footer />
  </>
}

export default App


Conclusion and Final word

Now, we have reached the end of our code, for any information, you can comment any problem or code-not-working issues to resolve it, am always with you. You can also visit my YouTube Channel for more updates on HTML, CSS & JavaScript Designs. I believe you can create "Build A Full E-commerce Website Using React JS | React JS Ecommerce Project From Scratch". and do so much more with codes. Go extremely far in exploring the world of HTML, CSS & JavaScript, its gonna be fun, trust me 😃.

Keep experimenting! You can add other cool features. Try improving error handling and adding other cool updates to make your chatbot even better.

If you run into any issues, you can download the source code for this AI chatbot project by clicking the “Download” button. Don’t forget to check the README.md file for setup and usage instructions. If you need help, you’ll also find support information there.

Happy Coding Journey 🚀










Post a Comment

0 Comments

Close Menu