admin

Here is complete code – DeshProfile.jsx: import React, { useEffect, useRef, useState } from ‘react’ import { Alert, Button, TextInput } from ‘flowbite-react’ import {useSelector} from ‘react-redux’import {app} from ‘../firebase’import {getDownloadURL, getStorage, ref, uploadBytesResumable} from ‘firebase/storage’ import { CircularProgressbar } from ‘react-circular-progressbar’; import ‘react-circular-progressbar/dist/styles.css’; const DashProfile = () => {   const {currentUser}=useSelector(state=>state.user)   const […]

Here are the steps: – Add a H1 Heading. Add Profile Image. Add Input fields. Add a button. Add another two button Here is complete code – DashProfile.jsx: import React from ‘react’import { Button, TextInput } from ‘flowbite-react’import {useSelector} from ‘react-redux’const DashProfile = () => {  const {currentUser}=useSelector(state=>state.user)  return (    <div className=’ max-w-lg mx-auto

Here are the Steps – 1.  Create Component – DashSidebar.jsx: import {Sidebar} from ‘flowbite-react’ import { useEffect, useState } from ‘react’; import {HiUser, HiArrowSmRight} from ‘react-icons/hi’ import {Link, useLocation} from ‘react-router-dom’ const DashSidebar = () => { const location=useLocation(); const [tab, setTab]=useState(”); useEffect(()=>{ const urlParams=new URLSearchParams(location.search); const tabFromUrl=urlParams.get(‘tab’); if(tabFromUrl){ setTab(tabFromUrl) } },[location.search]) return ( <Sidebar

Here are the steps – 1.  Create a component “PrivateRoute.jsx” import {useSelector} from ‘react-redux’ import {Navigate, Outlet, } from ‘react-router-dom’ const PrivateRoute = () => { const {currentUser}=useSelector((state)=>state.user) return currentUser ? <Outlet/> : <Navigate to=’/signin’/> } export default PrivateRoute 2. Add These in App.jsx – <Route element={<PrivateRoute/>}> <Route path=’/dashboard’ element={<Dashboard/>}/> </Route> Video Tutorial:

Here are steps: – 1. Create a folder “theme” under src>redux Create a file “themeSlice.js” inside “theme” folder themeSlice.js: import {createSlice} from ‘@reduxjs/toolkit’ const initialState={ theme:’light’ }; const themeSlice=createSlice({ name:’theme’, initialState, reducers:{ toggleTheme:(state)=>{ state.theme=state.theme===’light’ ? ‘dark’ :’light’; } } }) export const {toggleTheme}=themeSlice.actions; export default themeSlice.reducer; 2. Add themeReducer in store.js – import themeReducer from

Here are steps: – 1. import userSelecter from ‘react-redux’ 2. Define user State const {currentUser}=useSelector(state=>state.user)   3. Add condition in Header.jsx – { currentUser ?( <Dropdown arrowIcon={false} inline label={<Avatar alt=’user’ img={currentUser.profilePicture} rounded/>}> <Dropdown.Header> <span className=’block text-sm’>@{currentUser.username}</span> <span className=’block text-sm font-medium truncate’>{currentUser.email}</span> </Dropdown.Header> <Link to={‘/dashboard?tab=profile’}> <Dropdown.Item>Profile</Dropdown.Item> </Link> <Dropdown.Divider/> <Dropdown.Item> Sign Out </Dropdown.Item> </Dropdown> ):( <Link to=’/signin’>

Here are steps – 1. Create a component  –  “OAuth.jsx” 2. Add this component in Sign In and Sign Up page where you want to add this functionality. 3. Design “OAuth.jsx” Page – import { Button } from ‘flowbite-react’ import React from ‘react’ import {AiFillGoogleCircle} from ‘react-icons/ai’ import { GoogleAuthProvider, getAuth, signInWithPopup } from ‘firebase/auth’

1. Install a Package npm i redux-persist 2. Add Persist Reducer in “store.js” store.js: – import { configureStore, combineReducers } from ‘@reduxjs/toolkit’ import userReducer from ‘./user/userSlice’ import {persistReducer, persistStore} from ‘redux-persist’ import storage from ‘redux-persist/lib/storage’   const rootReducer=combineReducers({   user:userReducer })   const persistConfig={   key:’root’,   storage,   version:1 } const persistedReducer=persistReducer(persistConfig, rootReducer);  

1. Install a package –   npm install @reduxjs/toolkit react-redux 2. Create a redux store. Create a folder “redux” inside “src” and create a file “store.js”. Paste this code. import { configureStore } from ‘@reduxjs/toolkit’ import userReducer from ‘./user/userSlice’ export const store = configureStore({ reducer: { user:userReducer }, }) 3. Go to “main.jsx” – import store and

Here are steps – 1. Create a Sign-In Page UI. 2. Add OnChange method in all input fields – onChange={handleChange} 3. Add OnSubmit Handler in form tag – onSubmit={handleSubmit} 4. Write OnChange menthod body – const handleChange=(e)=>{ setFormData({…formData, [e.target.id]:e.target.value.trim()}) }; 5. Write OnSubmit Handler function body – const handleSubmit=async(e)=>{ e.preventDefault(); if(!formData.email || !formData.password || !formData.email===”