├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.js ├── Components │ ├── Cart │ │ └── Cart.jsx │ ├── Error │ │ └── Error.jsx │ ├── FiltredProducts │ │ ├── FilteredProducts.jsx │ │ ├── ProductCard.jsx │ │ └── SingleProduct.jsx │ ├── Footer │ │ └── Footer.jsx │ ├── Login │ │ └── Login.jsx │ ├── Main │ │ └── Main.jsx │ ├── Navbar │ │ └── Navbar.jsx │ ├── NavigateButtons │ │ └── NavigateButtons.jsx │ ├── ProductSection │ │ ├── ProductSection.jsx │ │ └── ProductSectionItem.jsx │ └── Slider │ │ └── Slider.jsx ├── app │ └── store.js ├── assets │ ├── data │ │ └── dummyData.jsx │ └── images │ │ ├── bag1.jpg │ │ ├── bag2.jpg │ │ ├── bag3.jpg │ │ ├── bag4.jpg │ │ ├── bag5.jpg │ │ ├── bag6.jpg │ │ ├── bag7.jpg │ │ ├── bag8.jpg │ │ ├── clothes.jpg │ │ ├── dress1.jpg │ │ ├── dress2.jpg │ │ ├── dress3.jpg │ │ ├── dress4.jpg │ │ ├── dress5.jpg │ │ ├── dress6.jpg │ │ ├── dress7.jpg │ │ ├── dress8.jpg │ │ ├── filterSections.png │ │ ├── frontPage.png │ │ ├── hoodie1.jpg │ │ ├── hoodie2.jpg │ │ ├── hoodie3.jpg │ │ ├── hoodie4.jpg │ │ ├── hoodie5.jpg │ │ ├── hoodie6.jpg │ │ ├── hoodie7.jpg │ │ ├── hoodie8.jpg │ │ ├── jacket1.jpg │ │ ├── jacket2.jpg │ │ ├── jacket3.jpg │ │ ├── jacket4.jpg │ │ ├── jacket5.jpg │ │ ├── jacket6.jpg │ │ ├── jacket7.jpg │ │ ├── jacket8.jpg │ │ ├── jeans1.jpg │ │ ├── jeans2.jpg │ │ ├── jeans3.jpg │ │ ├── jeans4.jpg │ │ ├── jeans5.jpg │ │ ├── jeans6.jpg │ │ ├── jeans7.jpg │ │ ├── jeans8.jpg │ │ ├── logo.png │ │ ├── shoe1.jpg │ │ ├── shoe10.jpg │ │ ├── shoe11.jpg │ │ ├── shoe12.jpg │ │ ├── shoe2.jpg │ │ ├── shoe3.jpg │ │ ├── shoe4.jpg │ │ ├── shoe5.jpg │ │ ├── shoe6.jpg │ │ ├── shoe7.jpg │ │ ├── shoe8.jpg │ │ ├── shoe9.jpg │ │ ├── singleProductPage.png │ │ ├── suit1.jpg │ │ ├── suit2.jpg │ │ ├── suit3.jpg │ │ ├── suit4.jpg │ │ ├── suit5.jpg │ │ ├── suit6.jpg │ │ ├── suit7.jpg │ │ ├── suit8.jpg │ │ ├── t-shirt1.jpg │ │ ├── t-shirt2.jpg │ │ ├── t-shirt3.jpg │ │ ├── t-shirt4.jpg │ │ ├── t-shirt5.jpg │ │ ├── t-shirt6.jpg │ │ ├── t-shirt7.jpg │ │ └── t-shirt8.jpg ├── features │ └── slices │ │ ├── authSlice.jsx │ │ ├── cartSlice.jsx │ │ ├── productsSlice.jsx │ │ └── sliderSlice.jsx ├── index.css └── index.js └── tailwind.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![image](src/assets/images/frontPage.png) 2 | ![image](src/assets/images/filterSections.png) 3 | ![image](src/assets/images/singleProductPage.png) 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "redux-store", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@material-tailwind/react": "^1.2.4", 7 | "@reduxjs/toolkit": "^1.9.0", 8 | "@testing-library/jest-dom": "^5.16.5", 9 | "@testing-library/react": "^13.4.0", 10 | "@testing-library/user-event": "^14.4.3", 11 | "react": "^18.2.0", 12 | "react-dom": "^18.2.0", 13 | "react-redux": "^8.0.5", 14 | "react-router-dom": "^6.4.3", 15 | "react-scripts": "5.0.1", 16 | "web-vitals": "^2.1.4" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | }, 42 | "devDependencies": { 43 | "autoprefixer": "^10.4.13", 44 | "postcss": "^8.4.19", 45 | "tailwindcss": "^3.2.4" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React Redux App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.css"; 3 | import Main from "./Components/Main/Main"; 4 | import { BrowserRouter, Routes, Route } from "react-router-dom"; 5 | import FilteredProducts from "./Components/FiltredProducts/FilteredProducts"; 6 | import SingleProduct from "./Components/FiltredProducts/SingleProduct"; 7 | import Login from "./Components/Login/Login"; 8 | import { useSelector } from "react-redux"; 9 | 10 | function App() { 11 | const user = useSelector((state) => state.user.user); 12 | const { authUser } = user; 13 | 14 | return ( 15 |
16 | 17 | 18 | : } 21 | > 22 | 23 | } 26 | > 27 | } 30 | > 31 | 32 | 33 |
34 | ); 35 | } 36 | 37 | export default App; 38 | -------------------------------------------------------------------------------- /src/Components/Cart/Cart.jsx: -------------------------------------------------------------------------------- 1 | import { Fragment, useState } from "react"; 2 | import { 3 | Button, 4 | Dialog, 5 | DialogHeader, 6 | DialogBody, 7 | DialogFooter, 8 | } from "@material-tailwind/react"; 9 | import { Tooltip } from "@material-tailwind/react"; 10 | import { useSelector, useDispatch } from "react-redux"; 11 | import { removeFromCart } from "../../features/slices/cartSlice"; 12 | 13 | const Cart = ({ openModal, setOpen }) => { 14 | const cart = useSelector((state) => state.cart.cart); 15 | const totalPrice = useSelector((state) => state.cart.totalPrice); 16 | 17 | const dispatch = useDispatch(); 18 | return ( 19 |
20 | {cart.length > 0 ? ( 21 | 22 | setOpen(false)} 26 | animate={{ 27 | mount: { scale: 1, y: 0 }, 28 | unmount: { scale: 0.9, y: -100 }, 29 | }} 30 | > 31 | Shopping Bag 32 | 36 | {cart.map((item, index) => { 37 | return ( 38 |
39 |
40 |
41 | {item.name} 46 |
47 |

48 | {item.name} 49 |

50 |
51 |
52 |

53 | {item.text} 54 |

55 |
56 |
57 |
58 |

59 | Selected size:{" "} 60 | {item.size} 61 |

62 |

63 | Selected color:{" "} 64 | 68 |

69 |

70 | Amount: {item.amount} 71 |

72 |

73 | Single Item Price:{" "} 74 | {item.price}$ 75 |

76 |

77 | Total Item Prices:{" "} 78 | {item.totalPrice}$ 79 |

80 |
81 | 85 | 94 | 95 |
96 |
97 |
98 |
99 | ); 100 | })} 101 | 102 | 103 |

104 | Total Price of All Products:{" "} 105 | {totalPrice}$ 106 |

107 | 108 | 109 | 110 | ) : ( 111 | 112 | setOpen(false)} 116 | animate={{ 117 | mount: { scale: 1, y: 0 }, 118 | unmount: { scale: 0.9, y: -100 }, 119 | }} 120 | > 121 | Shopping Bag 122 | 123 |
124 |

125 | Your bag is empty 126 |

127 |

128 | Add some products 129 |

130 |
131 | 132 | 133 | 134 | )} 135 |
136 | ); 137 | }; 138 | 139 | export default Cart; 140 | -------------------------------------------------------------------------------- /src/Components/Error/Error.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Alert } from "@material-tailwind/react"; 3 | 4 | const Error = () => { 5 | return ( 6 |
7 |
8 | 9 | Sorry no products match your filter search ... Clear the filter and 10 | try again 😀. 11 | 12 |
13 |
14 | ); 15 | }; 16 | 17 | export default Error; 18 | -------------------------------------------------------------------------------- /src/Components/FiltredProducts/FilteredProducts.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useParams } from "react-router-dom"; 3 | import { useSelector, useDispatch } from "react-redux"; 4 | import ProductCard from "./ProductCard"; 5 | import { Button } from "@material-tailwind/react"; 6 | import { 7 | Menu, 8 | MenuHandler, 9 | MenuList, 10 | MenuItem, 11 | } from "@material-tailwind/react"; 12 | import Error from "../Error/Error"; 13 | import { 14 | filterProducts, 15 | filterGender, 16 | sortByPrice, 17 | filterByColor, 18 | filterBySize, 19 | } from "../../features/slices/productsSlice"; 20 | 21 | const FilteredProducts = () => { 22 | const products = useSelector((state) => state.products.filteredProducts); 23 | const error = useSelector((state) => state.products.error); 24 | const { type } = useParams(); 25 | const genderButtons = ["male", "female"]; 26 | const colorButtons = [ 27 | "red", 28 | "green", 29 | "purple", 30 | "yellow", 31 | "orange", 32 | "blue", 33 | "black", 34 | "brown", 35 | ]; 36 | const sizeButtons = ["S", "M", "L", "XL"]; 37 | const dispatch = useDispatch(); 38 | 39 | return ( 40 |
41 |
42 |
43 |

44 | {type} 45 |

46 |
47 |
48 | {genderButtons.map((item, index) => { 49 | return ( 50 |
51 | 61 |
62 | ); 63 | })} 64 | 74 | 75 | 76 | 85 | 86 | 87 | {colorButtons.map((item, index) => { 88 | return ( 89 | dispatch(filterByColor(item))} 93 | > 94 | {item} 95 | 96 | ); 97 | })} 98 | 99 | 100 | 101 | 102 | 112 | 113 | 114 | {sizeButtons.map((item, index) => { 115 | return ( 116 | dispatch(filterBySize(item))} 119 | > 120 | {item} 121 | 122 | ); 123 | })} 124 | 125 | 126 |
127 |
128 | 138 |
139 |
140 |
141 | {error ? ( 142 | 143 | ) : ( 144 |
145 | {products 146 | .filter((product) => product.type === type) 147 | .map((product, index) => { 148 | return ( 149 |
150 | 158 |
159 | ); 160 | })} 161 |
162 | )} 163 |
164 |
165 | ); 166 | }; 167 | 168 | export default FilteredProducts; 169 | -------------------------------------------------------------------------------- /src/Components/FiltredProducts/ProductCard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | Card, 4 | CardHeader, 5 | CardBody, 6 | CardFooter, 7 | Typography, 8 | } from "@material-tailwind/react"; 9 | import { useDispatch } from "react-redux"; 10 | import { singleProduct } from "../../features/slices/productsSlice"; 11 | import { Link, useParams } from "react-router-dom"; 12 | 13 | const ProductCard = ({ id, name, text, img, price, colors }) => { 14 | const dispatch = useDispatch(); 15 | const { type } = useParams(); 16 | 17 | return ( 18 | 19 | dispatch(singleProduct(id))}> 20 | 21 | img-blur-shadow 22 | 23 | 24 | 25 | {name} 26 | 27 | {text} 28 | 29 | 30 | {price}$ 31 | 32 | {colors?.map((color, index) => { 33 | return ( 34 | 39 | ); 40 | })} 41 | 42 | 43 | 44 | 45 | ); 46 | }; 47 | 48 | export default ProductCard; 49 | -------------------------------------------------------------------------------- /src/Components/FiltredProducts/SingleProduct.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { useSelector } from "react-redux"; 3 | import { useParams } from "react-router-dom"; 4 | import { Tooltip, Button } from "@material-tailwind/react"; 5 | import { addToCart } from "../../features/slices/cartSlice"; 6 | import { useDispatch } from "react-redux"; 7 | 8 | const SingleProduct = () => { 9 | const product = useSelector((state) => state.products.singleProduct); 10 | const productSize = product[0].size ? product[0].size[0] : ""; 11 | const productColor = product[0].color[0]; 12 | const [size, setSize] = useState(productSize); 13 | const [color, setColor] = useState(productColor); 14 | 15 | const { id } = useParams(); 16 | const dispatch = useDispatch(); 17 | 18 | return ( 19 |
20 | {product 21 | .filter((product) => product.id === id) 22 | .map((item, index) => { 23 | return ( 24 |
25 |
26 | {item.name} 31 |
32 |
33 |
34 |
35 | {item.name} 36 |
37 |

38 | 15% OFF 39 |

40 |

41 | {item.text} 42 |

43 |
44 | {item.size ? ( 45 |
46 | 52 | 67 |
68 | ) : ( 69 |
70 | 76 | 92 |
93 | )} 94 |
95 | 96 |
97 | 103 | 118 |
119 | 120 | 143 | 144 |
145 |
146 |
147 | ); 148 | })} 149 |
150 | ); 151 | }; 152 | 153 | export default SingleProduct; 154 | -------------------------------------------------------------------------------- /src/Components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import logo from "../../assets/images/logo.png"; 3 | 4 | const Footer = () => { 5 | const year = new Date().getFullYear(); 6 | return ( 7 |
8 |
9 |
10 |
11 |
12 |
13 | logo 14 |
15 |
16 |

17 | Copyright {year} page by Marko Web 18 |

19 |
20 |
21 |
22 | ); 23 | }; 24 | 25 | export default Footer; 26 | -------------------------------------------------------------------------------- /src/Components/Login/Login.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { 3 | Card, 4 | CardHeader, 5 | CardBody, 6 | CardFooter, 7 | Typography, 8 | } from "@material-tailwind/react"; 9 | import { Button } from "@material-tailwind/react"; 10 | import { Input } from "@material-tailwind/react"; 11 | import { login } from "../../features/slices/authSlice"; 12 | import { useDispatch } from "react-redux"; 13 | 14 | const Login = () => { 15 | const intitalState = { 16 | name: "", 17 | password: "", 18 | image: "", 19 | }; 20 | const [values, setValues] = useState(intitalState); 21 | const onChange = (e) => { 22 | const { name, value } = e.target; 23 | setValues({ ...values, [name]: value }); 24 | }; 25 | 26 | const dispatch = useDispatch(); 27 | 28 | return ( 29 |
30 | 31 | 36 | 37 | Sign In 38 | 39 | 40 | 41 | 49 | 57 | 65 |
66 | 67 | 68 | 75 | 76 | Image is Optional 77 | 78 | 79 | 80 |
81 | ); 82 | }; 83 | 84 | export default Login; 85 | -------------------------------------------------------------------------------- /src/Components/Main/Main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Navbar from "../Navbar/Navbar"; 3 | import Slider from "../Slider/Slider"; 4 | import NavigateButtons from "../NavigateButtons/NavigateButtons"; 5 | import ProductSection from "../ProductSection/ProductSection"; 6 | import Footer from "../Footer/Footer"; 7 | 8 | const Main = () => { 9 | return ( 10 |
11 | 12 | 13 | 14 | 15 | 16 |
17 | ); 18 | }; 19 | 20 | export default Main; 21 | -------------------------------------------------------------------------------- /src/Components/Navbar/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import logo from "../../assets/images/logo.png"; 3 | import Cart from "../Cart/Cart"; 4 | import { useSelector, useDispatch } from "react-redux"; 5 | import { logout } from "../../features/slices/authSlice"; 6 | import { Avatar } from "@material-tailwind/react"; 7 | import { Tooltip } from "@material-tailwind/react"; 8 | 9 | const Navbar = () => { 10 | const totalAmount = useSelector((state) => state.cart.totalAmount); 11 | const user = useSelector((state) => state.user.user); 12 | const { name, image } = user; 13 | const [open, setOpen] = useState(false); 14 | const handleOpen = () => { 15 | setOpen(true); 16 | }; 17 | const dispatch = useDispatch(); 18 | 19 | return ( 20 | <> 21 |
22 |

23 | Redux Toolkit Time 24 |

25 |
26 |
27 |
28 | store 29 |
30 |
31 |
32 | 40 | 45 | 46 |

47 | Whish List 48 |

49 |
50 |
54 | {totalAmount > 0 ? ( 55 | 56 | {totalAmount} 57 | 58 | ) : ( 59 | 67 | 72 | 73 | )} 74 | 75 |

76 | Shopping bag 77 |

78 |
79 | {open && } 80 |
81 |
82 |
83 | {image && ( 84 | 90 | )} 91 |
dispatch(logout())}> 92 | 93 |

94 | Hi {name.charAt("0").toUpperCase() + name.slice(1)} 95 |

96 | 97 |
98 |
99 |
100 |
101 |
102 |

50& OFF

103 |

104 | Free shipping and returns 105 |

106 |

107 | Diffrent payment methods 108 |

109 |
110 | 111 | ); 112 | }; 113 | 114 | export default Navbar; 115 | -------------------------------------------------------------------------------- /src/Components/NavigateButtons/NavigateButtons.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Button } from "@material-tailwind/react"; 3 | import clothes from "../../assets/images/clothes.jpg"; 4 | import { filterProducts } from "../../features/slices/productsSlice"; 5 | import { useDispatch } from "react-redux"; 6 | import { Link } from "react-router-dom"; 7 | 8 | const NavigateButtons = () => { 9 | const buttons = [ 10 | "Hoodies", 11 | "Dresses", 12 | "Suits", 13 | "Shoes", 14 | "T-Shirts", 15 | "Jeans", 16 | "Jackets", 17 | "Bags", 18 | ]; 19 | 20 | const dispatch = useDispatch(); 21 | 22 | return ( 23 |
24 |
25 | {buttons.map((button, index) => { 26 | return ( 27 |
28 | 29 | 39 | 40 |
41 | ); 42 | })} 43 |
44 |
45 |

46 | SALES UP TO 50% 47 |

48 |
49 |
50 | clothes 55 |
56 |
57 | ); 58 | }; 59 | 60 | export default NavigateButtons; 61 | -------------------------------------------------------------------------------- /src/Components/ProductSection/ProductSection.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { storeData } from "../../assets/data/dummyData"; 3 | import ProductSectionItem from "./ProductSectionItem"; 4 | 5 | const ProductSection = () => { 6 | return ( 7 |
8 |
9 |

10 | SUMMER T-Shirt SALE 30% 11 |

12 |
13 |
14 | {storeData.slice(0, 6).map((product, index) => { 15 | return ( 16 |
17 | 27 |
28 | ); 29 | })} 30 |
31 |
32 | ); 33 | }; 34 | 35 | export default ProductSection; 36 | -------------------------------------------------------------------------------- /src/Components/ProductSection/ProductSectionItem.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | Card, 4 | CardHeader, 5 | CardBody, 6 | CardFooter, 7 | Typography, 8 | Tooltip, 9 | } from "@material-tailwind/react"; 10 | import { Button } from "@material-tailwind/react"; 11 | import { useDispatch } from "react-redux"; 12 | import { addToCart } from "../../features/slices/cartSlice"; 13 | 14 | const ProductSectionItem = ({ 15 | id, 16 | img, 17 | name, 18 | text, 19 | size, 20 | price, 21 | color, 22 | totalPrice, 23 | }) => { 24 | const dispatch = useDispatch(); 25 | 26 | const defaultSize = size[0]; 27 | const defaultColor = color[0]; 28 | 29 | return ( 30 |
31 | 32 | 36 | SALE% 37 | 38 | 39 | {name} 40 | 41 | 42 | 43 | {name} 44 | 45 | 46 | {text} 47 | 48 |
49 | 50 | Size left:{" "} 51 | 52 | {defaultSize} 53 | 54 | 55 | 56 | Color:{" "} 57 | 61 | 62 |
63 | 64 | 65 | 66 | 89 | 90 | 91 | 92 |
93 | ); 94 | }; 95 | 96 | export default ProductSectionItem; 97 | -------------------------------------------------------------------------------- /src/Components/Slider/Slider.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | nextSlide, 4 | prevSlide, 5 | dotSlide, 6 | } from "../../features/slices/sliderSlice"; 7 | import { useSelector, useDispatch } from "react-redux"; 8 | import { sliderData } from "../../assets/data/dummyData"; 9 | 10 | const Slider = () => { 11 | const slideIndex = useSelector((state) => state.slider.value); 12 | const dispatch = useDispatch(); 13 | 14 | return ( 15 |
16 |
17 | {sliderData.map((item) => { 18 | return ( 19 |
27 |
28 | {parseInt(item.id) === slideIndex && ( 29 | shoes 34 | )} 35 |
36 |
37 |

38 | {parseInt(item.id) === slideIndex && item.text} 39 |

40 |
41 |
42 | ); 43 | })} 44 |
45 |
46 | {sliderData.map((dot, index) => { 47 | return ( 48 |
49 |
dispatch(dotSlide(index))} 56 | >
57 |
58 | ); 59 | })} 60 |
61 |
62 | 81 | 100 |
101 |
102 | ); 103 | }; 104 | 105 | export default Slider; 106 | -------------------------------------------------------------------------------- /src/app/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import slideReducer from "../features/slices/sliderSlice"; 3 | import productsReducer from "../features/slices/productsSlice"; 4 | import cartReducer from "../features/slices/cartSlice"; 5 | import authReducer from "../features/slices/authSlice"; 6 | 7 | export const store = configureStore({ 8 | reducer: { 9 | slider: slideReducer, 10 | products: productsReducer, 11 | cart: cartReducer, 12 | user: authReducer, 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /src/assets/data/dummyData.jsx: -------------------------------------------------------------------------------- 1 | import shoe1 from "../images/shoe1.jpg"; 2 | import shoe2 from "../images/shoe2.jpg"; 3 | import shoe3 from "../images/shoe3.jpg"; 4 | import shoe4 from "../images/shoe4.jpg"; 5 | import shoe5 from "../images/shoe5.jpg"; 6 | import shoe6 from "../images/shoe6.jpg"; 7 | import shoe7 from "../images/shoe7.jpg"; 8 | import shoe8 from "../images/shoe8.jpg"; 9 | import shoe9 from "../images/shoe9.jpg"; 10 | import shoe10 from "../images/shoe10.jpg"; 11 | import shoe11 from "../images/shoe11.jpg"; 12 | import shoe12 from "../images/shoe12.jpg"; 13 | import shirt1 from "../images/t-shirt1.jpg"; 14 | import shirt2 from "../images/t-shirt2.jpg"; 15 | import shirt3 from "../images/t-shirt3.jpg"; 16 | import shirt4 from "../images/t-shirt4.jpg"; 17 | import shirt5 from "../images/t-shirt5.jpg"; 18 | import shirt6 from "../images/t-shirt6.jpg"; 19 | import shirt7 from "../images/t-shirt7.jpg"; 20 | import shirt8 from "../images/t-shirt8.jpg"; 21 | import hoodie1 from "../images/hoodie1.jpg"; 22 | import hoodie2 from "../images/hoodie2.jpg"; 23 | import hoodie3 from "../images/hoodie3.jpg"; 24 | import hoodie4 from "../images/hoodie4.jpg"; 25 | import hoodie5 from "../images/hoodie5.jpg"; 26 | import hoodie6 from "../images/hoodie6.jpg"; 27 | import hoodie7 from "../images/hoodie7.jpg"; 28 | import hoodie8 from "../images/hoodie8.jpg"; 29 | import dress1 from "../images/dress1.jpg"; 30 | import dress2 from "../images/dress2.jpg"; 31 | import dress3 from "../images/dress3.jpg"; 32 | import dress4 from "../images/dress4.jpg"; 33 | import dress5 from "../images/dress5.jpg"; 34 | import dress6 from "../images/dress6.jpg"; 35 | import dress7 from "../images/dress7.jpg"; 36 | import dress8 from "../images/dress8.jpg"; 37 | import jeans1 from "../images/jeans1.jpg"; 38 | import jeans2 from "../images/jeans2.jpg"; 39 | import jeans3 from "../images/jeans3.jpg"; 40 | import jeans4 from "../images/jeans4.jpg"; 41 | import jeans5 from "../images/jeans5.jpg"; 42 | import jeans6 from "../images/jeans6.jpg"; 43 | import jeans7 from "../images/jeans7.jpg"; 44 | import jeans8 from "../images/jeans8.jpg"; 45 | import jacket1 from "../images/jacket1.jpg"; 46 | import jacket2 from "../images/jacket2.jpg"; 47 | import jacket3 from "../images/jacket3.jpg"; 48 | import jacket4 from "../images/jacket4.jpg"; 49 | import jacket5 from "../images/jacket5.jpg"; 50 | import jacket6 from "../images/jacket6.jpg"; 51 | import jacket7 from "../images/jacket7.jpg"; 52 | import jacket8 from "../images/jacket8.jpg"; 53 | import bag1 from "../images/bag1.jpg"; 54 | import bag2 from "../images/bag2.jpg"; 55 | import bag3 from "../images/bag3.jpg"; 56 | import bag4 from "../images/bag4.jpg"; 57 | import bag5 from "../images/bag5.jpg"; 58 | import bag6 from "../images/bag6.jpg"; 59 | import bag7 from "../images/bag7.jpg"; 60 | import bag8 from "../images/bag8.jpg"; 61 | import suit1 from "../images/suit1.jpg"; 62 | import suit2 from "../images/suit2.jpg"; 63 | import suit3 from "../images/suit3.jpg"; 64 | import suit4 from "../images/suit4.jpg"; 65 | import suit5 from "../images/suit5.jpg"; 66 | import suit6 from "../images/suit6.jpg"; 67 | import suit7 from "../images/suit7.jpg"; 68 | import suit8 from "../images/suit8.jpg"; 69 | 70 | export const sliderData = [ 71 | { 72 | id: "0", 73 | img: shoe1, 74 | text: "Summers SALE up to 50% OFF what are you wating for", 75 | }, 76 | { 77 | id: "1", 78 | img: shoe2, 79 | text: "AUTUMN is coming, choose what suits you THE BEST", 80 | }, 81 | { 82 | id: "2", 83 | img: shoe3, 84 | text: "Make your feet as comfortable as walking on the beach", 85 | }, 86 | { 87 | id: "3", 88 | img: shoe4, 89 | text: "Choose between basketball and fashion or choose both", 90 | }, 91 | ]; 92 | 93 | export const storeData = [ 94 | { 95 | id: "1", 96 | img: shirt1, 97 | name: "Casual T-Shirt 1", 98 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 99 | type: "T-Shirts", 100 | size: ["XL", "L", "M", "S"], 101 | color: ["black", "gray", "green"], 102 | gender: "male", 103 | price: 45, 104 | }, 105 | { 106 | id: "2", 107 | img: shirt2, 108 | name: "Casual T-Shrit 2", 109 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 110 | type: "T-Shirts", 111 | size: ["M", "L", "XL"], 112 | color: ["black", "red", "brown"], 113 | gender: "male", 114 | price: 55, 115 | }, 116 | { 117 | id: "3", 118 | img: shirt3, 119 | name: "Casual T-Shrit 3", 120 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 121 | type: "T-Shirts", 122 | size: ["L", "XL"], 123 | color: ["brown", "gray", "yellow"], 124 | gender: "female", 125 | price: 75, 126 | }, 127 | { 128 | id: "4", 129 | img: shirt4, 130 | name: "Casual T-Shrit 4", 131 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 132 | type: "T-Shirts", 133 | size: ["M", "L", "XL"], 134 | color: ["gray", "orange", "blue"], 135 | gender: "female", 136 | price: 25, 137 | }, 138 | { 139 | id: "5", 140 | img: shirt5, 141 | name: "Casual T-Shrit 5", 142 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 143 | type: "T-Shirts", 144 | size: ["M", "L", "XL"], 145 | color: ["black", "brown", "blue"], 146 | gender: "female", 147 | price: 15, 148 | }, 149 | { 150 | id: "6", 151 | img: shirt6, 152 | name: "Casual T-Shrit 6", 153 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 154 | type: "T-Shirts", 155 | size: ["M", "L", "XL"], 156 | color: ["gray", "purple", "yellow"], 157 | gender: "female", 158 | price: 25, 159 | }, 160 | { 161 | id: "7", 162 | img: shirt7, 163 | name: "Casual T-Shrit 7", 164 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 165 | type: "T-Shirts", 166 | size: ["M", "L", "XL"], 167 | color: ["black", "orange", "blue"], 168 | gender: "male", 169 | price: 25, 170 | }, 171 | { 172 | id: "8", 173 | img: shirt8, 174 | name: "Casual T-Shrit 8", 175 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 176 | type: "T-Shirts", 177 | size: ["M", "XL"], 178 | color: ["gray", "red", "blue"], 179 | gender: "male", 180 | price: 35, 181 | }, 182 | 183 | { 184 | id: "9", 185 | img: hoodie1, 186 | name: "Casual Hoodie 1", 187 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 188 | type: "Hoodies", 189 | size: ["S", "L", "XL"], 190 | color: ["blue", "red", "green"], 191 | gender: "female", 192 | price: 85, 193 | }, 194 | { 195 | id: "10", 196 | img: hoodie2, 197 | name: "Casual Hoodie 2", 198 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 199 | type: "Hoodies", 200 | size: ["S", "L", "XL"], 201 | color: ["gray", "purple", "black"], 202 | gender: "female", 203 | price: 95, 204 | }, 205 | { 206 | id: "11", 207 | img: hoodie3, 208 | name: "Casual Hoodie 3", 209 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 210 | type: "Hoodies", 211 | size: ["S", "M", "XL"], 212 | color: ["red", "blue", "black"], 213 | gender: "male", 214 | price: 95, 215 | }, 216 | { 217 | id: "12", 218 | img: hoodie4, 219 | name: "Casual Hoodie 4", 220 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 221 | type: "Hoodies", 222 | size: ["S", "XL"], 223 | color: ["gray", "blue", "red"], 224 | gender: "male", 225 | price: 125, 226 | }, 227 | { 228 | id: "13", 229 | img: hoodie5, 230 | name: "Casual Hoodie 5", 231 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 232 | type: "Hoodies", 233 | size: ["S", "XL"], 234 | color: ["gray", "blue", "red"], 235 | gender: "female", 236 | price: 250, 237 | }, 238 | { 239 | id: "14", 240 | img: hoodie6, 241 | name: "Casual Hoodie 6", 242 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 243 | type: "Hoodies", 244 | size: ["S", "XL"], 245 | color: ["gray", "yellow", "blue"], 246 | gender: "male", 247 | price: 125, 248 | }, 249 | { 250 | id: "15", 251 | img: hoodie7, 252 | name: "Casual Hoodie 7", 253 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 254 | type: "Hoodies", 255 | size: ["S", "M", "L", "XL"], 256 | color: ["black", "blue"], 257 | gender: "male", 258 | price: 450, 259 | }, 260 | { 261 | id: "16", 262 | img: hoodie8, 263 | name: "Casual Hoodie 8", 264 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 265 | type: "Hoodies", 266 | size: ["S", "M", "L", "XL"], 267 | color: ["green", "yellow", "red"], 268 | gender: "female", 269 | price: 355, 270 | }, 271 | 272 | { 273 | id: "17", 274 | img: shoe5, 275 | name: "Casual Shoes 1", 276 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 277 | type: "Shoes", 278 | size: ["40", "42", "44", "46"], 279 | color: ["black", "gray"], 280 | gender: "male", 281 | price: 200, 282 | }, 283 | { 284 | id: "18", 285 | img: shoe6, 286 | name: "Casual Shoes 2", 287 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 288 | type: "Shoes", 289 | size: ["40", "42", "44", "46"], 290 | color: ["brown", "gray"], 291 | gender: "female", 292 | price: 250, 293 | }, 294 | { 295 | id: "19", 296 | img: shoe7, 297 | name: "Casual Shoes 3", 298 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 299 | type: "Shoes", 300 | size: ["36", "38", "40", "42"], 301 | color: ["black", "gray", "blue"], 302 | gender: "female", 303 | price: 685, 304 | }, 305 | { 306 | id: "20", 307 | img: shoe8, 308 | name: "Casual Shoes 4", 309 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 310 | type: "Shoes", 311 | size: ["36", "38", "40", "42"], 312 | color: ["black", "gray"], 313 | gender: "male", 314 | price: 255, 315 | }, 316 | { 317 | id: "21", 318 | img: shoe9, 319 | name: "Casual Shoes 5", 320 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 321 | type: "Shoes", 322 | size: ["36", "38", "40", "42"], 323 | color: ["purple", "gray", "black"], 324 | gender: "male", 325 | price: 355, 326 | }, 327 | { 328 | id: "22", 329 | img: shoe10, 330 | name: "Casual Shoes 6", 331 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 332 | type: "Shoes", 333 | size: ["36", "38", "40", "42"], 334 | color: ["purple", "gray", "black"], 335 | gender: "male", 336 | price: 200, 337 | }, 338 | { 339 | id: "23", 340 | img: shoe11, 341 | name: "Casual Shoes 7", 342 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 343 | type: "Shoes", 344 | size: ["36", "38", "40", "42"], 345 | color: ["purple", "green", "black"], 346 | gender: "male", 347 | price: 100, 348 | }, 349 | { 350 | id: "24", 351 | img: shoe12, 352 | name: "Casual Shoes 8", 353 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 354 | type: "Shoes", 355 | size: ["36", "38", "40", "42"], 356 | color: ["purple", "green", "black"], 357 | gender: "male", 358 | price: 135, 359 | }, 360 | { 361 | id: "25", 362 | img: dress1, 363 | name: "Casual Dress 1", 364 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 365 | type: "Dresses", 366 | size: ["L", "XL"], 367 | color: ["purple", "blue", "gray"], 368 | gender: "female", 369 | price: 355, 370 | }, 371 | { 372 | id: "26", 373 | img: dress2, 374 | name: "Casual Dress 2", 375 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 376 | type: "Dresses", 377 | size: ["S", "M", "XL"], 378 | color: ["black", "gray", "green"], 379 | gender: "female", 380 | price: 255, 381 | }, 382 | { 383 | id: "27", 384 | img: dress3, 385 | name: "Casual Dress 3", 386 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 387 | type: "Dresses", 388 | size: ["S", "M", "XL"], 389 | color: ["purple", "blue", "red"], 390 | gender: "female", 391 | price: 65, 392 | }, 393 | { 394 | id: "28", 395 | img: dress4, 396 | name: "Casual Dress 4", 397 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 398 | type: "Dresses", 399 | size: ["S", "L", "XL"], 400 | color: ["yellow", "blue", "orange"], 401 | gender: "female", 402 | price: 185, 403 | }, 404 | { 405 | id: "29", 406 | img: dress5, 407 | name: "Casual Dress 5", 408 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 409 | type: "Dresses", 410 | size: ["S", "L", "XL"], 411 | color: ["yellow", "orange"], 412 | gender: "female", 413 | price: 555, 414 | }, 415 | { 416 | id: "30", 417 | img: dress6, 418 | name: "Casual Dress 6", 419 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 420 | type: "Dresses", 421 | size: ["S", "M"], 422 | color: ["yellow", "blue", "black"], 423 | gender: "female", 424 | price: 345, 425 | }, 426 | { 427 | id: "31", 428 | img: dress7, 429 | name: "Casual Dress 7", 430 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 431 | type: "Dresses", 432 | size: ["S", "M"], 433 | color: ["orange", "blue", "black"], 434 | gender: "female", 435 | price: 345, 436 | }, 437 | { 438 | id: "32", 439 | img: dress8, 440 | name: "Casual Dress 8", 441 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 442 | type: "Dresses", 443 | size: ["M", "L"], 444 | color: ["brown", "blue", "red"], 445 | gender: "female", 446 | price: 685, 447 | }, 448 | { 449 | id: "33", 450 | img: jeans1, 451 | name: "Casual Jeans 1", 452 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 453 | type: "Jeans", 454 | size: ["S", "M", "L"], 455 | color: ["blue", "black"], 456 | gender: "male", 457 | price: 55, 458 | }, 459 | { 460 | id: "34", 461 | img: jeans2, 462 | name: "Casual Jeans 2", 463 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 464 | type: "Jeans", 465 | size: ["S", "M"], 466 | color: ["blue", "black"], 467 | gender: "female", 468 | price: 75, 469 | }, 470 | { 471 | id: "35", 472 | img: jeans3, 473 | name: "Casual Jeans 3", 474 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 475 | type: "Jeans", 476 | size: ["M", "L", "XL"], 477 | color: ["blue", "black"], 478 | gender: "male", 479 | price: 95, 480 | }, 481 | { 482 | id: "36", 483 | img: jeans4, 484 | name: "Casual Jeans 4", 485 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 486 | type: "Jeans", 487 | size: ["M", "L", "XL"], 488 | color: ["blue", "black"], 489 | gender: "female", 490 | price: 100, 491 | }, 492 | { 493 | id: "37", 494 | img: jeans5, 495 | name: "Casual Jeans 5", 496 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 497 | type: "Jeans", 498 | size: ["M", "L", "XL"], 499 | color: ["blue", "black"], 500 | gender: "female", 501 | price: 200, 502 | }, 503 | { 504 | id: "37", 505 | img: jeans6, 506 | name: "Casual Jeans 6", 507 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 508 | type: "Jeans", 509 | size: ["S", "L", "XL"], 510 | color: ["blue", "black"], 511 | gender: "female", 512 | price: 200, 513 | }, 514 | { 515 | id: "38", 516 | img: jeans7, 517 | name: "Casual Jeans 7", 518 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 519 | type: "Jeans", 520 | size: ["M", "L", "XL"], 521 | color: ["blue", "black"], 522 | gender: "male", 523 | price: 180, 524 | }, 525 | { 526 | id: "39", 527 | img: jeans8, 528 | name: "Casual Jeans 8", 529 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 530 | type: "Jeans", 531 | size: ["M", "L", "XL"], 532 | color: ["blue", "black"], 533 | gender: "male", 534 | price: 160, 535 | }, 536 | { 537 | id: "40", 538 | img: jacket1, 539 | name: "Casual Jacket 1", 540 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 541 | type: "Jackets", 542 | size: ["M", "L", "XL"], 543 | color: ["black", "blue"], 544 | gender: "male", 545 | price: 400, 546 | }, 547 | { 548 | id: "41", 549 | img: jacket2, 550 | name: "Casual Jacket 2", 551 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 552 | type: "Jackets", 553 | size: ["S", "L", "XL"], 554 | color: ["gray", "brown"], 555 | gender: "male", 556 | price: 255, 557 | }, 558 | { 559 | id: "42", 560 | img: jacket3, 561 | name: "Casual Jacket 3", 562 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 563 | type: "Jackets", 564 | size: ["S", "M"], 565 | color: ["gray", "brown"], 566 | gender: "male", 567 | price: 300, 568 | }, 569 | { 570 | id: "43", 571 | img: jacket4, 572 | name: "Casual Jacket 4", 573 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 574 | type: "Jackets", 575 | size: ["S", "M", "L"], 576 | color: ["gray", "brown"], 577 | gender: "male", 578 | price: 185, 579 | }, 580 | { 581 | id: "44", 582 | img: jacket5, 583 | name: "Casual Jacket 5", 584 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 585 | type: "Jackets", 586 | size: ["S", "M", "L"], 587 | color: ["gray", "brown"], 588 | gender: "female", 589 | price: 185, 590 | }, 591 | { 592 | id: "45", 593 | img: jacket6, 594 | name: "Casual Jacket 6", 595 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 596 | type: "Jackets", 597 | size: ["S", "M", "XL"], 598 | color: ["gray", "brown", "black"], 599 | gender: "male", 600 | price: 285, 601 | }, 602 | { 603 | id: "46", 604 | img: jacket7, 605 | name: "Casual Jacket 7", 606 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 607 | type: "Jackets", 608 | size: ["S", "M", "XL"], 609 | color: ["brown", "black"], 610 | gender: "female", 611 | price: 425, 612 | }, 613 | { 614 | id: "47", 615 | img: jacket8, 616 | name: "Casual Jacket 8", 617 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 618 | type: "Jackets", 619 | size: ["M", "L", "XL"], 620 | color: ["yellow", "orange", "blue"], 621 | gender: "female", 622 | price: 335, 623 | }, 624 | { 625 | id: "48", 626 | img: bag1, 627 | name: "Casual Bag 1", 628 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 629 | type: "Bags", 630 | color: ["black", "blue", "red"], 631 | gender: "female", 632 | price: 500, 633 | }, 634 | { 635 | id: "49", 636 | img: bag2, 637 | name: "Casual Bag 2", 638 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 639 | type: "Bags", 640 | color: ["green", "red", "blue"], 641 | gender: "male", 642 | price: 85, 643 | }, 644 | { 645 | id: "50", 646 | img: bag3, 647 | name: "Casual Bag 3", 648 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 649 | type: "Bags", 650 | color: ["brown", "blue", "orange"], 651 | gender: "female", 652 | price: 200, 653 | }, 654 | { 655 | id: "51", 656 | img: bag4, 657 | name: "Casual Bag 4", 658 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 659 | type: "Bags", 660 | color: ["brown", "blue", "orange"], 661 | gender: "female", 662 | price: 25, 663 | }, 664 | { 665 | id: "52", 666 | img: bag5, 667 | name: "Casual Bag 5", 668 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 669 | type: "Bags", 670 | color: ["yellow", "blue", "black"], 671 | gender: "female", 672 | price: 40, 673 | }, 674 | { 675 | id: "53", 676 | img: bag6, 677 | name: "Casual Bag 6", 678 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 679 | type: "Bags", 680 | color: ["blue", "black", "orange"], 681 | gender: "female", 682 | price: 400, 683 | }, 684 | { 685 | id: "54", 686 | img: bag7, 687 | name: "Casual Bag 7", 688 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 689 | type: "Bags", 690 | color: ["blue", "black", "orange"], 691 | gender: "female", 692 | price: 355, 693 | }, 694 | { 695 | id: "55", 696 | img: bag8, 697 | name: "Casual Bag 8", 698 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 699 | type: "Bags", 700 | color: ["blue", "green", "red"], 701 | gender: "female", 702 | price: 100, 703 | }, 704 | { 705 | id: "56", 706 | img: suit1, 707 | name: "Casual Suit 1", 708 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 709 | type: "Suits", 710 | size: ["S", "M", "L"], 711 | color: ["black", "gray", "orange"], 712 | gender: "male", 713 | price: 300, 714 | }, 715 | { 716 | id: "57", 717 | img: suit2, 718 | name: "Casual Suit 2", 719 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 720 | type: "Suits", 721 | size: ["S", "M", "L"], 722 | color: ["purple", "orange", "gray"], 723 | gender: "male", 724 | price: 400, 725 | }, 726 | { 727 | id: "58", 728 | img: suit3, 729 | name: "Casual Suit 3", 730 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 731 | type: "Suits", 732 | size: ["M", "L", "XL"], 733 | color: ["purple", "orange", "gray"], 734 | gender: "male", 735 | price: 200, 736 | }, 737 | { 738 | id: "59", 739 | img: suit4, 740 | name: "Casual Suit 4", 741 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 742 | type: "Suits", 743 | size: ["L", "XL"], 744 | color: ["brown", "orange", "black"], 745 | gender: "male", 746 | price: 600, 747 | }, 748 | { 749 | id: "60", 750 | img: suit5, 751 | name: "Casual Suit 5", 752 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 753 | type: "Suits", 754 | size: ["L", "XL"], 755 | color: ["black", "blue", "red"], 756 | gender: "male", 757 | price: 750, 758 | }, 759 | { 760 | id: "61", 761 | img: suit6, 762 | name: "Casual Suit 6", 763 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 764 | type: "Suits", 765 | size: ["S", "M"], 766 | color: ["brown", "orange", "black"], 767 | gender: "female", 768 | price: 385, 769 | }, 770 | { 771 | id: "62", 772 | img: suit7, 773 | name: "Casual Suit 7", 774 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 775 | type: "Suits", 776 | size: ["L", "XL"], 777 | color: ["red", "blue", "black"], 778 | gender: "male", 779 | price: 700, 780 | }, 781 | { 782 | id: "63", 783 | img: suit8, 784 | name: "Casual Suit 8", 785 | text: "Fashion never stops. There is always the new project, the new opportunity. The important thing is to take your time and not get stressed. I just want to do what I do.", 786 | type: "Suits", 787 | size: ["S", "M", "XL"], 788 | color: ["blue", "green", "brown"], 789 | gender: "male", 790 | price: 550, 791 | }, 792 | ]; 793 | -------------------------------------------------------------------------------- /src/assets/images/bag1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/bag1.jpg -------------------------------------------------------------------------------- /src/assets/images/bag2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/bag2.jpg -------------------------------------------------------------------------------- /src/assets/images/bag3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/bag3.jpg -------------------------------------------------------------------------------- /src/assets/images/bag4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/bag4.jpg -------------------------------------------------------------------------------- /src/assets/images/bag5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/bag5.jpg -------------------------------------------------------------------------------- /src/assets/images/bag6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/bag6.jpg -------------------------------------------------------------------------------- /src/assets/images/bag7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/bag7.jpg -------------------------------------------------------------------------------- /src/assets/images/bag8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/bag8.jpg -------------------------------------------------------------------------------- /src/assets/images/clothes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/clothes.jpg -------------------------------------------------------------------------------- /src/assets/images/dress1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/dress1.jpg -------------------------------------------------------------------------------- /src/assets/images/dress2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/dress2.jpg -------------------------------------------------------------------------------- /src/assets/images/dress3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/dress3.jpg -------------------------------------------------------------------------------- /src/assets/images/dress4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/dress4.jpg -------------------------------------------------------------------------------- /src/assets/images/dress5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/dress5.jpg -------------------------------------------------------------------------------- /src/assets/images/dress6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/dress6.jpg -------------------------------------------------------------------------------- /src/assets/images/dress7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/dress7.jpg -------------------------------------------------------------------------------- /src/assets/images/dress8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/dress8.jpg -------------------------------------------------------------------------------- /src/assets/images/filterSections.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/filterSections.png -------------------------------------------------------------------------------- /src/assets/images/frontPage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/frontPage.png -------------------------------------------------------------------------------- /src/assets/images/hoodie1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/hoodie1.jpg -------------------------------------------------------------------------------- /src/assets/images/hoodie2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/hoodie2.jpg -------------------------------------------------------------------------------- /src/assets/images/hoodie3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/hoodie3.jpg -------------------------------------------------------------------------------- /src/assets/images/hoodie4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/hoodie4.jpg -------------------------------------------------------------------------------- /src/assets/images/hoodie5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/hoodie5.jpg -------------------------------------------------------------------------------- /src/assets/images/hoodie6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/hoodie6.jpg -------------------------------------------------------------------------------- /src/assets/images/hoodie7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/hoodie7.jpg -------------------------------------------------------------------------------- /src/assets/images/hoodie8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/hoodie8.jpg -------------------------------------------------------------------------------- /src/assets/images/jacket1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/jacket1.jpg -------------------------------------------------------------------------------- /src/assets/images/jacket2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/jacket2.jpg -------------------------------------------------------------------------------- /src/assets/images/jacket3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/jacket3.jpg -------------------------------------------------------------------------------- /src/assets/images/jacket4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/jacket4.jpg -------------------------------------------------------------------------------- /src/assets/images/jacket5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/jacket5.jpg -------------------------------------------------------------------------------- /src/assets/images/jacket6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/jacket6.jpg -------------------------------------------------------------------------------- /src/assets/images/jacket7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/jacket7.jpg -------------------------------------------------------------------------------- /src/assets/images/jacket8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/jacket8.jpg -------------------------------------------------------------------------------- /src/assets/images/jeans1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/jeans1.jpg -------------------------------------------------------------------------------- /src/assets/images/jeans2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/jeans2.jpg -------------------------------------------------------------------------------- /src/assets/images/jeans3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/jeans3.jpg -------------------------------------------------------------------------------- /src/assets/images/jeans4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/jeans4.jpg -------------------------------------------------------------------------------- /src/assets/images/jeans5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/jeans5.jpg -------------------------------------------------------------------------------- /src/assets/images/jeans6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/jeans6.jpg -------------------------------------------------------------------------------- /src/assets/images/jeans7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/jeans7.jpg -------------------------------------------------------------------------------- /src/assets/images/jeans8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/jeans8.jpg -------------------------------------------------------------------------------- /src/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/logo.png -------------------------------------------------------------------------------- /src/assets/images/shoe1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/shoe1.jpg -------------------------------------------------------------------------------- /src/assets/images/shoe10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/shoe10.jpg -------------------------------------------------------------------------------- /src/assets/images/shoe11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/shoe11.jpg -------------------------------------------------------------------------------- /src/assets/images/shoe12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/shoe12.jpg -------------------------------------------------------------------------------- /src/assets/images/shoe2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/shoe2.jpg -------------------------------------------------------------------------------- /src/assets/images/shoe3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/shoe3.jpg -------------------------------------------------------------------------------- /src/assets/images/shoe4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/shoe4.jpg -------------------------------------------------------------------------------- /src/assets/images/shoe5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/shoe5.jpg -------------------------------------------------------------------------------- /src/assets/images/shoe6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/shoe6.jpg -------------------------------------------------------------------------------- /src/assets/images/shoe7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/shoe7.jpg -------------------------------------------------------------------------------- /src/assets/images/shoe8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/shoe8.jpg -------------------------------------------------------------------------------- /src/assets/images/shoe9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/shoe9.jpg -------------------------------------------------------------------------------- /src/assets/images/singleProductPage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/singleProductPage.png -------------------------------------------------------------------------------- /src/assets/images/suit1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/suit1.jpg -------------------------------------------------------------------------------- /src/assets/images/suit2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/suit2.jpg -------------------------------------------------------------------------------- /src/assets/images/suit3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/suit3.jpg -------------------------------------------------------------------------------- /src/assets/images/suit4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/suit4.jpg -------------------------------------------------------------------------------- /src/assets/images/suit5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/suit5.jpg -------------------------------------------------------------------------------- /src/assets/images/suit6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/suit6.jpg -------------------------------------------------------------------------------- /src/assets/images/suit7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/suit7.jpg -------------------------------------------------------------------------------- /src/assets/images/suit8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/suit8.jpg -------------------------------------------------------------------------------- /src/assets/images/t-shirt1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/t-shirt1.jpg -------------------------------------------------------------------------------- /src/assets/images/t-shirt2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/t-shirt2.jpg -------------------------------------------------------------------------------- /src/assets/images/t-shirt3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/t-shirt3.jpg -------------------------------------------------------------------------------- /src/assets/images/t-shirt4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/t-shirt4.jpg -------------------------------------------------------------------------------- /src/assets/images/t-shirt5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/t-shirt5.jpg -------------------------------------------------------------------------------- /src/assets/images/t-shirt6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/t-shirt6.jpg -------------------------------------------------------------------------------- /src/assets/images/t-shirt7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/t-shirt7.jpg -------------------------------------------------------------------------------- /src/assets/images/t-shirt8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkoWebDev/Ecommerce-Redux-Toolkit-/0799b01e0472b7b01efe9ed5b45a824962efe9c0/src/assets/images/t-shirt8.jpg -------------------------------------------------------------------------------- /src/features/slices/authSlice.jsx: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | export const authSlice = createSlice({ 4 | name: "auth", 5 | initialState: { 6 | user: JSON.parse(sessionStorage.getItem("authUser")) || { 7 | name: "", 8 | password: "", 9 | image: "", 10 | authUser: false, 11 | }, 12 | }, 13 | reducers: { 14 | login(state, action) { 15 | const userId = action.payload; 16 | const userValidation = /^[A-Za-z]{4,10}$/i.test(userId.name); 17 | const passwordValidation = 18 | /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{4,10}$/i.test( 19 | userId.password 20 | ); 21 | state.user = userId; 22 | if (!userValidation || !passwordValidation) { 23 | state.user.authUser = false; 24 | } else { 25 | state.user.authUser = true; 26 | const saveState = JSON.stringify(userId); 27 | sessionStorage.setItem("authUser", saveState); 28 | } 29 | }, 30 | logout(state) { 31 | state.user = { 32 | name: "", 33 | password: "", 34 | image: "", 35 | authUser: false, 36 | }; 37 | sessionStorage.clear(); 38 | }, 39 | }, 40 | }); 41 | 42 | export const { login, logout } = authSlice.actions; 43 | export default authSlice.reducer; 44 | -------------------------------------------------------------------------------- /src/features/slices/cartSlice.jsx: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | export const cartSlice = createSlice({ 4 | name: "cart", 5 | initialState: { 6 | cart: [], 7 | amount: 0, 8 | totalAmount: 0, 9 | totalPrice: 0, 10 | }, 11 | reducers: { 12 | addToCart(state, action) { 13 | const productId = action.payload; 14 | try { 15 | const exist = state.cart.find( 16 | (product) => 17 | product.id === productId.id && 18 | product.size === productId.size && 19 | product.color === productId.color 20 | ); 21 | if (exist) { 22 | exist.amount++; 23 | exist.totalPrice += productId.price; 24 | state.totalAmount++; 25 | state.totalPrice += productId.price; 26 | } else { 27 | state.cart.push({ 28 | id: productId.id, 29 | price: productId.price, 30 | size: productId.size, 31 | amount: 1, 32 | img: productId.img, 33 | totalPrice: productId.price, 34 | name: productId.name, 35 | text: productId.text, 36 | color: productId.color, 37 | }); 38 | state.totalAmount++; 39 | state.totalPrice += productId.price; 40 | } 41 | } catch (err) { 42 | return err; 43 | } 44 | }, 45 | removeFromCart(state, action) { 46 | const productId = action.payload; 47 | try { 48 | const exist = state.cart.find( 49 | (product) => 50 | product.id === productId.id && 51 | product.size === productId.size && 52 | product.color === productId.color 53 | ); 54 | if (exist.amount === 1) { 55 | state.cart = state.cart.filter( 56 | (product) => 57 | product.id !== productId.id || 58 | product.size !== productId.size || 59 | product.color !== productId.color 60 | ); 61 | state.totalAmount--; 62 | state.totalPrice -= productId.price; 63 | } else { 64 | exist.amount--; 65 | exist.totalPrice -= productId.price; 66 | state.totalAmount--; 67 | state.totalPrice -= productId.price; 68 | } 69 | } catch (err) { 70 | return err; 71 | } 72 | }, 73 | }, 74 | }); 75 | 76 | export const { addToCart, removeFromCart } = cartSlice.actions; 77 | export default cartSlice.reducer; 78 | -------------------------------------------------------------------------------- /src/features/slices/productsSlice.jsx: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | import { storeData } from "../../assets/data/dummyData"; 3 | 4 | export const productSlice = createSlice({ 5 | name: "products", 6 | initialState: { 7 | filteredProducts: 8 | JSON.parse(sessionStorage.getItem("filteredData")) || storeData, 9 | singleProduct: 10 | JSON.parse(sessionStorage.getItem("singleProduct")) || storeData, 11 | error: false, 12 | }, 13 | reducers: { 14 | filterProducts(state, action) { 15 | try { 16 | const filter = storeData.filter( 17 | (product) => product.type === action.payload 18 | ); 19 | state.filteredProducts = filter; 20 | state.error = false; 21 | const savedState = JSON.stringify(filter); 22 | sessionStorage.setItem("filteredData", savedState); 23 | } catch (err) { 24 | return err; 25 | } 26 | }, 27 | singleProduct(state, action) { 28 | try { 29 | const oneProduct = state.filteredProducts.filter( 30 | (product) => product.id === action.payload 31 | ); 32 | state.singleProduct = oneProduct; 33 | const savedState = JSON.stringify(oneProduct); 34 | sessionStorage.setItem("singleProduct", savedState); 35 | } catch (err) { 36 | return err; 37 | } 38 | }, 39 | filterGender(state, action) { 40 | try { 41 | const gender = state.filteredProducts.filter( 42 | (product) => product.gender === action.payload 43 | ); 44 | state.error = false; 45 | state.filteredProducts = gender; 46 | const oneGenderType = gender.length > 0; 47 | if (oneGenderType) { 48 | state.error = false; 49 | const saveState = JSON.stringify(gender); 50 | sessionStorage.setItem("filteredData", saveState); 51 | } else { 52 | state.error = true; 53 | state.filteredProducts = []; 54 | } 55 | } catch (err) { 56 | return err; 57 | } 58 | }, 59 | sortByPrice(state) { 60 | try { 61 | const price = state.filteredProducts.sort((a, b) => 62 | a.price > b.price ? -1 : 1 63 | ); 64 | state.filteredProducts = price; 65 | let count = price.length; 66 | if (count > 1) { 67 | const noError = false; 68 | state.error = noError; 69 | if (!noError) { 70 | state.filteredProducts = price; 71 | const saveState = JSON.stringify(price); 72 | sessionStorage.setItem("filteredData", saveState); 73 | } 74 | } else { 75 | state.error = true; 76 | state.filteredProducts = []; 77 | } 78 | } catch (err) { 79 | return err; 80 | } 81 | }, 82 | filterByColor(state, action) { 83 | try { 84 | const color = state.filteredProducts.filter((product) => 85 | product.color.includes(action.payload) 86 | ); 87 | state.error = false; 88 | state.filteredProducts = color; 89 | if (color.length <= 0) { 90 | state.error = true; 91 | state.filteredProducts = []; 92 | } else { 93 | state.error = false; 94 | state.filteredProducts = color; 95 | const saveState = JSON.stringify(color); 96 | sessionStorage.setItem("filteredData", saveState); 97 | } 98 | } catch (err) { 99 | return err; 100 | } 101 | }, 102 | filterBySize(state, action) { 103 | try { 104 | const size = state.filteredProducts.filter((product) => 105 | product.size.includes(action.payload) 106 | ); 107 | state.error = false; 108 | state.filteredProducts = size; 109 | if (size.length <= 0) { 110 | state.error = true; 111 | state.filteredProducts = []; 112 | } else { 113 | state.error = false; 114 | state.filteredProducts = size; 115 | const saveState = JSON.stringify(size); 116 | sessionStorage.setItem("filteredData", saveState); 117 | } 118 | } catch (err) { 119 | return err; 120 | } 121 | }, 122 | }, 123 | }); 124 | 125 | export const { 126 | filterProducts, 127 | singleProduct, 128 | filterGender, 129 | sortByPrice, 130 | filterByColor, 131 | filterBySize, 132 | } = productSlice.actions; 133 | export default productSlice.reducer; 134 | -------------------------------------------------------------------------------- /src/features/slices/sliderSlice.jsx: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | import { sliderData } from "../../assets/data/dummyData"; 3 | 4 | export const sliderSlice = createSlice({ 5 | name: "slider", 6 | initialState: { 7 | value: 0, 8 | length: sliderData.length, 9 | }, 10 | reducers: { 11 | nextSlide(state, action) { 12 | state.value = action.payload > state.length - 1 ? 0 : action.payload; 13 | }, 14 | prevSlide(state, action) { 15 | state.value = action.payload < 0 ? state.length - 1 : action.payload; 16 | }, 17 | dotSlide(state, action) { 18 | const slide = action.payload; 19 | state.value = slide; 20 | }, 21 | }, 22 | }); 23 | 24 | export const { nextSlide, prevSlide, dotSlide } = sliderSlice.actions; 25 | export default sliderSlice.reducer; 26 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); 2 | 3 | @tailwind base; 4 | @tailwind components; 5 | @tailwind utilities; 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import { Provider } from 'react-redux'; 4 | import { store } from './app/store'; 5 | import App from './App'; 6 | 7 | import './index.css'; 8 | 9 | const container = document.getElementById('root'); 10 | const root = createRoot(container); 11 | 12 | root.render( 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | 20 | 21 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | const withMT = require("@material-tailwind/react/utils/withMT"); 2 | 3 | module.exports = withMT({ 4 | content: ["./src/**/*.{js,jsx,ts,tsx}"], 5 | theme: { 6 | extend: { 7 | fontFamily: { 8 | inter: ["Inter", "sans-serif"], 9 | }, 10 | }, 11 | }, 12 | plugins: [], 13 | }); 14 | --------------------------------------------------------------------------------