├── public ├── _redirects ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── images │ ├── image.png │ ├── carosel │ │ ├── 1.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ └── 2.jpeg │ ├── mamber-1.png │ ├── mamber-2.jpeg │ └── mamber-3.png ├── manifest.json └── index.html ├── src ├── Component │ ├── Dashboard │ │ ├── CheckoutForm.js │ │ ├── Laptop.js │ │ ├── Dashboard.js │ │ ├── Payment.js │ │ ├── AllUsers.js │ │ ├── Profile.js │ │ ├── AddProduct.js │ │ ├── ManageProduct.js │ │ ├── Orders.js │ │ └── AllOrders.js │ ├── RequireAuth │ │ ├── RequireAdmin.js │ │ └── RequireAuth.js │ ├── Images │ │ ├── banner.jpg │ │ ├── loader.gif │ │ └── person.png │ ├── Shared │ │ ├── ConfirmMoadl.js │ │ └── useDate.js │ ├── Loading │ │ └── Loading.js │ ├── Hook │ │ └── useUser.js │ ├── Firebase │ │ └── firebase.init.js │ ├── Product │ │ ├── ProductCard.js │ │ ├── LaptopCard.js │ │ ├── AllProduct.js │ │ ├── Product.js │ │ ├── ProductDetails.js │ │ └── Order.js │ ├── Review │ │ ├── ReviewCard.js │ │ ├── Reviews.js │ │ └── AddReview.js │ ├── Portfolio │ │ ├── PortfolioCard.js │ │ └── Portfolio.js │ ├── Team │ │ └── Team.js │ ├── Footer │ │ └── Footer.js │ ├── User │ │ ├── Social.js │ │ ├── Login.js │ │ └── Register.js │ ├── Home │ │ ├── Slider.js │ │ └── Home.js │ ├── Blog │ │ └── Blog.js │ ├── About │ │ └── About.js │ ├── Contact │ │ └── Contact.js │ └── Navbar │ │ └── Navbar.js ├── setupTests.js ├── App.test.js ├── index.css ├── reportWebVitals.js ├── App.css ├── index.js ├── logo.svg └── App.js ├── README.md ├── tailwind.config.js ├── .gitignore └── package.json /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /src/Component/Dashboard/CheckoutForm.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Component/RequireAuth/RequireAdmin.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | robotstxt 5 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/Institutional-Development-Plan/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/Institutional-Development-Plan/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/Institutional-Development-Plan/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/images/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/Institutional-Development-Plan/HEAD/public/images/image.png -------------------------------------------------------------------------------- /public/images/carosel/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/Institutional-Development-Plan/HEAD/public/images/carosel/1.jpg -------------------------------------------------------------------------------- /public/images/carosel/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/Institutional-Development-Plan/HEAD/public/images/carosel/3.jpg -------------------------------------------------------------------------------- /public/images/carosel/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/Institutional-Development-Plan/HEAD/public/images/carosel/4.jpg -------------------------------------------------------------------------------- /public/images/carosel/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/Institutional-Development-Plan/HEAD/public/images/carosel/5.jpg -------------------------------------------------------------------------------- /public/images/mamber-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/Institutional-Development-Plan/HEAD/public/images/mamber-1.png -------------------------------------------------------------------------------- /public/images/mamber-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/Institutional-Development-Plan/HEAD/public/images/mamber-2.jpeg -------------------------------------------------------------------------------- /public/images/mamber-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/Institutional-Development-Plan/HEAD/public/images/mamber-3.png -------------------------------------------------------------------------------- /public/images/carosel/2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/Institutional-Development-Plan/HEAD/public/images/carosel/2.jpeg -------------------------------------------------------------------------------- /src/Component/Images/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/Institutional-Development-Plan/HEAD/src/Component/Images/banner.jpg -------------------------------------------------------------------------------- /src/Component/Images/loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/Institutional-Development-Plan/HEAD/src/Component/Images/loader.gif -------------------------------------------------------------------------------- /src/Component/Images/person.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hazrat-Ali9/Institutional-Development-Plan/HEAD/src/Component/Images/person.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Project Name : Mobile Shop 2 | 3 | # Live Site : hazrat-ali-mobileshop.vercel.app 4 | 5 | # Hazrat Ali 6 | 7 | # Dept of CSE 8 | 9 | # 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/Component/Shared/ConfirmMoadl.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const ConfirmMoadl = () => { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | 11 | export default ConfirmMoadl -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./src/**/*.{html,js}"], 3 | daisyui: { 4 | themes: [ 5 | "dark", 6 | "cupcake" 7 | ], 8 | }, 9 | plugins: [require("daisyui")], 10 | } 11 | // Tailwind Config -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | // setup tests 7 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | 10 | // App test 11 | -------------------------------------------------------------------------------- /src/Component/Loading/Loading.js: -------------------------------------------------------------------------------- 1 | // Loading js 2 | import React from 'react' 3 | import loader from '../Images/loader.gif' 4 | const Loading = () => { 5 | return ( 6 |
7 | 8 |
9 | ) 10 | } 11 | 12 | export default Loading -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | # .gitignore 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .gitindore 8 | # testing 9 | /coverage 10 | # gitignore 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* -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | // Report Testing 2 | const reportWebVitals = onPerfEntry => { 3 | if (onPerfEntry && onPerfEntry instanceof Function) { 4 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 5 | getCLS(onPerfEntry); 6 | getFID(onPerfEntry); 7 | getFCP(onPerfEntry); 8 | getLCP(onPerfEntry); 9 | getTTFB(onPerfEntry); 10 | }); 11 | } 12 | }; 13 | // report web vitals 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .product-order-page{ 6 | background-color: rgba(0, 0, 0, 0.473); 7 | } 8 | .portdetails{ 9 | display: none; 10 | } 11 | #portCard:hover .portdetails{ 12 | display: block; 13 | } 14 | .overlay-modal{ 15 | position: absolute; 16 | width: 100%; 17 | height: 100vh; 18 | background-color: rgba(0, 0, 0, 0.253); 19 | justify-content: center; 20 | align-items: center; 21 | position: absolute; 22 | top: 0; 23 | } 24 | .react-prog{ 25 | --value:70; 26 | width: 60px; 27 | height: 60px; 28 | color: blueviolet; 29 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import { BrowserRouter } from 'react-router-dom'; 7 | import {QueryClient,QueryClientProvider,} from 'react-query' 8 | // Index js 9 | const queryClient = new QueryClient() 10 | const root = ReactDOM.createRoot(document.getElementById('root')); 11 | root.render( 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | 21 | reportWebVitals(); 22 | -------------------------------------------------------------------------------- /src/Component/RequireAuth/RequireAuth.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useAuthState } from 'react-firebase-hooks/auth' 3 | import { Navigate, useLocation } from 'react-router-dom' 4 | import auth from '../Firebase/firebase.init' 5 | import Loading from '../Loading/Loading' 6 | // Required Auth 7 | const RequireAuth = ({ children }) => { 8 | const location = useLocation() 9 | const [user, loading] = useAuthState(auth) 10 | const token = localStorage.getItem('accessToken') 11 | if (user && token) { 12 | return children 13 | } 14 | if (loading) { 15 | return 16 | } 17 | else { 18 | return 19 | } 20 | 21 | } 22 | 23 | export default RequireAuth -------------------------------------------------------------------------------- /src/Component/Hook/useUser.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | import { useAuthState } from 'react-firebase-hooks/auth' 3 | import auth from '../Firebase/firebase.init' 4 | 5 | // User js 6 | const useUser = () => { 7 | const [user] = useAuthState(auth) 8 | const [currentUser, setUser] = useState({}) 9 | useEffect(() => { 10 | if (user) { 11 | fetch(`https://mobile-collections-backend.vercel.app/users/${user?.email}`, { 12 | method: 'get', 13 | headers: { 14 | auth: localStorage.getItem('accessToken') 15 | } 16 | }).then(res => res.json()).then(json => { 17 | setUser(json) 18 | }).catch(err => console.log(err)) 19 | } 20 | }, [user]) 21 | 22 | return [currentUser] 23 | } 24 | 25 | export default useUser -------------------------------------------------------------------------------- /src/Component/Firebase/firebase.init.js: -------------------------------------------------------------------------------- 1 | 2 | import { getAuth } from "firebase/auth"; 3 | 4 | // Import the functions you need from the SDKs you need 5 | import { initializeApp } from "firebase/app"; 6 | // firebase.init 7 | // TODO: Add SDKs for Firebase products that you want to use 8 | // https://firebase.google.com/docs/web/setup#available-libraries 9 | // Firebase init 10 | // Your web app's Firebase configuration 11 | // For Firebase JS SDK v7.20.0 and later, measurementId is optional 12 | const firebaseConfig = { 13 | apiKey: "AIzaSyAptu8eF_rr79iaiVLrQEX8WV3I5vuCOsI", 14 | authDomain: "hazrat-ali-mobile-shop.firebaseapp.com", 15 | projectId: "hazrat-ali-mobile-shop", 16 | storageBucket: "hazrat-ali-mobile-shop.appspot.com", 17 | messagingSenderId: "94617539329", 18 | appId: "1:94617539329:web:347489c343a84dfd4e0100", 19 | measurementId: "G-36VTNCQGNC" 20 | }; 21 | 22 | // Initialize Firebase 23 | const app = initializeApp(firebaseConfig); 24 | 25 | const auth = getAuth(app) 26 | 27 | export default auth -------------------------------------------------------------------------------- /src/Component/Product/ProductCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | 4 | // Product Cards 5 | const ProductCard = ({ product }) => { 6 | const { name, image, price, quantity, description, _id } = product 7 | return ( 8 |
9 |
10 | imagedfdjere 11 |
12 |
13 |

{name.length > 30 ? name.slice(0, 40) + '...' : name}

14 |

Price : ${price}

15 |

Quantity : {quantity} p

16 |

{description.length > 100 ? description.slice(0, 100) + "...." : description}

17 |
18 | View Product 19 |
20 |
21 |
22 | 23 | ) 24 | } 25 | 26 | export default ProductCard -------------------------------------------------------------------------------- /src/Component/Review/ReviewCard.js: -------------------------------------------------------------------------------- 1 | // ReviewCards 2 | import { Rating } from '@mui/material'; 3 | import React from 'react' 4 | const ReviewCard = ({ review }) => { 5 | return ( 6 |
7 |
8 | 12 |
13 |
14 |
15 | {review.image}/ 16 |
17 |
18 |
19 |

{review?.username}

20 |

{review?.date}

21 |
22 |
23 |

{review?.desc?.length > 110 ? review.desc.slice(0,230)+'....' : review.desc}

24 |
25 |
26 | ) 27 | } 28 | 29 | export default ReviewCard -------------------------------------------------------------------------------- /src/Component/Portfolio/PortfolioCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const PortfolioCard = ({ image, to, name }) => { 4 | return ( 5 |
6 |
11 | 12 |
13 |
14 |
15 |

{name}

16 |

Developed By React

17 |
18 | Show Project 19 |
20 |
21 |
22 | 23 |
24 | ) 25 | } 26 | 27 | export default PortfolioCard -------------------------------------------------------------------------------- /src/Component/Product/LaptopCard.js: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | 3 | // Laptop Card 4 | const LaptopCard = ({ product }) => { 5 | const { name, image, price, quantity, description, _id } = product; 6 | return ( 7 |
8 |
9 |
10 | imagedfdjere 11 |
12 |
13 |

{name.length > 30 ? name.slice(0, 40) + '...' : name}

14 |

Price : ${price}

15 |

Quantity : {quantity} p

16 |

{description.length > 100 ? description.slice(0, 100) + "...." : description}

17 |
18 | View Product 19 |
20 |
21 |
22 |
23 | ); 24 | }; 25 | 26 | export default LaptopCard; -------------------------------------------------------------------------------- /src/Component/Shared/useDate.js: -------------------------------------------------------------------------------- 1 | // Use Data 2 | const useDate = () => { 3 | const d = new Date() 4 | let month = d.getMonth() 5 | let year = d.getFullYear() 6 | let day = d.getDate() 7 | let min = d.getMinutes() 8 | let sec = d.getSeconds() 9 | let hour = d.getHours() 10 | 11 | if (month === 0) { 12 | month = 'January' 13 | } 14 | else if(month === 1){ 15 | month = 'February' 16 | } 17 | else if(month === 2){ 18 | month = 'March' 19 | } 20 | else if(month === 3){ 21 | month = 'April' 22 | } 23 | else if(month === 4){ 24 | month = 'May' 25 | } 26 | else if(month === 5){ 27 | month = 'June' 28 | } 29 | else if(month === 6){ 30 | month = 'July' 31 | } 32 | else if(month === 7){ 33 | month = 'August' 34 | } 35 | else if(month === 8){ 36 | month = 'September' 37 | } 38 | else if(month === 9){ 39 | month = 'October' 40 | } 41 | else if(month === 10){ 42 | month = 'November' 43 | } 44 | else if(month === 11){ 45 | month = 'December' 46 | } 47 | if(hour === 0){ 48 | hour = 12 49 | } 50 | if(hour > 12){ 51 | hour = hour - 12 52 | } 53 | 54 | const dateToday = `${day} ${month} ${year} || ${hour}h ${min}m ${sec}s` 55 | 56 | return [dateToday] 57 | } 58 | 59 | export default useDate -------------------------------------------------------------------------------- /src/Component/Team/Team.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | // Team 3 | const Team = () => { 4 | return ( 5 |
6 |

Meet My Team

7 |
8 | 12 | {/* */} 16 | 20 | 21 | 22 |
23 |
24 | ); 25 | }; 26 | 27 | export default Team; 28 | 29 | const TeamCard = ({ image, name }) => { 30 | return
31 |
38 |
39 |
40 |

{name}

41 |
42 |
43 | } -------------------------------------------------------------------------------- /src/Component/Product/AllProduct.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable array-callback-return */ 2 | import React, { useState } from 'react' 3 | import { useQuery } from 'react-query' 4 | import Loading from '../Loading/Loading' 5 | import ProductCard from './ProductCard' 6 | 7 | // Product json 8 | 9 | const AllProduct = () => { 10 | const url = 'http://localhost:4000/product' 11 | const { isLoading, data } = useQuery(['products'], () => 12 | fetch(url).then(res => 13 | res.json() 14 | ) 15 | ) 16 | const [searchValue , setValue] = useState('') 17 | 18 | if (isLoading) { 19 | return 20 | } 21 | 22 | 23 | return ( 24 |
25 |

Our All Products

26 |
27 | setValue(e.target.value)} placeholder="Type here" className="rounded-none input input-bordered w-full max-w-xs" /> 28 | 29 |
30 |
31 | { 32 | data.filter((val)=> { 33 | if (searchValue === "") { 34 | return val 35 | } 36 | else if(val.name.toLowerCase().includes(searchValue.toLowerCase())){ 37 | return val 38 | } 39 | }).map(product => ) 40 | } 41 |
42 |
43 | ) 44 | } 45 | 46 | export default AllProduct -------------------------------------------------------------------------------- /src/Component/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | // Footer js 5 | 6 | const Footer = () => { 7 | return ( 8 |
9 |
10 |
11 | 12 | About us 13 | 14 | 15 | Contact 16 | 17 | 18 | Jobs 19 | 20 | 21 | Press kit 22 | 23 |
24 |
25 | 36 |
37 |
38 |

Copyright @ 2025-All Right Reserved By Hazrat Ali

39 |
40 |
41 |
42 | ); 43 | }; 44 | 45 | export default Footer; 46 | -------------------------------------------------------------------------------- /src/Component/Product/Product.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable array-callback-return */ 2 | import React, { useState } from 'react' 3 | import { useQuery } from 'react-query' 4 | import Loading from '../Loading/Loading' 5 | import ProductCard from './ProductCard' 6 | 7 | // Product json 8 | 9 | const Product = () => { 10 | const url = 'https://mobile-collections-backend.vercel.app/product' 11 | const { isLoading, data: products = [] } = useQuery(['products'], () => 12 | fetch(url).then(res => res.json()) 13 | ) 14 | const [searchValue, setSearchValue] = useState('') 15 | 16 | if (isLoading) { 17 | return 18 | } 19 | 20 | const filteredProducts = products 21 | .filter((product, index) => 22 | index <= 11 && product.name.toLowerCase().includes(searchValue.toLowerCase()) 23 | ); 24 | 25 | 26 | return ( 27 |
28 |

Our All Mobile

29 |
30 | setSearchValue(e.target.value)} 34 | placeholder="Type here" 35 | className="rounded-none input input-bordered w-full max-w-xs" 36 | /> 37 | 38 |
39 |
40 | {filteredProducts.map(product => ( 41 | 42 | ))} 43 |
44 |
45 | ) 46 | } 47 | 48 | export default Product -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emailjs/browser": "^4.4.1", 7 | "@emotion/react": "^11.9.0", 8 | "@emotion/styled": "^11.8.1", 9 | "@mui/material": "^5.8.0", 10 | "@mui/styled-engine-sc": "^5.8.0", 11 | "@stripe/react-stripe-js": "^1.8.0", 12 | "@stripe/stripe-js": "^1.29.0", 13 | "@testing-library/jest-dom": "^5.14.1", 14 | "@testing-library/react": "^13.0.0", 15 | "@testing-library/user-event": "^13.2.1", 16 | "axios": "^0.27.2", 17 | "daisyui": "^2.15.0", 18 | "firebase": "^9.15.0", 19 | "lottie-react": "^2.4.0", 20 | "react": "^18.1.0", 21 | "react-dom": "^18.1.0", 22 | "react-firebase-hooks": "^5.0.3", 23 | "react-hook-form": "^7.31.2", 24 | "react-query": "^3.39.0", 25 | "react-router-dom": "^6.3.0", 26 | "react-scripts": "5.0.1", 27 | "react-toastify": "^9.0.1", 28 | "styled-components": "^5.3.5", 29 | "sweetalert2": "^11.15.3", 30 | "swiper": "^11.0.7", 31 | "web-vitals": "^2.1.0" 32 | }, 33 | "scripts": { 34 | "start": "react-scripts start", 35 | "build": "react-scripts build", 36 | "test": "react-scripts test", 37 | "eject": "react-scripts eject" 38 | }, 39 | "eslintConfig": { 40 | "extends": [ 41 | "react-app", 42 | "react-app/jest" 43 | ] 44 | }, 45 | "browserslist": { 46 | "production": [ 47 | ">0.2%", 48 | "not dead", 49 | "not op_mini all" 50 | ], 51 | "development": [ 52 | "last 1 chrome version", 53 | "last 1 firefox version", 54 | "last 1 safari version" 55 | ] 56 | }, 57 | "devDependencies": { 58 | "tailwindcss": "^3.0.24" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/Component/Dashboard/Laptop.js: -------------------------------------------------------------------------------- 1 | 'use client' 2 | // Laptop js 3 | import React, { useState } from 'react'; 4 | import { useQuery } from 'react-query'; 5 | import Loading from '../Loading/Loading'; 6 | import LaptopCard from '../Product/LaptopCard'; 7 | 8 | const Laptop = () => { 9 | const url = 'https://mobile-collections-backend.vercel.app/product' 10 | const { isLoading, data: products = [] } = useQuery(['products'], () => 11 | fetch(url).then(res => res.json()) 12 | ) 13 | const [searchValue, setSearchValue] = useState('') 14 | 15 | if (isLoading) { 16 | return 17 | } 18 | 19 | const filteredProducts = products 20 | .filter((product, index) => 21 | index >= 12 && product.name.toLowerCase().includes(searchValue.toLowerCase()) 22 | ); 23 | 24 | return ( 25 |
26 |
27 |

Our All Laptop

28 |
29 | setSearchValue(e.target.value)} 33 | placeholder="Type here" 34 | className="rounded-none input input-bordered w-full max-w-xs" 35 | /> 36 | 37 |
38 |
39 | {filteredProducts.map(product => ( 40 | 41 | ))} 42 |
43 |
44 |
45 | ); 46 | }; 47 | 48 | export default Laptop; 49 | 50 | -------------------------------------------------------------------------------- /src/Component/Review/Reviews.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { useAuthState } from 'react-firebase-hooks/auth' 3 | import { useQuery } from 'react-query' 4 | import { useNavigate } from 'react-router-dom' 5 | import auth from '../Firebase/firebase.init' 6 | import Loading from '../Loading/Loading' 7 | import AddReview from './AddReview' 8 | import ReviewCard from './ReviewCard' 9 | 10 | const Reviews = () => { 11 | const [show, setShow] = useState(false) 12 | const [user, loading] = useAuthState(auth) 13 | const navigate = useNavigate() 14 | const { isLoading, data, refetch } = useQuery(['reviews'], () => 15 | fetch('https://mobile-collections-backend.vercel.app/review') 16 | .then(res => 17 | res.json() 18 | ) 19 | ) 20 | 21 | const addReview = () => { 22 | if (user) { 23 | if (show) { 24 | setShow(false) 25 | } 26 | else { 27 | setShow(true) 28 | } 29 | } 30 | else { 31 | navigate('/login') 32 | } 33 | } 34 | if (isLoading || loading) { 35 | return 36 | } 37 | return ( 38 |
39 |

Reviews

40 |
41 | 42 |
43 | { 44 | show && user ? : <> 45 | } 46 |
47 | { 48 | data.map(review => ) 49 | } 50 |
51 |
52 | ) 53 | } 54 | 55 | export default Reviews -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 15 | 16 | 17 | 20 | React App 21 | 22 | 23 | 24 | 25 |
26 | 36 | 37 | 38 | 40 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/Component/Product/ProductDetails.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { useQuery } from 'react-query' 3 | import { Link, useLocation } from 'react-router-dom' 4 | import Loading from '../Loading/Loading' 5 | import Order from './Order' 6 | 7 | //Product Details 8 | 9 | const ProductDetails = () => { 10 | const location = useLocation() 11 | const [show, setShow] = useState(false) 12 | const pathname = location.pathname 13 | const id = pathname.split('/') 14 | const url = `https://mobile-collections-backend.vercel.app/product/${id[2]}` 15 | const { isLoading, data } = useQuery(['One-product'], () => 16 | fetch(url, { 17 | method: "get", 18 | headers: { 19 | auth: localStorage.getItem('accessToken') 20 | } 21 | }).then(res => 22 | res.json() 23 | ) 24 | ) 25 | if (isLoading) { 26 | return 27 | } 28 | return ( 29 |
30 |
31 |
32 | 33 |
34 |

{data.name}

35 |

Price : ${data.price}

36 |

Quantity : {data.quantity} p

37 |

Min Order : {data.quantity > 300 ? 300 : data.quantity} p

38 |

{data.description}

39 | 40 | 41 |
42 |
43 |
44 | 45 |
46 | ) 47 | } 48 | 49 | export default ProductDetails -------------------------------------------------------------------------------- /src/Component/Portfolio/Portfolio.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // Portfolio js 3 | const Portfolio = () => { 4 | return ( 5 |
6 |
7 |
8 |
9 | my avater 13 |
14 |
15 |

16 | Name : Hazrat Ali 17 |

18 |

19 | Email :{" "} 20 | programmer.hazratali@gmail.com 21 |

22 |

23 | Phone : +8801986234683 24 |

25 |

Skills

26 |
    27 |
  • 28 |

    React

    29 |
    • 30 |
  • Javascript
    • 31 |
  • Node js
    • 32 |
  • Express
    • 33 |
  • Mongoose
    • 34 |
  • Css
    • 35 |
  • Bootstrap
    • 36 |
  • Tailwind
    • 37 |
38 |
39 | {/*

I am Hazrat Ali. I am studied BSC in CSE

*/} 40 |

41 | Hello I'm Hazrat Ali.I am currently pursuing BSC in CSE. I want to 42 | be a Software Engineer in near future.Now I am currently a MERN 43 | Stack Developer and I have passion in Web technologies. I am a fast 44 | learner and I am confident about myself.I believe I can face 45 | chanllenges of this always changing tech industry.I am looking 46 | forward to face the upcoming challenges. Talking about my hobby I 47 | love to read books related to programming and I love to develop 48 | things with programming languages.Thanks for visiting my profile. 49 | 50 |

51 | 52 |
53 |
54 |
55 | ); 56 | }; 57 | 58 | export default Portfolio; 59 | -------------------------------------------------------------------------------- /src/Component/Dashboard/Dashboard.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { NavLink, Outlet } from 'react-router-dom' 3 | import useUser from '../Hook/useUser' 4 | // Dashboard js 5 | const Dashboard = () => { 6 | const [currentUser, loading] = useUser() 7 | return ( 8 |
9 |
10 | 11 |
12 | 13 | 16 | 17 |
18 |
19 |
34 |
35 | 36 |
37 | ) 38 | } 39 | 40 | export default Dashboard -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Component/User/Social.js: -------------------------------------------------------------------------------- 1 | import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth'; 2 | import React, { useState } from 'react' 3 | import { useLocation, useNavigate } from 'react-router-dom'; 4 | import auth from '../Firebase/firebase.init'; 5 | // Social 6 | const Social = () => { 7 | const [loading, setLoading] = useState(false) 8 | const provider = new GoogleAuthProvider(); 9 | const location = useLocation() 10 | const from = location.state?.from?.pathname || '/' 11 | const navigate = useNavigate() 12 | const signIn = () => { 13 | setLoading(true) 14 | signInWithPopup(auth, provider) 15 | .then((result) => { 16 | const user = result.user; 17 | fetch(`https://mobile-collections-backend.vercel.app/users/${user.email}`, { 18 | method: "put", 19 | headers: { 20 | "content-type": "application/json" 21 | }, 22 | body: JSON.stringify({ photoURL: user.photoURL, name: user.displayName, email: user.email }) 23 | }) 24 | .then(res => res.json()) 25 | .then(result => { 26 | console.log(result); 27 | localStorage.setItem('accessToken', result.token) 28 | setLoading(false) 29 | navigate(from) 30 | fetch(`https://mobile-collections-backend.vercel.app/profile/${user.email}`, { 31 | method: "put", 32 | headers: { 33 | 'content-type': 'application/json', 34 | auth: localStorage.getItem("accessToken") 35 | }, 36 | body: JSON.stringify({ email : user.email, name : user.displayName, others: {} }) 37 | }).then(res => res.json()).then(json => { 38 | console.log('Added Profile For This User') 39 | }) 40 | }) 41 | }).catch((error) => { 42 | setLoading(false) 43 | }) 44 | } 45 | return ( 46 |
47 |
48 |
OR
49 | 52 |
53 |
54 | ) 55 | } 56 | 57 | export default Social -------------------------------------------------------------------------------- /src/Component/Home/Slider.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Swiper, SwiperSlide } from 'swiper/react'; 3 | import { Autoplay } from 'swiper/modules'; 4 | import { useAuthState } from 'react-firebase-hooks/auth'; 5 | import auth from '../Firebase/firebase.init'; 6 | import { useNavigate } from 'react-router-dom'; 7 | const Slider = () => { 8 | const [user] = useAuthState(auth); 9 | const navigate = useNavigate() 10 | const sliders = [ 11 | "/images/carosel/1.jpg", 12 | "/images/carosel/2.jpeg", 13 | "/images/carosel/3.jpg", 14 | "/images/carosel/4.jpg", 15 | "/images/carosel/5.jpg", 16 | ] 17 | // Slider Carosel 18 | return ( 19 |
20 | 27 | { 28 | sliders.map((slider, index) => { 29 | return 30 |
36 |
37 |
38 |
39 |

Gadget
Galaxy

40 |

41 | We Provide All Type Of Mobile Parts And Accessories 42 |

43 | 46 | 47 |
48 |
49 |
50 | 51 | }) 52 | } 53 | 54 | 55 | 56 |
57 | ); 58 | }; 59 | 60 | export default Slider; -------------------------------------------------------------------------------- /src/Component/Blog/Blog.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // Blog 3 | const Blog = () => { 4 | return ( 5 |
6 |
7 |

Improve the performance of a React Application

8 |

If you’re benchmarking or experiencing performance problems in your React apps, make sure you’re testing with the minified production build.

9 |

10 | By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app. 11 |

12 |
    13 |
  1. Keeping component state local where necessary.
    2. 14 |
  2. Memoizing React components to prevent unnecessary re-renders.
    3. 15 |
  3. Code-splitting in React using dynamic import()
    4. 16 |
  4. Windowing or list virtualization in React.
    5. 17 |
  5. Lazy loading images in React.
    6. 18 |
19 |
20 |
21 |

Improve the performance of a React Application

22 |

23 | Every object with its methods and properties contains an internal and hidden property known as [[Prototype]]. The Prototypal Inheritance is a feature in javascript used to add methods and properties in objects. It is a method by which an object can inherit the properties and methods of another object. Traditionally, in order to get and set the [[Prototype]] of an object, we use Object.getPrototypeOf and Object.setPrototypeOf. Nowadays, in modern language, it is being set using __proto__ 24 |

25 | 26 |
27 |
28 |

{`Why you do not set the state directly in React`}

29 |

30 | { 31 | ` 32 | he state starts as { count: 0 }, and we increment state.count when the user clicks a button by calling this.setState(). We’ll use snippets from this class throughout the page. 33 | ` 34 | } 35 |

36 | 

37 |               
38 |               {
39 |                 `
40 |   const [count, setCount] = useState(0)
41 |   //For Changer This Value of Count !
42 |     we Can Use setCount(4545)
43 |   Now value Of Count is 4545
44 |                 `
45 |               }
46 |
47 |
48 | 49 |

50 | 51 |
52 |
53 | 54 | 55 |
56 |
57 | ) 58 | } 59 | 60 | export default Blog -------------------------------------------------------------------------------- /src/Component/About/About.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // About 3 | const About = () => { 4 | return ( 5 |
6 |

About Us

7 | 8 |

9 | MT-Bike's-Accesories.com is a new breed of motorcycle community. Providing the best experience of today's online shopping mall enhanced with useful features and categories tailored to motorcycle enthusiasts of all types, MT-Bike's-Accesories.com is an open platform for the exchange of everything related to motorcycle. 10 |

11 |

12 | The MT-Bike's-Accesories.com team is made up of passionate motorcyclists with a lust for technology. Both having unlimited power to enrich our lives, there was never a question as to whether or not it makes sense to combine our love of motorcycles with technology. 13 |

14 |

15 | At the heart of MT-Bike's-Accesories.com is a platform developed from the ground up to provide a community environment where the spread of daily maintenance needs, upgrades, gears and accessories, useful informational support, integration ideas and technological knowledge sharing is paramount. The spirit of MT-Bike's-Accesories.com lives in the community, so making connections with other like-minded riders is easy and the more you interact, the more that wealth of information, integration, ideas and knowledge grows and becomes more and more relevant to your own interests. 16 |

17 |

18 | You don't have to buy anything to enjoy MT-Bike's-Accesories.com, but we do encourage participation from everyone and know that you'll get more out of the experience if you do. 19 |

20 |

21 | You don't have to own or even ride a motorcycle to participate in MT-Bike's-Accesories.com, but of course we advocate that everyone should get out there and do it. You know when you want to and it's always everything you think 22 |

23 |

Vision

24 |

A united, integrated, enlightened, passionate, empowered and liberated community of motorcyclists – basically a Republic of Bikers

25 |

Mission

26 |

To develop a community of passionate motorcycle users with a view to

27 |
    28 |
  1. - integrate and unite them based on their mutual needs and interests
    2. 29 |
  2. - enlighten them to reach the global standard of scopes of motorcycling
    3. 30 |
  3. - empower them with upgrades and tailored solutions to realize their desire
    4. 31 |
  4. - professionalize their hobbies for a sustainable balance of work and pleasure
    5. 32 |
  5. - liberate them for exploring the beautiful creation of Allah Subhanahu wa Ta’ala on their favorite ride.
    6. 33 |
34 |
35 | ) 36 | } 37 | 38 | export default About -------------------------------------------------------------------------------- /src/Component/Review/AddReview.js: -------------------------------------------------------------------------------- 1 | // Add Reviews 2 | import { Rating } from '@mui/material' 3 | import React, { useState } from 'react' 4 | import { useAuthState } from 'react-firebase-hooks/auth' 5 | import { toast } from 'react-toastify' 6 | import auth from '../Firebase/firebase.init' 7 | import Loading from '../Loading/Loading' 8 | import useDate from '../Shared/useDate' 9 | const AddReview = ({ show }) => { 10 | const [user, loading] = useAuthState(auth) 11 | const [submitting, setSubmitting] = useState(false) 12 | const [desc, setDesc] = useState('') 13 | const [rating, setRateing] = useState(0) 14 | const [dateToday] = useDate() 15 | const addreview = () => { 16 | if (user && desc && rating) { 17 | setSubmitting(true) 18 | fetch('https://mobile-collections-backend.vercel.app/review', { 19 | method: 'POST', 20 | headers: { 21 | 'content-type': 'application/json', 22 | auth: localStorage.getItem('accessToken') 23 | }, 24 | body: JSON.stringify({ date: dateToday, username: user.displayName, email: user.email, desc, rating, image: user.photoURL }) 25 | }).then(res => { 26 | 27 | if (res.status === 200) { 28 | setRateing(0) 29 | setDesc('') 30 | toast.success("Review Added SuccessFul") 31 | setSubmitting(false) 32 | } 33 | }) 34 | } 35 | else { 36 | alert('Plz Fill Up All') 37 | } 38 | } 39 | if (loading) { 40 | return 41 | } 42 | return ( 43 |
44 |
45 |
46 |
47 | sdsdw3e2323 48 |
49 |
50 |
51 |

{user?.displayName}

52 |

{user?.email}

53 |
54 |
55 | 56 | { 60 | setRateing(newValue); 61 | }} 62 | /> 63 |
64 | 92 |
93 | 99 | 100 |
101 | 102 | ); 103 | }; 104 | 105 | export default Contact; 106 | -------------------------------------------------------------------------------- /src/Component/Dashboard/AllUsers.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { useQuery } from 'react-query' 3 | import Loading from '../Loading/Loading' 4 | // All Users 5 | const AllUsers = () => { 6 | const { isLoading, data, refetch } = useQuery(['All-Users'], () => 7 | fetch(`https://mobile-collections-backend.vercel.app/users`,{ 8 | method:"get", 9 | headers: { 10 | auth : localStorage.getItem('accessToken') 11 | } 12 | }).then(res => 13 | res.json() 14 | ) 15 | ) 16 | const [role, setRole] = useState('am-public') 17 | if (isLoading) { 18 | return 19 | } 20 | return ( 21 |
22 |

All Users : {data.length}

23 |
24 | 34 |
35 | { 36 | role === "admin" ? : 37 | } 38 |
39 | ) 40 | } 41 | 42 | export default AllUsers 43 | 44 | const Users = ({ data, refetch }) => { 45 | const makeAdmin = (email) => { 46 | fetch(`https://mobile-collections-backend.vercel.app/users/addAdmin/${email}`, { 47 | method: "put", 48 | headers: { 49 | auth : localStorage.getItem('accessToken') 50 | } 51 | }) 52 | .then(res => refetch()) 53 | } 54 | return ( 55 |
56 | 57 | {/* head */} 58 | 59 | 60 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | { 70 | data.map(((user, index) => 71 | 72 | 73 | 80 | 81 | 82 | 85 | 88 | )) 89 | } 90 | 91 |
61 | AvaterNameEmailMake AdminRemove User
{index + 1} 74 |
75 |
76 | dsdsd 77 |
78 |
79 | 		{user.name}{user.email} 83 | 84 | 86 | 87 |
92 | 93 |
94 | ) 95 | } 96 | 97 | const Admins = ({ data, refetch }) => { 98 | const removeAdmin = (email) => { 99 | fetch(`https://mobile-collections-backend.vercel.app/users/removeAdmin/${email}`, { 100 | method: "put", 101 | headers: { 102 | auth : localStorage.getItem('accessToken') 103 | } 104 | }) 105 | .then(res => refetch()) 106 | } 107 | return ( 108 |
109 | 110 | {/* head */} 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | { 123 | data.map(((user) => 124 | 125 | 126 | 133 | 134 | 135 | 138 | 141 | )) 142 | } 143 | 144 |
AvaterNameEmailMake AdminRemove User
127 |
128 |
129 | dsdsd 130 |
131 |
132 | 		{user.name}{user.email} 136 | 137 | 139 | 140 |
145 | 146 |
147 | ) 148 | } 149 | -------------------------------------------------------------------------------- /src/Component/Navbar/Navbar.js: -------------------------------------------------------------------------------- 1 | // Navbar js 2 | 3 | import React, { useState } from 'react' 4 | 5 | import { Link, NavLink, useNavigate } from 'react-router-dom' 6 | 7 | import { useAuthState } from 'react-firebase-hooks/auth'; 8 | import auth from '../Firebase/firebase.init'; 9 | import { signOut } from 'firebase/auth'; 10 | import person from '../Images/person.png' 11 | const Navbar = () => { 12 | const [user, loading] = useAuthState(auth) 13 | //console.log(user.displayName) 14 | const navigate = useNavigate() 15 | return ( 16 |
17 | 18 |
19 |
20 |
21 | 24 |
    25 | 26 |
27 |
28 | Gadget Galaxy 29 |
30 |
31 |
    32 | 33 | {user &&
  • DashBoard
    • } 34 |
35 |
36 |
37 | { 38 | user ? 39 |
40 | 45 |
    46 |
  • 47 | 48 | Dash Board 49 | New 50 | 51 |
    • 52 | { 53 | user ? 54 |
    • 58 | : 59 |
  • Login
    • 60 | } 61 |
62 |
63 | : 64 | 65 | Login 66 | 67 | } 68 |
69 | 70 |
71 | 72 |
73 | ) 74 | } 75 | 76 | export default Navbar 77 | 78 | const Navigations = (user) => { 79 | 80 | return ( 81 | <> 82 |
  • 83 | 84 | Home 85 | 86 |
    • 87 |
  • 88 | 89 | Product 90 | 91 |
      92 | 93 | Mobile 94 | 95 | 96 | Laptop 97 | 98 |
    99 |
    • 100 |
  • Reviews
    • 101 |
  • Team
    • 102 |
  • Contact
    • 103 | 104 | 105 | ) 106 | } -------------------------------------------------------------------------------- /src/Component/Dashboard/Profile.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { useAuthState } from 'react-firebase-hooks/auth' 3 | import { useForm } from 'react-hook-form' 4 | import { useQuery } from 'react-query' 5 | import auth from '../Firebase/firebase.init' 6 | import Loading from '../Loading/Loading' 7 | // Profile js 8 | const Profile = () => { 9 | const [user, loading] = useAuthState(auth) 10 | const [edit, setEdit] = useState(false) 11 | const { register, handleSubmit, } = useForm(); 12 | const { isLoading, data, refetch } = useQuery(['Profiles'], () => 13 | fetch(`https://mobile-collections-backend.vercel.app/profile/${user.email}`, { 14 | method: "get", 15 | headers: { 16 | auth: localStorage.getItem('accessToken') 17 | } 18 | }).then(res => 19 | res.json() 20 | ) 21 | ) 22 | const onSubmit = data => { 23 | const name = user.displayName 24 | const email = user.email 25 | const others = data 26 | const profileData = { name, email, others } 27 | console.log(profileData); 28 | fetch(`https://mobile-collections-backend.vercel.app/profile/${email}`, { 29 | method: "put", 30 | headers: { 31 | 'content-type': 'application/json', 32 | auth: localStorage.getItem("accessToken") 33 | }, 34 | body: JSON.stringify(profileData) 35 | }).then(res => res.json()).then(json => { 36 | setEdit(false) 37 | refetch() 38 | }) 39 | } 40 | 41 | if (loading || isLoading) { 42 | return 43 | } 44 | return ( 45 |
    46 |
    47 |
    48 |
    49 | user avater 50 |
    51 |
    52 |

    Name : {user.displayName}

    53 |

    Email : {user.email}

    54 |

    Links

    55 |
    56 | Facebook 57 | 60 | Twitter 61 | 64 | 65 | Linkedin 66 | 67 | 70 | 71 | Github 72 | 74 |
    75 |

    Skills

    76 |
    77 | 78 | 79 | 80 | 81 | 82 | 83 |
    84 | { 85 | edit && 86 | } 87 |
    88 | { 89 | !edit && 90 | } 91 |
    92 | ) 93 | } 94 | 95 | export default Profile -------------------------------------------------------------------------------- /src/Component/Dashboard/AddProduct.js: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { useForm } from 'react-hook-form'; 3 | import { toast } from 'react-toastify'; 4 | 5 | // Add Product 6 | 7 | const AddProduct = () => { 8 | const [error, setError] = useState('') 9 | const [loading, setLoading] = useState(false) 10 | 11 | const url = `https://api.imgbb.com/1/upload?key=430f95e02b148e77494d04413a24e86c`; 12 | const { register, formState: { errors }, handleSubmit, reset } = useForm(); 13 | const onSubmit = (data) => { 14 | setLoading(true) 15 | const image = data.image[0]; 16 | const formData = new FormData() 17 | formData.append('image', image); 18 | fetch(url, { 19 | method: 'POST', 20 | body: formData 21 | }) 22 | .then(res => res.json()) 23 | .then(result => { 24 | if (result.success) { 25 | const name = data.name 26 | const price = data.price 27 | const quantity = data.quantity 28 | const image = result.data.url 29 | const description = data.description 30 | const newProduct = { name, price, quantity, image, description } 31 | console.log(newProduct) 32 | fetch('https://mobile-collections-backend.vercel.app/product', { 33 | method: "Post", 34 | headers: { 35 | 'content-type': 'application/json', 36 | auth: localStorage.getItem('accessToken') 37 | }, 38 | body: JSON.stringify(newProduct) 39 | }).then(res => { 40 | if (res.status === 200) { 41 | setLoading(false) 42 | reset() 43 | toast.success('Product Added Successful') 44 | } 45 | }) 46 | } 47 | }) 48 | } 49 | return ( 50 |
    51 |
    52 | 53 |
    54 | 55 |
    56 |
    57 |
    58 | 61 | 65 |

    {errors.name?.type === 'required' && "Plz Insert A Product Name"}

    66 |
    67 |
    68 | 71 | 74 | 75 |

    {errors.price?.type === 'required' && "Price is required"}

    76 |
    77 |
    78 | 81 | 84 |

    {errors.quantiy?.type === 'required' && "Password Required"}

    85 |
    86 | 87 |
    88 | 91 | 92 |