React JS

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===”

1. Define a route in auth.route.js – router.post(‘/signin’, signin)   2. create a signin controller in auth.controller.js. 3. Install a package to generate a sign-in token npm i jsonwebtoken 4. Define a secret key in .env file – JWT_SECRET_KEY=’SecretKeyCanbeAnyRandomString’ 5. Check User has enter valid email id and password. If not, return a Error. 6.

1. Create a Footer.jsx inside the components folder. 2. Add Footer component in App.jsx 3. Go on Flowbite website in Footer components, choose footer design. 4. Copy Footer code and paste it in Footer.jsx. 5. Customize Logo image, URLs, Links, etc. Footer.jsx:- import { Footer } from ‘flowbite-react’; import { BsDribbble, BsFacebook, BsGithub, BsInstagram, BsTwitter

1. Update form text input type email field type=’email’password=’password’. Add type=’submit’ in form button 2. Define onChange function in all text input – onChange={handleChange} 3. Add this function in the starting of signup function andbefore return statement –   const [formData, setFormData]=useState({})   const handleChange=(e)=>{     setFormData({…formData, [e.target.id]:e.target.value.trim()})   };   console.log(formData) 4. add