├── src
    ├── App.css
    ├── lib
    │   └── firebase.entities.js
    ├── index.css
    ├── Components
    │   ├── card
    │   │   └── Card.jsx
    │   ├── FileInput
    │   │   └── FileInput.jsx
    │   ├── TextInput
    │   │   └── TextInput.jsx
    │   ├── Button
    │   │   └── Button.jsx
    │   ├── ImageActions
    │   │   └── ImageActions.jsx
    │   ├── ImageDisplay
    │   │   └── ImageDisplay.jsx
    │   ├── InputField
    │   │   └── InputField.jsx
    │   ├── ProductListing
    │   │   ├── components
    │   │   │   └── product
    │   │   │   │   └── ProductCard.jsx
    │   │   └── ProductListing.jsx
    │   └── Navbar.jsx
    ├── Pages
    │   ├── Dashborad
    │   │   ├── Dashboard.jsx
    │   │   ├── AddProduct.jsx
    │   │   └── AddProductForm.jsx
    │   ├── Home.jsx
    │   ├── SinglePage
    │   │   └── SinglePage.jsx
    │   └── registration
    │   │   ├── Signup.jsx
    │   │   └── Login.jsx
    ├── Router
    │   ├── protectRoute
    │   │   ├── DashboardProtect.jsx
    │   │   └── ProtectedRoute.jsx
    │   └── NavigationRouter.jsx
    ├── App.jsx
    ├── main.jsx
    ├── Firebase
    │   └── firebaseConfig.js
    └── services
    │   └── products.service.js
├── postcss.config.js
├── vite.config.js
├── tailwind.config.js
├── .gitignore
├── index.html
├── README.md
├── .env
├── .eslintrc.cjs
└── package.json


/src/App.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/lib/firebase.entities.js:
--------------------------------------------------------------------------------
1 | export const productEntity = 'products'


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/Components/card/Card.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | function Card() {
4 |   return (
5 |     <div>Card</div>
6 |   )
7 | }
8 | 
9 | export default Card


--------------------------------------------------------------------------------
/src/Pages/Dashborad/Dashboard.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | function Dashboard() {
4 |   return (
5 |     <div>Dashboard</div>
6 |   )
7 | }
8 | 
9 | export default Dashboard


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/src/Components/FileInput/FileInput.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | 
3 | const FileInput = ({ onChange }) => {
4 |   return <input type="file" onChange={onChange} />;
5 | };
6 | 
7 | export default FileInput;
8 | 


--------------------------------------------------------------------------------
/src/Router/protectRoute/DashboardProtect.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | function DashboardProtect() {
4 |   return (
5 |     <div>DashboardProtect</div>
6 |   )
7 | }
8 | 
9 | export default DashboardProtect


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./src/**/*.{js,jsx,ts,tsx}",
 5 |   ],
 6 |   theme: {
 7 |     extend: {},
 8 |   },
 9 |   plugins: [],
10 | }


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import NavigationRouter from './Router/NavigationRouter'
 3 | 
 4 | function App() {
 5 |   return (
 6 |     <div>
 7 |       <NavigationRouter/>
 8 |     </div>
 9 |   )
10 | }
11 | 
12 | export default App


--------------------------------------------------------------------------------
/src/Components/TextInput/TextInput.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | 
3 | const TextInput = ({ type, placeholder, value, onChange }) => {
4 |   return <input type={type} placeholder={placeholder} value={value} onChange={onChange} />;
5 | };
6 | 
7 | export default TextInput;
8 | 


--------------------------------------------------------------------------------
/src/Components/Button/Button.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | function Button({ onClick, className, children }) {
 4 |   return (
 5 |     <button onClick={onClick} className={className}>
 6 |       {children}
 7 |     </button>
 8 |   );
 9 | }
10 | 
11 | export default Button;


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App.jsx'
 4 | import './index.css'
 5 | 
 6 | ReactDOM.createRoot(document.getElementById('root')).render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/src/Pages/Dashborad/AddProduct.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import AddProductForm from './AddProductForm'
 3 | function AddProduct() {
 4 |   return (
 5 |     <div>
 6 |          <h1>Add product</h1>
 7 |             <AddProductForm />
 8 |     </div>
 9 |   )
10 | }
11 | 
12 | export default AddProduct


--------------------------------------------------------------------------------
/src/Components/ImageActions/ImageActions.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const ImageActions = ({ onEdit, onDelete }) => {
 4 |   return (
 5 |     <div>
 6 |       <button onClick={onEdit}>Edit</button>
 7 |       <button onClick={onDelete}>Delete</button>
 8 |     </div>
 9 |   );
10 | };
11 | 
12 | export default ImageActions;
13 | 


--------------------------------------------------------------------------------
/src/Router/protectRoute/ProtectedRoute.jsx:
--------------------------------------------------------------------------------
 1 | import { Navigate } from "react-router-dom";
 2 | 
 3 | export const ProtectedRoute = ({children}) => {
 4 |     const user = JSON.parse(localStorage.getItem('user'));
 5 | 
 6 |     if(user){
 7 |         return children
 8 |     }
 9 |     else{
10 |         return <Navigate to={'/login'}/>
11 |     }
12 |     
13 | }


--------------------------------------------------------------------------------
/src/Components/ImageDisplay/ImageDisplay.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const ImageDisplay = ({ url, name, price }) => {
 4 |   return (
 5 |     <div>
 6 |       <img src={url} alt={`Image`} height="200px" width="200px" />
 7 |       <p>Name: {name}</p>
 8 |       <p>Price: {price}</p>
 9 |     </div>
10 |   );
11 | };
12 | 
13 | export default ImageDisplay;
14 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/Components/InputField/InputField.jsx:
--------------------------------------------------------------------------------
 1 | // TextInput.js
 2 | 
 3 | import React from "react";
 4 | 
 5 | function TextInput({ type, placeholder, value, onChange }) {
 6 |   return (
 7 |     <input
 8 |       type={type}
 9 |       placeholder={placeholder}
10 |       value={value}
11 |       onChange={onChange}
12 |     />
13 |   );
14 | }
15 | 
16 | export default TextInput;
17 | 


--------------------------------------------------------------------------------
/src/Pages/Home.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Navbar from '../Components/Navbar'
 3 | import Card from '../Components/card/Card'
 4 | import ProductListing from '../Components/ProductListing/ProductListing'
 5 | function Home() {
 6 |   return (
 7 |     <div>
 8 |         <Navbar/>
 9 |         <Card/>
10 |         <ProductListing/>
11 |     </div>
12 |   )
13 | }
14 | 
15 | export default Home


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + React</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.jsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/Components/ProductListing/components/product/ProductCard.jsx:
--------------------------------------------------------------------------------
 1 | import React, { memo } from 'react'
 2 | import { Link } from 'react-router-dom'
 3 | 
 4 | function ProductCard(props) {
 5 |     const { name, price, pid } = props
 6 |     return (
 7 |         <div>
 8 |             <h2>{name}</h2>
 9 |             <p>{price}</p>
10 |             <Link to={`/product/${pid}`}>view</Link>
11 |         </div>
12 |     )
13 | }
14 | 
15 | export default memo(ProductCard)


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 | 
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 | 
5 | Currently, two official plugins are available:
6 | 
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 | 


--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
 1 | 
 2 | # const firebaseConfig = {
 3 | #   apiKey: ,
 4 | #   authDomain: ,
 5 | #   databaseURL: ,
 6 | #   projectId: ,
 7 | #   storageBucket: ,
 8 | #   messagingSenderId: ,
 9 | #   appId: ,
10 | #   measurementId: "G-82NM2JZS9D"
11 | # };
12 | 
13 | 
14 | VITE_API_KEY="AIzaSyAQjlwhuwWYJ-OdhhPP4XRxEgWSfQ5d3-o"
15 | VITE_AUTH_DOMAIN="ali-raza-518df.firebaseapp.com"
16 | VITE_DB_NAME="https://ali-raza-518df-default-rtdb.firebaseio.com"
17 | VITE_PROJECT_ID="ali-raza-518df"
18 | VITE_STORAGE_BUCKET="ali-raza-518df.appspot.com"
19 | VITE_MESSAGE_SENDER_ID="308309137877"
20 | VITE_APP_ID="1:308309137877:web:ac0be37dd3c2bb9544055c"
21 | 
22 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     'eslint:recommended',
 6 |     'plugin:react/recommended',
 7 |     'plugin:react/jsx-runtime',
 8 |     'plugin:react-hooks/recommended',
 9 |   ],
10 |   ignorePatterns: ['dist', '.eslintrc.cjs'],
11 |   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 |   settings: { react: { version: '18.2' } },
13 |   plugins: ['react-refresh'],
14 |   rules: {
15 |     'react/jsx-no-target-blank': 'off',
16 |     'react-refresh/only-export-components': [
17 |       'warn',
18 |       { allowConstantExport: true },
19 |     ],
20 |   },
21 | }
22 | 


--------------------------------------------------------------------------------
/src/Components/ProductListing/ProductListing.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react"
 2 | import { getAllProducts } from "../../services/products.service"
 3 | import ProductCard from "./components/product/ProductCard"
 4 | 
 5 | 
 6 | function ProductListing() {
 7 |   const [products, setProducts] = useState(null)
 8 |   useEffect(() => {
 9 |     (async () => {
10 |       const productsResponse = await getAllProducts()
11 |       setProducts(productsResponse)
12 |     })()
13 |   }, [])
14 | 
15 | 
16 |   if (!products) return null
17 |   
18 |   return (
19 |     <>
20 |       <h1>Product Listing</h1>
21 |       {
22 |         products.map((product, idx) => {
23 |           return <ProductCard {...product} />
24 |         })
25 |       }
26 |     </>
27 |   )
28 | }
29 | 
30 | export default ProductListing
31 | 


--------------------------------------------------------------------------------
/src/Firebase/firebaseConfig.js:
--------------------------------------------------------------------------------
 1 | import { initializeApp } from "firebase/app";
 2 | import { getAuth } from "firebase/auth";
 3 | import { getFirestore } from 'firebase/firestore';
 4 | import { getStorage } from 'firebase/storage';
 5 | import {ref,getDatabase} from "firebase/database";
 6 | 
 7 | const firebaseConfig = {
 8 |     apiKey: import.meta.env.VITE_API_KEY,
 9 |     authDomain: import.meta.env.VITE_AUTH_DOMAIN,
10 |     databaseURL: import.meta.env.VITE_DB_NAME,
11 |     projectId: import.meta.env.VITE_PROJECT_ID,
12 |     storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
13 |     messagingSenderId: import.meta.env.VITE_MESSAGE_SENDER_ID,
14 |     appId: import.meta.env.VITE_APP_ID
15 | };
16 | 
17 | const app = initializeApp(firebaseConfig);
18 | const db = getDatabase(app);
19 | const auth = getAuth(app);
20 | const imageDb = getStorage(app)
21 | 
22 | export { app, db, auth, imageDb,ref };
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mini-task",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@reduxjs/toolkit": "^2.2.3",
14 |     "antd": "^5.16.4",
15 |     "firebase": "^10.11.0",
16 |     "react": "^18.2.0",
17 |     "react-dom": "^18.2.0",
18 |     "react-form-hook": "^0.0.1",
19 |     "react-hook-form": "^7.51.3",
20 |     "react-redux": "^9.1.1",
21 |     "react-router-dom": "^6.23.0",
22 |     "react-toastify": "^10.0.5",
23 |     "uuid": "^9.0.1"
24 |   },
25 |   "devDependencies": {
26 |     "@types/react": "^18.2.66",
27 |     "@types/react-dom": "^18.2.22",
28 |     "@vitejs/plugin-react": "^4.2.1",
29 |     "autoprefixer": "^10.4.19",
30 |     "eslint": "^8.57.0",
31 |     "eslint-plugin-react": "^7.34.1",
32 |     "eslint-plugin-react-hooks": "^4.6.0",
33 |     "eslint-plugin-react-refresh": "^0.4.6",
34 |     "postcss": "^8.4.38",
35 |     "tailwindcss": "^3.4.3",
36 |     "vite": "^5.2.0"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/Components/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Link, useNavigate } from 'react-router-dom'
 3 | 
 4 | function Navbar() {
 5 |     const user = JSON.parse(localStorage.getItem('user'));
 6 |     // console.log(user)
 7 | 
 8 |     const navigate = useNavigate();
 9 | 
10 |     const logout = () =>{
11 |         localStorage.clear('user');
12 |         navigate('/login')
13 |     }
14 |     return (
15 |         <div className='main lg:flex md:flex flex-wrap justify-between items-center 
16 |      px-4 bg-[#2a056f] py-4 shadow-md'>
17 |             <div className="left">
18 |                 <div className="logo font-bold text-2xl text-white text-center">E-NoteBook</div>
19 |             </div>
20 |             <div className="right">
21 |                 <ul className='flex space-x-4 text-white justify-center items-center'>
22 |                     <Link to={'/'}>
23 |                         <li className='cursor-pointer'>Home</li>
24 |                     </Link>
25 |                     {user &&  <li  onClick={logout} className='cursor-pointer'>logout</li>}
26 |                 </ul>
27 |             </div>
28 |         </div>
29 |     )
30 | }
31 | 
32 | export default Navbar


--------------------------------------------------------------------------------
/src/Pages/SinglePage/SinglePage.jsx:
--------------------------------------------------------------------------------
 1 | // ProductDetailPage.js
 2 | import React, { useEffect, useState } from 'react';
 3 | import { useParams } from 'react-router-dom';
 4 | import { getProductData } from '../../services/products.service';
 5 | 
 6 | function SinglePage() {
 7 |   const { id } = useParams();
 8 |   const [productData, setProductData] = useState(null);
 9 | 
10 |   
11 |   useEffect(() => {
12 |     const fetchData = async () => {
13 |       try {
14 |         const data = await getProductData(id);
15 |         console.log(data)
16 |         
17 |       
18 |         setProductData(data);
19 |       } catch (error) {
20 |         console.error('Error fetching product data:', error);
21 |       }
22 |     };
23 |     fetchData();
24 |   }, [id]);
25 | 
26 |   return (
27 |     <>
28 |       {/* Render product data here */}
29 |       {productData && (
30 |         <div>
31 |           {/* Render product details using productData */}
32 |           <h2>{productData[0]}</h2>
33 |           <p>{productData[1]}</p>
34 |           <p>{productData[2]}</p>
35 |           <p>{productData[3]}</p>
36 |           <p>{productData[4]}</p>
37 |           <p>{productData[5]}</p>
38 |           {/* Add other product details rendering here */}
39 |         </div>
40 |       )}
41 |     </>
42 |   );
43 | }
44 | 
45 | export default SinglePage;
46 | 


--------------------------------------------------------------------------------
/src/Router/NavigationRouter.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 3 | import Home from "../Pages/Home";
 4 | import Login from "../Pages/registration/Login";
 5 | import Signup from "../Pages/registration/Signup";
 6 | import { ProtectedRoute } from "./protectRoute/ProtectedRoute";
 7 | import Dashboard from "../Pages/Dashborad/Dashboard";
 8 | import DashboardProtect from "./protectRoute/DashboardProtect";
 9 | import SinglePage from "../Pages/SinglePage/SinglePage";
10 | import AddProduct from "../Pages/Dashborad/AddProduct";
11 | 
12 | function NavigationRouter() {
13 |   return (
14 |     <Router>
15 |       <Routes>
16 |         <Route
17 |           path="/"
18 |           element={
19 |             <ProtectedRoute>
20 |               <Home />
21 |             </ProtectedRoute>
22 |           }
23 |         />
24 |         <Route
25 |           path="/product/:id"
26 |           element={
27 |             <ProtectedRoute>
28 |               <SinglePage />
29 |             </ProtectedRoute>
30 |           }
31 |         />
32 |         <Route
33 |           path="/addProduct"
34 |           element={
35 |             <ProtectedRoute>
36 |               <AddProduct />
37 |             </ProtectedRoute>
38 |           }
39 |         />
40 |         <Route path="/login" element={<Login />} />
41 |         <Route path="/signup" element={<Signup />} />
42 |     
43 |       </Routes>
44 |     </Router>
45 |   );
46 | }
47 | 
48 | export default NavigationRouter;
49 | 


--------------------------------------------------------------------------------
/src/Pages/Dashborad/AddProductForm.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Form, Input, InputNumber, Upload, Button } from 'antd';
 3 | import { UploadOutlined } from '@ant-design/icons';
 4 | import { addProduct } from '../../services/products.service';
 5 | const { TextArea } = Input;
 6 | 
 7 | const AddProductForm = () => {
 8 |   const onFinish = async(data) => {
 9 |     console.log('Form data:', data);
10 |     // console.log('Form data:', data.upload[0].originFileObj.name);
11 |     const addProductResponse = await addProduct(data);
12 |   };
13 | 
14 |   return (
15 |     <Form
16 |       name="my-form"
17 |       initialValues={{ remember: true }}
18 |       onFinish={onFinish}
19 |     >
20 |       <Form.Item
21 |         label="Name"
22 |         name="name"
23 |         rules={[{ required: true, message: 'Please enter name!' }]}
24 |       >
25 |         <Input />
26 |       </Form.Item>
27 | 
28 |       <Form.Item
29 |         label="Price"
30 |         name="price"
31 |         rules={[{ required: true, message: 'Please enter price!' }]}
32 |       >
33 |         <InputNumber />
34 |       </Form.Item>
35 | 
36 |       <Form.Item
37 |         label="Description"
38 |         name="description"
39 |         rules={[{ required: true, message: 'Please enter description!' }]}
40 |       >
41 |         <TextArea rows={4} />
42 |       </Form.Item>
43 | 
44 |       <Form.Item
45 |         label="Upload"
46 |         name="upload"
47 |         valuePropName="fileList"
48 |         getValueFromEvent={(e) => {
49 |           if (Array.isArray(e)) {
50 |             return e;
51 |           }
52 |           return e && e.fileList;
53 |         }}
54 |         rules={[{ required: true, message: 'Please upload a file!' }]}
55 |       >
56 |         <Upload name="logo" action="/upload.do" listType="picture">
57 |           <Button icon={<UploadOutlined />}>Click to upload</Button>
58 |         </Upload>
59 |       </Form.Item>
60 | 
61 |       <Form.Item>
62 |         <Button type="primary" htmlType="submit">
63 |           Submit
64 |         </Button>
65 |       </Form.Item>
66 |     </Form>
67 |   );
68 | };
69 | 
70 | export default AddProductForm;
71 | 


--------------------------------------------------------------------------------
/src/services/products.service.js:
--------------------------------------------------------------------------------
 1 | import { child, get, push, ref, set,onValue } from "firebase/database"
 2 | import { db,imageDb } from "../Firebase/firebaseConfig"
 3 | import { productEntity } from "../lib/firebase.entities.js"
 4 | import { toast } from 'react-toastify';
 5 | import { ref as storageRef, uploadBytes ,getDownloadURL} from 'firebase/storage';
 6 | import { v4 as uuidv4 } from 'uuid';
 7 | 
 8 | const dbRef = ref(db)
 9 | 
10 | export const getAllProducts = async () => {
11 |     try {
12 |         const response = await get(child(dbRef, productEntity))
13 | 
14 |         if (response.exists()) {
15 |             const data = response.val()
16 |             return Object.values(data)
17 |         }
18 |     } catch (error) {
19 |         console.error('Error', error)
20 |     }
21 | }
22 | 
23 | 
24 | export const addProduct = async (data) => {
25 |     console.log(data); // Logging form data for debugging
26 | 
27 |     try {
28 |         // Upload the image to Firebase Storage
29 |         const imageFile = data.upload[0].originFileObj; // Extracting the image file from Ant Design Upload component
30 |         const storageImageRef = storageRef(imageDb, `images/${imageFile.name}`);
31 |         await uploadBytes(storageImageRef, imageFile);
32 | 
33 |         // Get the download URL of the uploaded image
34 |         const downloadUrl = await getDownloadURL(storageImageRef);
35 | 
36 |         // Save product data along with the image URL to Firebase Realtime Database
37 |         const productKey = push(ref(db, 'products')).key;
38 |         const productRef = ref(db, `products/${productKey}`);
39 | 
40 |         // Set product data including image URL
41 |         await set(productRef, {
42 |             pid: productKey,
43 |             imageUrl: downloadUrl,
44 |             ...data
45 |         });
46 | 
47 |         // Show success toast message
48 |         toast.success('Product added successfully!');
49 | 
50 |         return { success: true, productId: productKey };
51 |     } catch (error) {
52 |         console.error('Error adding product:', error);
53 | 
54 |         // Show error toast message
55 |         toast.error('Failed to add product.');
56 | 
57 |         return { success: false, error };
58 |     }
59 | };
60 | export const getProductData = async (id) => {
61 |     try {
62 |         const response = await get(child(dbRef, productEntity+'/'+id))
63 | 
64 |         if (response.exists()) {
65 |             const data = response.val()
66 |             return Object.values(data)
67 |         }
68 |     } catch (error) {
69 |         console.error('Error', error)
70 |     }
71 |   };


--------------------------------------------------------------------------------
/src/Pages/registration/Signup.jsx:
--------------------------------------------------------------------------------
 1 | import { createUserWithEmailAndPassword } from 'firebase/auth';
 2 | import { useState } from 'react';
 3 | import { Link } from 'react-router-dom'
 4 | import { auth } from '../../Firebase/firebaseConfig';
 5 | 
 6 | function Signup() {
 7 |     const [email, setEmail] = useState('');
 8 |     const [password, setPassword] = useState('');
 9 | 
10 |     const signup = async () => {
11 |         if(email === "" || password === ""){
12 |             return alert("Please fill all fields")
13 |         }
14 |         try {
15 |             const user = await createUserWithEmailAndPassword(auth, email, password);
16 |             alert("Signup Successful");
17 |             setEmail("");
18 |             setPassword("");
19 |         } catch (error) {
20 |             console.log(error);
21 |         }
22 |     }
23 | 
24 |     return (
25 |         <div className=' flex justify-center items-center h-screen'>
26 |             <div className=' bg-gray-800 px-10 py-10 rounded-xl '>
27 |                 <div className="">
28 |                     <h1 className='text-center text-white text-xl mb-4 font-bold'>Signup</h1>
29 |                 </div>
30 |                 <div>
31 |                     <input 
32 |                         type="email"
33 |                         value={email}
34 |                         onChange={(e)=> setEmail(e.target.value)}
35 |                         name='email'
36 |                         className=' bg-gray-600 mb-4 px-2 py-2 w-full lg:w-[20em] rounded-lg text-white placeholder:text-gray-200 outline-none'
37 |                         placeholder='Email'
38 |                     />
39 |                 </div>
40 |                 <div>
41 |                     <input
42 |                         type="password"
43 |                         value={password}
44 |                         onChange={(e)=> setPassword(e.target.value)}
45 |                         className=' bg-gray-600 mb-4 px-2 py-2 w-full lg:w-[20em] rounded-lg text-white placeholder:text-gray-200 outline-none'
46 |                         placeholder='Password'
47 |                     />
48 |                 </div>
49 |                 <div className=' flex justify-center mb-3'>
50 |                     <button
51 |                     onClick={signup}
52 |                         className=' bg-red-500 w-full text-white font-bold  px-2 py-2 rounded-lg'>
53 |                         Signup
54 |                     </button>
55 |                 </div>
56 |                 <div>
57 |                     <h2 className='text-white'>Don't have an account <Link className=' text-red-500 font-bold' to={'/login'}>Login</Link></h2>
58 |                 </div>
59 |             </div>
60 |         </div>
61 |     )
62 | }
63 | 
64 | export default Signup


--------------------------------------------------------------------------------
/src/Pages/registration/Login.jsx:
--------------------------------------------------------------------------------
 1 | import { signInWithEmailAndPassword } from 'firebase/auth';
 2 | import { useState } from 'react';
 3 | import { Link, useNavigate } from 'react-router-dom';
 4 | import { auth } from '../../Firebase/firebaseConfig';
 5 | import { ToastContainer, toast } from 'react-toastify';
 6 | import 'react-toastify/dist/ReactToastify.css';
 7 | 
 8 | function Login() {
 9 |     const [email, setEmail] = useState('');
10 |     const [password, setPassword] = useState('');
11 |     const navigate = useNavigate();
12 | 
13 |     const signin = async () => {
14 |         if (!email.trim() || !password.trim()) {
15 |             return toast.error("Please fill in all fields");
16 |         }
17 |         if (!validateEmail(email)) {
18 |             return toast.error("Please enter a valid email address");
19 |         }
20 |         try {
21 |             await signInWithEmailAndPassword(auth, email, password);
22 |             localStorage.setItem('user', JSON.stringify(auth.currentUser));
23 |             toast.success("Signin Successful");
24 |             navigate('/');
25 |         } catch (error) {
26 |             console.log(error);
27 |             if (error.code === "auth/user-not-found" || error.code === "auth/wrong-password") {
28 |                 toast.error("Invalid email or password. Please try again.");
29 |             } else {
30 |                 toast.error("An error occurred during sign-in. Please try again later.");
31 |             }
32 |         }
33 |     };
34 | 
35 |     const validateEmail = (email) => {
36 |         // Basic email validation using regular expression
37 |         const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
38 |         return regex.test(email);
39 |     };
40 | 
41 |     return (
42 |         <div className='flex justify-center items-center h-screen'>
43 |             <div className=' bg-gray-800 px-10 py-10 rounded-xl '>
44 |                 <div className="">
45 |                     <h1 className='text-center text-white text-xl mb-4 font-bold'>Login</h1>
46 |                 </div>
47 |                 <div>
48 |                     <input type="email"
49 |                         value={email}
50 |                         onChange={(e) => setEmail(e.target.value)}
51 |                         name='email'
52 |                         className=' bg-gray-600 mb-4 px-2 py-2 w-full lg:w-[20em] rounded-lg text-white placeholder:text-gray-200 outline-none'
53 |                         placeholder='Email'
54 |                     />
55 |                 </div>
56 |                 <div>
57 |                     <input
58 |                         type="password"
59 |                         value={password}
60 |                         onChange={(e) => setPassword(e.target.value)}
61 |                         className=' bg-gray-600 mb-4 px-2 py-2 w-full lg:w-[20em] rounded-lg text-white placeholder:text-gray-200 outline-none'
62 |                         placeholder='Password'
63 |                     />
64 |                 </div>
65 |                 <div className=' flex justify-center mb-3'>
66 |                     <button
67 |                         onClick={signin}
68 |                         className=' bg-yellow-500 w-full text-black font-bold  px-2 py-2 rounded-lg'>
69 |                         Login
70 |                     </button>
71 |                 </div>
72 |                 <div>
73 |                     <h2 className='text-white'>Don't have an account
74 |                         <Link className=' text-yellow-500 font-bold' to={'/signup'}> Signup</Link></h2>
75 |                 </div>
76 |                 <ToastContainer position="bottom-right" />
77 |             </div>
78 |         </div>
79 |     )
80 | }
81 | 
82 | export default Login;
83 | 


--------------------------------------------------------------------------------