Categories

Thursday, October 3, 2024
#919814419350 therichposts@gmail.com
Bootstrap 5Free Ecommerce TemplatesReactjsReactjs Ecommerce TemplatesReactjs TemplatesReactjs Tutorial

FlipKart Ecommerce Website Clone in React js

FlipKart Ecommerce Website Clone in React js

Hello guys how are you? Welcome back to my blog. Today in this blog post we will create FlipKart Ecommerce Website Clone in React js.

Live demo
  1. Reactjs Tutorials
  2. Bootstrap 5
  3. React Free Ecommerce Templates
  4. React Free Admins

First, make sure you have Node.js and npm (or yarn) installed. Then create a new React project.

npx create-react-app flipkart-clone
cd flipkart-clone

Organize your project files. Here’s a basic structure:

src/
├── components/
│   ├── Header.js
│   ├── Footer.js
│   ├── Home.js
│   └── ...
├── App.js
└── index.js

Start by creating basic components such as Header, Footer, and a Home.

Home.js

import React from 'react';


const Home = ({ products }) => (
    <main>
   
        <section className="banners mt-2 mt-md-0">
            <div id="bannersCarousel" className="carousel slide" data-bs-ride="carousel">
                <div className="carousel-inner">
                    <div className="carousel-item active">
                        <img src="assets/images/dc989bb97070430a.jpg?q=50"
                            className="d-block w-100" alt="..." />
                    </div>
                    <div className="carousel-item">
                        <img src="assets/images/b212a5700f9e4f1d.jpeg?q=50"
                            className="d-block w-100" alt="..." />
                    </div>
                    <div className="carousel-item">
                        <img src="assets/images/a96670a0535ba0b8.jpg?q=50"
                            className="d-block w-100" alt="..." />
                    </div>
                </div>
                <button className="carousel-control-prev justify-content-start" type="button"
                    data-bs-target="#bannersCarousel" data-bs-slide="prev">
                    <div className="prev-icon">
                        <i className="fa-solid fa-chevron-left fa-xl"></i>
                    </div>
                    <span className="visually-hidden">Previous</span>
                </button>
                <button className="carousel-control-next justify-content-end" type="button"
                    data-bs-target="#bannersCarousel" data-bs-slide="next">
                    <div className="next-icon">
                        <i className="fa-solid fa-chevron-right fa-xl"></i>
                    </div>
                    <span className="visually-hidden">Next</span>
                </button>
            </div>
        </section>

   
            <section className="products">

            
                <div className="electronic-products">
                    <div className="products-container container-fluid p-0">                
                        <div className="category-card">
                            <p className="card-title">Shop for a Cool Summer</p>
                            <button className="btn btn-primary card-btn mt-4">View All</button>
                        </div>
                        <div className="swiper mySwiper">
                            <div className="swiper-wrapper d-flex" id="electronic-products">
                            </div>
                            <div className="swiper-button-next">
                                <div className="next-icon">
                                    <i className="fa-solid fa-chevron-right fa-xl"></i>
                                </div>
                            </div>
                            <div className="swiper-button-prev">
                                <div className="prev-icon">
                                    <i className="fa-solid fa-chevron-left fa-xl"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            
                <div className="sport-products mt-3">
                    <div className="products-container container-fluid p-0">                
                        <div className="category-card">
                            <p className="card-title">Sports, Healthcare & more</p>
                            <button className="btn btn-primary card-btn mt-4">View All</button>
                        </div>
                        <div className="swiper mySwiper">
                            <div className="swiper-wrapper d-flex" id="sport-products">
                            </div>
                            <div className="swiper-button-next">
                                <div className="next-icon">
                                    <i className="fa-solid fa-chevron-right fa-xl"></i>
                                </div>
                            </div>
                            <div className="swiper-button-prev">
                                <div className="prev-icon">
                                    <i className="fa-solid fa-chevron-left fa-xl"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            
                <div className="summer-products mt-3">
                    <div className="products-container container-fluid p-0 ">                
                        <div className="category-card">
                            <p className="card-title">Best Of Electronics</p>
                            <button className="btn btn-primary card-btn mt-4">View All</button>
                        </div>
                        <div className="swiper mySwiper">
                            <div className="swiper-wrapper d-flex" id="summer-products">
                            </div>
                            <div className="swiper-button-next">
                                <div className="next-icon">
                                    <i className="fa-solid fa-chevron-right fa-xl"></i>
                                </div>
                            </div>
                            <div className="swiper-button-prev">
                                <div className="prev-icon">
                                    <i className="fa-solid fa-chevron-left fa-xl"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </section>
</main>
);

export default Home;

Header.js

import React from 'react';

const Header = () => (
    <header>
    <nav className="navbar navbar-expand-lg bg-primary p-0">
        <div className="container-lg">

          
            <button className="navbar-toggler text-white border-0 btn-outline-dark" type="button"
                data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <img src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGIiBoZWlnaHQ9IjM2IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMyAxOGgxOHYtMkgzdjJ6bTAtNWgxOHYtMkgzdjJ6bTAtN3YyaDE4VjZIM3oiLz48L3N2Zz4="
                    alt="" />
            </button>

           
            <a className="navbar-brand explore" href="#">
                <img src="assets/images/flipkart.png" alt="Flipkart" width="75" />
                <p>
                    Explore
                    <span>Plus
                        <img src="assets/images/plus.png" width="10" alt="" srcSet="" /></span>
                </p>
            </a>

            <div className="collapse navbar-collapse bg-primary z-3" id="navbarSupportedContent">
              
                <form className="d-flex w-100" role="search">
                    <div className="input-group">
                        <input className="form-control b-0 br-0" type="search"
                            placeholder="Search for products, brands and more" aria-label="Search" id="searchInp" />
                        <span className="input-group-text bg-white border-0 br-0">
                            <button className="border-0 br-2 bg-white">
                                <svg width="20" height="20" viewBox="0 0 17 18" className=""
                                    xmlns="http://www.w3.org/2000/svg">
                                    <g fill="#2874F1" fillRule="evenodd">
                                        <path className="_34RNph"
                                            d="m11.618 9.897l4.225 4.212c.092.092.101.232.02.313l-1.465 1.46c-.081.081-.221.072-.314-.02l-4.216-4.203">
                                        </path>
                                        <path className="_34RNph"
                                            d="m6.486 10.901c-2.42 0-4.381-1.956-4.381-4.368 0-2.413 1.961-4.369 4.381-4.369 2.42 0 4.381 1.956 4.381 4.369 0 2.413-1.961 4.368-4.381 4.368m0-10.835c-3.582 0-6.486 2.895-6.486 6.467 0 3.572 2.904 6.467 6.486 6.467 3.582 0 6.486-2.895 6.486-6.467 0-3.572-2.904-6.467-6.486-6.467">
                                        </path>
                                    </g>
                                </svg>
                            </button>
                        </span>
                    </div>
                </form>

               
                <ul
                    className="navMenu navbar-nav me-auto mb-2 mb-lg-0 d-flex align-items-center justify-content-around w-100">
                    <li className="nav-item">
                        <a className="btn btn-white nav-link active" aria-current="page" id="loginBtn"
                            href="#">Login</a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#">Become a Seller</a>
                    </li>
                    <li className="nav-item dropdown">
                        <a className="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            More
                        </a>
                        <ul className="dropdown-menu">
                            <li>
                                <a className="dropdown-item" href="#">
                                    <i>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" className=""
                                            viewBox="0 0 12 14">
                                            <g fill="none" fillRule="evenodd">
                                                <path d="M-4-3h20v20H-4z"></path>
                                                <path fill="#2874F1"
                                                    d="M6.17 13.61c-1.183 0-1.922-.723-1.922-1.88H8.09c0 1.157-.74 1.88-1.92 1.88zm4.222-5.028l1.465 1.104v1.07H0v-1.07l1.464-1.104v-2.31h.004c.035-2.54 1.33-4.248 3.447-4.652V.992C4.915.446 5.37 0 5.928 0c.558 0 1.014.446 1.014.992v.628c2.118.404 3.412 2.112 3.446 4.65h.004v2.312z">
                                                </path>
                                            </g>
                                        </svg>
                                    </i>
                                    Notification Preferences
                                </a>
                            </li>
                            <li>
                                <hr className="dropdown-divider" />
                            </li>
                            <li>
                                <a className="dropdown-item" href="#">
                                    <i>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" className=""
                                            viewBox="0 0 14 17">
                                            <g fill="none" fillRule="evenodd">
                                                <path fill="#2874F0" fillRule="nonzero"
                                                    d="M12.25.542H1.75c-.833 0-1.5.675-1.5 1.5v10.5c0 .825.667 1.5 1.5 1.5h3L7 16.292l2.25-2.25h3c.825 0 1.5-.675 1.5-1.5v-10.5c0-.825-.675-1.5-1.5-1.5zm-4.5 12h-1.5v-1.5h1.5v1.5zM9.303 6.73l-.676.69c-.54.547-.877.997-.877 2.122h-1.5v-.375c0-.825.338-1.575.877-2.123l.93-.945c.278-.27.443-.646.443-1.058 0-.825-.675-1.5-1.5-1.5s-1.5.675-1.5 1.5H4c0-1.658 1.342-3 3-3s3 1.342 3 3c0 .66-.27 1.26-.697 1.687z">
                                                </path>
                                            </g>
                                        </svg>
                                    </i>
                                    24x7 Customer Care
                                </a>
                            </li>
                            <li>
                                <hr className="dropdown-divider" />
                            </li>
                            <li>
                                <a className="dropdown-item" href="#">
                                    <i>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" className=""
                                            viewBox="0 0 18 10">
                                            <g fill="none" fillRule="evenodd">
                                                <path fill="#2874F0" fillRule="nonzero"
                                                    d="M12.333 0l1.91 1.908-4.068 4.067-3.333-3.333L.667 8.825 1.842 10l5-5 3.333 3.333 5.25-5.24L17.333 5V0">
                                                </path>
                                            </g>
                                        </svg>
                                    </i>
                                    Advertise
                                </a>
                            </li>
                            <li>
                                <hr className="dropdown-divider" />
                            </li>
                            <li>
                                <a className="dropdown-item" href="#">
                                    <i>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" className=""
                                            viewBox="0 0 12 14">
                                            <g fill="none" fillRule="evenodd">
                                                <path d="M-4-3h20v20H-4z"></path>
                                                <path fill="#2874F0" fillRule="nonzero"
                                                    d="M12 4.94H8.57V0H3.43v4.94H0l6 5.766 6-5.765zM0 12.354V14h12v-1.647H0z">
                                                </path>
                                            </g>
                                        </svg>
                                    </i>
                                    Download
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#">
                            <i>
                                <svg className="V3C5bO" width="14" height="14" viewBox="0 0 16 16"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path className="_1bS9ic"
                                        d="M15.32 2.405H4.887C3 2.405 2.46.805 2.46.805L2.257.21C2.208.085 2.083 0 1.946 0H.336C.1 0-.064.24.024.46l.644 1.945L3.11 9.767c.047.137.175.23.32.23h8.418l-.493 1.958H3.768l.002.003c-.017 0-.033-.003-.05-.003-1.06 0-1.92.86-1.92 1.92s.86 1.92 1.92 1.92c.99 0 1.805-.75 1.91-1.712l5.55.076c.12.922.91 1.636 1.867 1.636 1.04 0 1.885-.844 1.885-1.885 0-.866-.584-1.593-1.38-1.814l2.423-8.832c.12-.433-.206-.86-.655-.86"
                                        fill="#fff"></path>
                                </svg>
                            </i>
                            Cart
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>
);

export default Header;

Footer.js

import React from 'react';

const Footer = () => (
  <footer>
    <p>&copy; 2024 My E-commerce Website</p>
  </footer>
);

export default Footer;

Git Repo

import React, { useState, useEffect } from 'react';
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './components/Home';

const App = () => {
 

  return (
    <div className="App">
      <Header />
        <Home />
      <Footer />
    </div>
  );
};

export default App;

Start the React development server:

npm start

This will launch your application in development mode. By default, it should open a new tab in your browser at http://localhost:3000, displaying your Flipkart clone.

FlipKart Ecommerce Website Clone in React js
FlipKart Ecommerce Website Clone in React js

This is it guys and if you will have any kind of query, suggestions or requirements then feel free to comment below.

Thanks

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.