+++++++++++++++ NOTES +++++++++++++++
1.) create new project npm create vite@latest
cd react-ecommerce-website npm install npm run dev
2.) react-router-dom important website with documentation. https://reactrouter.com/6.28.0/start/tutorial
3.) install react-router dom package in your project npm install react-router-dom npm install react-router-dom localforage match-sorter sort-by
4.) go to main.jsx file and paste everything here.
import { createBrowserRouter, RouterProvider, } from "react-router-dom";
const router = createBrowserRouter([ { path: "/", element: , }, ]);
createRoot(document.getElementById('root')).render( )
5.) go to index.css file and delete old css in that file and app.css file also delete old css
6.) Bootstrap setup in this file. npm i [email protected]
7.) React bootstrap set up in your project npm install react-bootstrap bootstrap
8.) install package reactcounter up in your project npm i react-countup Qs. what is benefit of react counterup package displaying statistics or scores that change over time, offering options for duration, easing, and formatting.
The react-counterup package simplifies creating animated number counters in React projects. Key benefits:
Engaging UI: Adds dynamic visuals for metrics or statistics. Easy to Use: Minimal code for professional animations. Customizable: Supports duration, easing effects, and start/end values. Lightweight: Adds minimal overhead to your app. Responsive: Works well on all devices. Time-Saving: Eliminates the need for custom counter logic.
9.) install swiper.js npm install swiper
The SwiperJS package is a powerful tool for implementing touch-friendly sliders and carousels in React projects
- Feature-Rich SwiperJS offers advanced features like:
Responsive sliders: Automatically adapt to different screen sizes.
Touch and gesture support: Swipe navigation for mobile and touch devices.
Lazy loading: Loads images only when needed, improving performance.
Infinite looping: Seamless carousel looping for better user experience.
10.) install proper.js npm i popper.js
Installing the Popper.js package in your React project provides a powerful and reliable way to manage tooltips, popovers, and dropdowns. Here are the key benefits:
Installing the Popper.js package in your React project provides a powerful and reliable way to manage tooltips, popovers, and dropdowns. Here are the key benefits:
-
Precise Positioning Popper.js ensures accurate placement of elements, even in complex layouts or when dealing with edge cases like scrolling or resizing.
-
Dynamic Updates It automatically recalculates positions when the target or viewport changes, ensuring elements stay correctly aligned.
-
Easy Integration Works seamlessly with React libraries like @popperjs/core and UI frameworks (e.g., Bootstrap, Material-UI) to handle positioning logic without custom code.
-
Highly Customizable Offers options to configure:
Placement (top, bottom, left, right, etc.). Offsets, margins, and boundaries. Adaptive behaviors like flipping or preventing overflow. 5. Lightweight and Performant Optimized for performance with minimal impact on your application's speed.
- Supports Complex Scenarios Handles advanced use cases like nested scrolling containers, dynamic content, and responsive popups.
Common Use Cases Tooltips: Position descriptive text on hover or focus. Dropdowns: Align menus with buttons or icons. Modals and Popovers: Manage contextual overlays in your app.
11.) add projects images with the help of gitubh.
12.) go to main.jsx and import that packages
// ## 1. Connect CSS & JS file to main.jsx file import 'swiper/css';
// /_ bootstrap css _/ import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/js/bootstrap.min.js'
// /_ fonts and icons _/ import '././assets/css/icofont.min.css'; import '././assets/css/animate.css' import '././assets/css/style.min.css';
13.) go to public folder and paste favicon.icon here
14.) go to index.html file and change this two thing in your project.
<title>E-commerce Website using React JS</title>15.) go to App.jsx file and check some property of bootstrap its work properly or not 1.) 'text-primary' to give big size of font
2.) 'text-primary fs-4' to give small size of font
3.) 'text-primary m-5' to give margin.
4.) 'text-primary pt-3' to give padding top
5.) 'text-primary pt-3' to give padding bottom
16.) go to src folder and src folder inside create home folder and home folder inside Home.jsx file src folder/home folder /Home.jsx
import React from 'react'
const Home = () => { return (
export default Home
17.) go to main.jsx file and do some change. import Home from "./home/Home.jsx"; import Blog from "./blog/Blog.jsx";
const router = createBrowserRouter([ { path: "/", element: , children: [ {path: "/", element: }, {path: "/blog", element: }, ] }, ]);
18.) go to App.jsx import { Outlet } from 'react-router-dom'
return ( <>
Nav bar )19.) go to src folder and create blog folder and blog folder inside create Blog.jsx
import React from 'react'
const Blog = () => { return (
export default Blog;
20.) go to main.jsx file and do some change. import Home from "./home/Home.jsx"; import Blog from "./blog/Blog.jsx";
const router = createBrowserRouter([ { path: "/", element: , children: [ {path: "/", element: }, {path: "/blog", element: }, ] }, ]);
21.) go to src folder and create components folder and components create file NavItems.jsx src folder/ components folder/ NavItems.jsx
import React from 'react'
const NavItems = () => { return (
export default NavItems;
22.) go to App.jsx file and import NavItems and put inside fregment import NavItems from './components/NavItems'
return ( <> </> )
23.) Design Navbar go to NavItems.jsx
const NavItems = () => { const [menuToggle, setMenuToggle] = useState(false); const [socialToggle, setSocialToggle] = useState(false); const [headerFixed, setHeaderFixed] = useState(false);
// Logic with Header fixed // addevent listener window.addEventListener("scroll", () => { if (window.scrollY > 200) { setHeaderFixed(true); } else { setHeaderFixed(false); } });
return (
<header
className={header-section style-4 ${ headerFixed ? "header-fixed fadeInUp" : "" }}
>
{/* header top start here */}
<div className={header-top d-md-none ${socialToggle ? "open" : ""}}>
{/* header bottom start here */}
<div className="header-bottom">
<div className="container">
<div className="header-wrapper">
{/* logo */}
<div className="logo-search-acte">
<div className="logo">
<Link to={"/"}>
<img src={logo} alt="" />
</Link>
</div>
</div>
{/* menu area */}
<div className="menu-area">
<div className="menu">
<ul className={`lab-ul ${menuToggle ? "active" : ""}`}>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/shop">Shop</Link>
</li>
<li>
<Link to="/blog">Blog</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</div>
{/* sign in & log in */}
<Link to="/sign-up" className="lab-btn me-3 d-none d-md-block">
Create Account
</Link>
<Link to="/login" className="d-none d-md-block">
Log In
</Link>
{/* menu Toggler */}
<div onClick={() => setMenuToggle(!menuToggle)} className={`header-bar d-lg-none ${menuToggle ? "active" : ""}`}>
<span></span>
<span></span>
<span></span>
</div>
{/* social Toggler */}
<div className="ellepsis-bar d-md-none" onClick={() => setSocialToggle(!socialToggle)}>
<i className="icofont-info-square"></i>
</div>
</div>
</div>
</div>
</div>
</header>
); };
export default NavItems;
24.) take icon in this website:- https://icofont.com/
25.) Design Banner in your website:- go to home folder and create Banner.jsx file
import React from 'react'
const Banner = () => { return (
export default Banner;
26.) go to Home.jsx file import Banner from './Banner';
return (
27.) go to Banner.jsx
import React, { useState } from "react"; import productData from "../products.json"; import { Link } from "react-router-dom";
const title = (
); const desc = "We have the largest collection of products"; const bannerList = [ { iconName: "icofont-users-alt-4", text: "1.5 Million Customers", }, { iconName: "icofont-notification", text: "More then 2000 Marchent", }, { iconName: "icofont-globe", text: "Buy Anything Online", }, ];const Banner = () => { const [searchInput, setSearchInput] = useState(""); const [filteredProducts, setfilteredProducts] = useState(productData); // console.log(productData);
// search funtionality const handleSearch = (e) => { const searchTerm = e.target.value; setSearchInput(searchTerm);
// filtering products based on search
const filtered = productData.filter((product) =>
product.name.toLowerCase().includes(searchTerm.toLowerCase())
);
setfilteredProducts(filtered);
};
return (
{desc}
-
{searchInput &&
filteredProducts.map((product, i) => (
-
<Link to={
/shop/${product.id}}>{product.name}
))}
export default Banner;
28.) go to components folder and create SelectedCategory.jsx file
import React from "react";
const SelectedCategory = (select) => { return ( All Categories Electronics Computer Smart Home Automotive Baby Beauty Personal Care Butcher Shop Cafe Charity Church clinic College Conference Construction Corona Virus Corporate Covid19 Digital Products doctors Ecological Education Entertainment Environment Environmental Events Fitness Food Shop Free Gym Halloween health healthcare learnpress Meat Shop medical Medical Prevention Meetup Mobile Apps Music News Nonprofit Onepage Online Course Personal Blog Portfolio pregnancy premium psd Religion Restaurants School SEO Software Startups University Vcard WooCommerce Yoga Magazine Event ); };
export default SelectedCategory;
29.) again go to Banner.jsx file and create all product list in form tag in the starting.
30.) go to home folder inside create HomeCategory.jsx file
import React from "react"; import { Link } from "react-router-dom";
const subTitle = "Choose Any Products"; const title = "Buy Everything with Us"; const btnText = "Get Started Now";
const categoryList = [ { imgUrl: "src/assets/images/category/01.jpg", imgAlt: "category rajibraj91 rajibraj", iconName: "icofont-brand-windows", title: "DSLR Camera", }, { imgUrl: "src/assets/images/category/02.jpg", imgAlt: "category rajibraj91 rajibraj", iconName: "icofont-brand-windows", title: "Shoes", }, { imgUrl: "src/assets/images/category/03.jpg", imgAlt: "category rajibraj91 rajibraj", iconName: "icofont-brand-windows", title: "Photography", }, { imgUrl: "src/assets/images/category/04.jpg", imgAlt: "category rajibraj91 rajibraj", iconName: "icofont-brand-windows", title: "Formal Dress", }, { imgUrl: "src/assets/images/category/05.jpg", imgAlt: "category rajibraj91 rajibraj", iconName: "icofont-brand-windows", title: "Colorful Bags", }, { imgUrl: "src/assets/images/category/06.jpg", imgAlt: "category rajibraj91 rajibraj", iconName: "icofont-brand-windows", title: "Home Decor", }, ];
const HomeCategory = () => { return
{/* section card */}
<div className="section-wrapper">
<div className="row g-4 justify-content-center row-cols-md-3 row-cols-sm-2 row-cols-1">
{
categoryList.map((val, i) => (<div key={i} className="col">
<Link to="/shop" className="category-item">
<div className="category-inner">
{/* image thumbnail */}
<div className="category-thumb">
<img src={val.imgUrl} alt="" />
</div>
{/* content */}
<div className="category-content">
<div className="cate-icon">
<i className={val.iconName}></i>
</div>
<Link to="/shop"><h6>{val.title}</h6></Link>
</div>
</div>
</Link>
</div>))
}
</div>
<div className="text-center mt-5">
<Link to="/shop" className="lab-btn"><span>{btnText}</span></Link>
</div>
</div>
</div>
export default HomeCategory;
31.) go to home folder and create CategoryShowCase.jsx file
32.) go to Home.jsx file import CategoryShowCase from './CategoryShowCase';
const Home = () => { return (
33.)