Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ecommerce-practice #1

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

ecommerce-practice #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15,082 changes: 10,024 additions & 5,058 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

15 changes: 15 additions & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,21 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Redux Commerce</title>
<!-- Font Awesome -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="stylesheet"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel="stylesheet"
/>
<!-- MDB -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.0/mdb.min.css"
rel="stylesheet"
/>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
3 changes: 2 additions & 1 deletion src/.env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
REACT_APP_BASE_URL = https://fakestoreapi.com/
# REACT_APP_BASE_URL = https://fakestoreapi.com/
REACT_APP_BASE_URL = http://localhost:3000/
26 changes: 13 additions & 13 deletions src/Components/Category/Caterogry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
import React from "react";
import cat1 from "../../assests/cat1.webp";
import cat2 from "../../assests/cat2.webp";
import cat3 from "../../assests/cat3.webp";
import cat4 from "../../assests/cat4.webp";
// import cat1 from "../../assests/cat1.webp";
// import cat2 from "../../assests/cat2.webp";
// import cat3 from "../../assests/cat3.webp";
// import cat4 from "../../assests/cat4.webp";
import styles from "./category.module.scss";

const Caterogry = () => {
const categories = [
{
img: cat1,
name: "electronics",
img: "https://www.chanel.com/images//t_one/t_fashion9//b_rgb:F7F7F7,e_brightness:-3/q_auto:good,f_auto,fl_lossy,dpr_1.2/w_1680/butterfly-sunglasses-black-gold-acetate-metal-acetate-metal-packshot-default-a71553x06081s2216-9524096401438.jpg",
name: "eyewear",
id: 1,
},
{
img: cat2,
name: "jewelery",
img: "https://blog.fashionphile.com/wp-content/uploads/2022/05/Blog_AuthvsFakeChanelJ12Watch_Hero.jpg",
name: "watches",
id: 2,
},
{
img: cat3,
name: "men's clothing",
img: "https://www.chanel.com/images//t_one//w_0.51,h_0.51,c_crop/q_auto:good,f_auto,fl_lossy,dpr_1.2/w_1680/bleu-de-chanel-eau-de-parfum-twist-and-spray-3x0-7fl-oz--packshot-default-107300-8822024011806.jpg",
name: "men's",
id: 3,
},
{
img: cat4,
name: "women's clothing",
img: "https://www.chanel.com/images//t_one//w_0.55,h_0.55,c_crop/q_auto:good,f_auto,fl_lossy,dpr_1.2/w_1680/chance-deodorant-spray-3-4fl-oz--packshot-default-126900-8824196038686.jpg",
name: "women's",
id: 4,
},
];
return (
<div className="pt-5 container">
<h3 className="py-2">Shop by Caterogry</h3>
<h3 className="py-2">Caterogry</h3>
<div className={`${styles.categoryWrapper}`}>
{categories.map((Category) => {
return (
Expand Down
1 change: 1 addition & 0 deletions src/Components/Category/category.module.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

24 changes: 20 additions & 4 deletions src/Components/EmptyCart/EmptyCart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,32 @@
import React from "react";
import { useNavigate } from "react-router-dom";
import cart from "../../assests/cart.png";
// import cart from "../../assests/cart.png";
import styles from "./emptycart.module.scss";
import { AiOutlineShopping } from "react-icons/ai";

const EmptyCart = () => {
const navigate = useNavigate();
return (
<div className={styles.container}>
<div className={styles.emptyCart}>
<img src={cart} alt="empty-cart-img" />
<button className="btn btn-primary" onClick={() => navigate("/")}>
Go Back to Add Some Products
{/* <img src={cart} alt="empty-cart-img" /> */}
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjh_hXkwU9ZXSSn68DM3AmAtz8gdSYz4KxiQ&usqp=CAU"
alt="empty-cart-img"
style={{ width: "330px", height: "300px", marginTop: "100px" }}
/>
<h1>
Your Cart is <span style={{ color: "red" }}>Empty</span>!
</h1>
You don’t have any items in your cart.{" "}
<p>Must add items on the cart before you proceed to check out.</p>
<button
className="btn btn-danger"
style={{ marginTop: "20px", borderRadius: "40px", fontSize: "18px" }}
onClick={() => navigate("/")}
>
<AiOutlineShopping style={{ marginBottom: "5px" }} />
RETURN TO SHOP
</button>
</div>
</div>
Expand Down
146 changes: 145 additions & 1 deletion src/Components/Footer/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,151 @@ const Footer = () => {
const year = new Date().getFullYear();
return (
<div className={styles.footer}>
Copyright © {year} - Redux Commerce INC.
<>
<div>
<h2
style={{ textAlign: "center", paddingTop: "15px", color: "white" }}
>
CHANEL
</h2>
{/* Grid container */}
<div className="container p-4">
{/*Grid row*/}
<div className="row">
{/*Grid column*/}
<div className="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 className="text-uppercase">explore chanel.com</h5>
<ul className="list-unstyled mb-0">
<li>
<a href="#!" className="text-light">
Watches
</a>
</li>
<li>
<a href="#!" className="text-light">
Eyewear
</a>
</li>
<li>
<a href="#!" className="text-light">
Fragrance
</a>
</li>
<li>
<a href="#!" className="text-light">
Skincare
</a>
</li>
</ul>
</div>
{/*Grid column*/}
{/*Grid column*/}
<div className="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 className="text-uppercase mb-0">boutique services</h5>
<ul className="list-unstyled">
<li>
<a href="#!" className="text-light">
Store Locator
</a>
</li>
</ul>
</div>
{/*Grid column*/}
{/*Grid column*/}
<div className="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 className="text-uppercase">the house of chanel</h5>
<ul className="list-unstyled mb-0">
<li>
<a href="#" className="text-light">
Report to Society
</a>
</li>
<li>
<a href="#!" className="text-light">
Fighting Counterfeits
</a>
</li>
<li>
<a href="#!" className="text-light">
Financial Results
</a>
</li>
</ul>
</div>
{/*Grid column*/}
{/*Grid column*/}
<div className="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 className="text-uppercase mb-0">online services</h5>
<ul className="list-unstyled">
<li>
<a href="#!" className="text-light">
Careers
</a>
</li>
<li>
<a href="#!" className="text-light">
Privacy
</a>
</li>
<li>
<a href="#!" className="text-light">
Legal
</a>
</li>
<li>
<a href="#!" className="text-light">
FAQ
</a>
</li>
<li>
<a href="#!" className="text-light">
Care & Services
</a>
</li>
<li>
<a href="#!" className="text-light">
Contact Us
</a>
</li>
</ul>
</div>
{/*Grid column*/}
</div>
{/*Grid row*/}
</div>
{/* Grid container */}
</div>
<div style={{ borderTop: "1px solid grey" }}>
{/* Section: Social media */}
<section className="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
{/* Left */}
<div className="me-5 d-none d-lg-block">
<span>Get in touch with us by:</span>
</div>
{/* Left */}
{/* Right */}
<div>
<a href="" className="me-4 text-reset">
<i className="fab fa-instagram" />
</a>
<a href="" className="me-4 text-reset">
<i className="fab fa-facebook-f" />
</a>
<a href="" className="me-4 text-reset">
<i className="fab fa-youtube" />
</a>
<a href="" className="me-4 text-reset">
<i className="fab fa-google" />
</a>
<a href="" className="me-4 text-reset">
<i className="fab fa-twitter" />
</a>
</div>
{/* Right */}
</section>
{/* Section: Social media */}
</div>
</>
</div>
);
};
Expand Down
1 change: 1 addition & 0 deletions src/Components/Footer/footer.module.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

30 changes: 20 additions & 10 deletions src/Components/Footer/footer.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,26 @@
@import "../../styles/global.scss";
@import '~mdb-ui-kit/css/mdb.min.css';

.footer {
background-color: #303435;
// background-color: #303435;
// background-color: #E5E5E5;
background-color: black;
color: $white;
min-height: 60px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
bottom: 0;
position: absolute;
left: 0;
right: 0;
width: 100%;
}

.text-light {
text-decoration: none;
}

.text-light:hover {
text-decoration: underline;
}








20 changes: 16 additions & 4 deletions src/Components/Nav/Naav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ import { useSelector } from "react-redux";
import { NavLink } from "react-router-dom";
import styles from "./naav.module.scss";

import { AiOutlineShoppingCart } from "react-icons/ai";
import { AiOutlineShopping } from "react-icons/ai";
import { AiOutlineStar } from "react-icons/ai";
import Image from "react-bootstrap/Image";

const Naav = () => {
const { cart } = useSelector((state) => state.cart);
Expand All @@ -21,7 +23,12 @@ const Naav = () => {
path: "/about",
},
{
name: "WishList",
// name: "WishList",
name: (
<>
WishList <AiOutlineStar size={23} style={{ marginBottom: "5px" }} />
</>
),
id: 3,
path: "/wishlist",
},
Expand All @@ -32,7 +39,12 @@ const Naav = () => {
<Container>
<Navbar.Brand>
<NavLink to="/" className={`${styles.navLink} text-uppercase`}>
Redux Commerce
{/* <img src="https://www.freepnglogos.com/uploads/chanel-logo-vector-19.jpg" alt="abc" width="500" height="600"> */}
<Image
src="https://freepngimg.com/thumb/chanel/61032-fashion-ai-collection-perfume-cruise-logo-chanel-thumb.png"
style={{ width: "30px", height: "30px", marginBottom: "2px" }}
/>
<b>CHANEL</b>
</NavLink>
</Navbar.Brand>

Expand All @@ -57,7 +69,7 @@ const Naav = () => {
to="/cart"
className={`${styles.navLink} ${styles.cartIcon}`}
>
<AiOutlineShoppingCart size={23} />{" "}
<AiOutlineShopping size={23} />{" "}
<div className={styles.cartLength}>
<h6>{cart?.length}</h6>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/Components/Nav/naav.module.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading