├── public └── logo1.png ├── src ├── assets │ ├── Shoes1.png │ ├── Shoes2.png │ ├── Shoes3.png │ ├── logo2.png │ └── EmptyCart.png ├── Pages │ ├── Home.jsx │ ├── Cart.jsx │ └── Contact.jsx ├── main.jsx ├── components │ ├── Breadcrum.jsx │ ├── SingleProduct.jsx │ ├── ProductList.jsx │ ├── Item.jsx │ ├── ResponsiveMenu.jsx │ ├── Description.jsx │ ├── Navbar.jsx │ ├── Navbar2.jsx │ ├── ProductDisplay.jsx │ ├── Footer.jsx │ └── Hero.jsx ├── context │ └── ShopContext.jsx ├── App.jsx ├── index.css └── Utils │ └── all_product.js ├── postcss.config.js ├── vite.config.js ├── vercel.json ├── .gitignore ├── index.html ├── package.json ├── eslint.config.js ├── README.md └── tailwind.config.js /public/logo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davismiler/nike-flow/HEAD/public/logo1.png -------------------------------------------------------------------------------- /src/assets/Shoes1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davismiler/nike-flow/HEAD/src/assets/Shoes1.png -------------------------------------------------------------------------------- /src/assets/Shoes2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davismiler/nike-flow/HEAD/src/assets/Shoes2.png -------------------------------------------------------------------------------- /src/assets/Shoes3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davismiler/nike-flow/HEAD/src/assets/Shoes3.png -------------------------------------------------------------------------------- /src/assets/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davismiler/nike-flow/HEAD/src/assets/logo2.png -------------------------------------------------------------------------------- /src/assets/EmptyCart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davismiler/nike-flow/HEAD/src/assets/EmptyCart.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /src/Pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Hero from '../components/Hero' 3 | 4 | const Home = () => { 5 | return ( 6 |
7 | 8 |
9 | ) 10 | } 11 | 12 | export default Home 13 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "routes": [ 3 | {"src": "/mens", "dest":"/"}, 4 | {"src": "/womens", "dest":"/"}, 5 | {"src": "/kids", "dest":"/"}, 6 | {"src": "/cart", "dest":"/"}, 7 | {"src": "/products/:productId", "dest":"/"} 8 | ] 9 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Nike 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | import { MouseFollower } from 'react-mouse-follower' 6 | import ShopContextProvider from './context/ShopContext.jsx' 7 | 8 | createRoot(document.getElementById('root')).render( 9 | 10 | 11 | 12 | 13 | 14 | , 15 | ) 16 | -------------------------------------------------------------------------------- /src/components/Breadcrum.jsx: -------------------------------------------------------------------------------- 1 | import { ChevronRight } from 'lucide-react'; 2 | import React from 'react' 3 | 4 | const Breadcrum = (props) => { 5 | const {product} = props; 6 | return ( 7 |
8 | HOME SHOP {product.category} {product.name} 9 |
10 | ) 11 | } 12 | 13 | export default Breadcrum 14 | -------------------------------------------------------------------------------- /src/components/SingleProduct.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Breadcrum from './Breadcrum' 3 | import ProductDisplay from './ProductDisplay' 4 | import Description from './Description' 5 | import { useParams } from 'react-router-dom' 6 | import all_product from '../Utils/all_product' 7 | 8 | const SingleProduct = () => { 9 | const {productId} = useParams(); 10 | const product = all_product.find((e)=> e.id === Number(productId)) 11 | return ( 12 |
13 | 14 | 15 | 16 |
17 | ) 18 | } 19 | 20 | export default SingleProduct 21 | -------------------------------------------------------------------------------- /src/components/ProductList.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import all_product from '../Utils/all_product' 3 | import Item from './Item' 4 | 5 | const ProductList = (props) => { 6 | return ( 7 |
8 |

Top Sellers

9 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum nulla quis in similique officia, cupiditate fugit mollitia saepe necessitatibus.

10 |
11 | {all_product.map((product)=> { 12 | if(props.category === product.category){ 13 | return 14 | } 15 | })} 16 |
17 |
18 | ) 19 | } 20 | 21 | export default ProductList 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nike-flow", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite --host", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "framer-motion": "^11.14.4", 14 | "lucide-react": "^0.468.0", 15 | "react": "^18.3.1", 16 | "react-dom": "^18.3.1", 17 | "react-icons": "^5.4.0", 18 | "react-mouse-follower": "^2.0.3", 19 | "react-router-dom": "^7.0.2" 20 | }, 21 | "devDependencies": { 22 | "@eslint/js": "^9.15.0", 23 | "@types/react": "^18.3.12", 24 | "@types/react-dom": "^18.3.1", 25 | "@vitejs/plugin-react": "^4.3.4", 26 | "autoprefixer": "^10.4.20", 27 | "eslint": "^9.15.0", 28 | "eslint-plugin-react": "^7.37.2", 29 | "eslint-plugin-react-hooks": "^5.0.0", 30 | "eslint-plugin-react-refresh": "^0.4.14", 31 | "globals": "^15.12.0", 32 | "postcss": "^8.4.49", 33 | "tailwindcss": "^3.4.16", 34 | "vite": "^6.0.1" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/components/Item.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | 4 | const Item = ({product}) => { 5 | return ( 6 |
7 | 8 |
9 | {product?.name} 10 |
11 | 12 |
13 |
14 |

15 | 16 | 17 | 18 |

19 |
20 |

${product?.new_price}

21 |
22 |
23 | ) 24 | } 25 | 26 | export default Item 27 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /src/components/ResponsiveMenu.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FaUserCircle } from "react-icons/fa"; 3 | import { Link } from 'react-router-dom'; 4 | import { NavbarMenu } from './Navbar'; 5 | 6 | 7 | const ResponsiveMenu = ({showMenu, setShowMenu}) => { 8 | return ( 9 |
10 |
11 |
12 | 13 |
14 |

Hello User

15 |

Premium User

16 |
17 |
18 | 29 |
30 |
31 |

Made with ❤️ by Aditya

32 |
33 | 34 |
35 | ) 36 | } 37 | 38 | export default ResponsiveMenu 39 | -------------------------------------------------------------------------------- /src/context/ShopContext.jsx: -------------------------------------------------------------------------------- 1 | import React, { createContext, useState } from "react"; 2 | import all_product from "../Utils/all_product"; 3 | 4 | export const ShopContext = createContext(null); 5 | 6 | const getDefaultCart = ()=> { 7 | let cart = {}; 8 | for (let index= 0; index { 15 | const [cartItems, setCartItems] = useState(getDefaultCart()); 16 | 17 | const addToCart = (itemId) => { 18 | setCartItems((prev)=> ({...prev, [itemId]:prev[itemId]+1})) 19 | } 20 | 21 | const removeFromCart = (itemId) => { 22 | setCartItems((prev)=> ({...prev,[itemId]:prev[itemId]-1})) 23 | } 24 | 25 | const getTotalCartAmount = ()=> { 26 | let totalAmount = 0; 27 | for (const item in cartItems) 28 | { 29 | if(cartItems[item]>0) 30 | { 31 | let itemInfo = all_product.find((product)=>product.id===Number(item)) 32 | totalAmount += cartItems[item] * itemInfo.new_price; 33 | } 34 | } 35 | return totalAmount; 36 | } 37 | 38 | const getTotalCartItems = ()=> { 39 | let totalItem = 0; 40 | for (const item in cartItems) 41 | { 42 | if(cartItems[item]>0) 43 | { 44 | totalItem += cartItems[item] 45 | } 46 | } 47 | return totalItem; 48 | } 49 | const contextValue = {all_product, cartItems, addToCart, removeFromCart, getTotalCartAmount, getTotalCartItems}; 50 | 51 | return ( 52 | 53 | {props.children} 54 | 55 | ) 56 | } 57 | 58 | export default ShopContextProvider -------------------------------------------------------------------------------- /src/components/Description.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Description = () => { 4 | return ( 5 |
6 |
7 |
Description
8 |
Reviews (122)
9 |
10 |
11 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga quisquam saepe vero, accusantium similique sed eligendi consequuntur magni dolores, quam quod minus unde possimus numquam harum, amet necessitatibus sunt deleniti autem non nobis cumque debitis! Ratione hic, culpa consectetur repudiandae ipsum reprehenderit excepturi et maiores quasi voluptates dolores, iste soluta inventore odio voluptate ab itaque eos dignissimos. Vel nihil, eos architecto iusto iure doloribus ipsa aliquam quasi unde labore reiciendis deleniti eaque perferendis omnis. Dolorem doloribus aut aliquid ea vero mollitia minima pariatur eum, fuga animi sequi veritatis ut recusandae maiores optio, nihil exercitationem temporibus ab accusamus cumque amet qui earum! Sapiente optio recusandae facere quisquam, assumenda voluptate quo, nostrum iusto dolorum voluptas suscipit eius architecto ea facilis earum ipsa, sequi accusantium pariatur fugiat laborum quam dolorem. Maiores temporibus fuga molestias nihil tempore hic ratione repellendus iste dolorem voluptates? Iste ea repellat possimus dolorem est consequatur assumenda nam ullam? Nesciunt. 12 | 13 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque voluptates optio provident ipsa laborum cupiditate, libero deserunt neque veritatis. Aspernatur mollitia expedita rerum pariatur qui nemo voluptas id earum magni.

14 |
15 |
16 | ) 17 | } 18 | 19 | export default Description 20 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Navbar from './components/Navbar' 3 | import Hero from './components/Hero' 4 | import { createBrowserRouter, RouterProvider } from 'react-router-dom' 5 | import Home from './Pages/Home' 6 | import Contact from './Pages/Contact' 7 | import Cart from './Pages/Cart' 8 | import Footer from './components/Footer' 9 | import { UpdateFollower } from 'react-mouse-follower' 10 | import ProductList from './components/ProductList' 11 | import Navbar2 from './components/Navbar2' 12 | import SingleProduct from './components/SingleProduct' 13 | 14 | const router = createBrowserRouter([ 15 | { 16 | path:'/', 17 | element: <>