admin

How to Implement Upload Post Image Functionality in the MERN Stack Application

How to Implement Upload Post Image Functionality in the MERN Stack Application

Here are the steps – 1. const [formData, setFormData]=useState({}) 2. Add onChange and onclick – <FileInput type=’file’ accept=’image/*’ onChange={(e)=>setFile(e.target.files[0])}/> <Button type=’button’ gradientDuoTone=’purpleToBlue’ size=’sm’ outline onClick={handleUploadImage} disabled={imageUploadProgress}> 3. Set state const [imageUploadProgress, setImageUploadProgress]=useState(null) const [imageUploadError, setImageUploadError]=useState(null) const [formData, setFormData]=useState({}) 4. Add function for image upload – const handleUploadImage=async()=>{ try { if(!file){ setImageUploadError(‘Please select an Image’) return; } […]

How to Implement Upload Post Image Functionality in the MERN Stack Application Read More »

How to Build Create a Blog Post API in a MERN Stack App

How to Create a Blog Post API and Implement in a MERN Stack App

Here are the steps – 1. Create a route “post.route.js”- import express from ‘express’ import {verifyToken} from ‘../utils/verifyUser.js’ import { create } from ‘../controllers/post.controller.js’; const router=express.Router(); router.post(‘/create’, verifyToken, create) export default router; 2. Add route in index.js – app.use(‘/api/post’, postRoute); 3. Create a “post.controller.js” – import Post from “../models/post.model.js”; import { errorHandler } from “../utils/error.js”

How to Create a Blog Post API and Implement in a MERN Stack App Read More »

How to Create a Blog Post UI in a MERN Stack App

How to Create a Blog Post UI in a MERN Stack App

Here are the Steps – 1 – Add a property in the user model – isAdmin:{ type:Boolean, default:false }, 2. In mongoDb atlas, set isAdmin:true 3. Add isAdmin in SignIn, Google SignIn menthod – const token=jwt.sign({id:validUser._id, isAdmin:validUser.isAdmin}, process.env.JWT_SECRET_KEY); const token=jwt.sign({id:user._id, isAdmin:user.isAdmin}, process.env.JWT_SECRET_KEY); const token=jwt.sign({id:newUser._id, isAdmin:newUser.isAdmin}, process.env.JWT_SECRET_KEY); 4. Create a button “Create a Post” – {

How to Create a Blog Post UI in a MERN Stack App Read More »

How to Create User Signout API and Implement Functionality in a MERN Stack App

How to Create User Signout API and Implement Functionality in a MERN Stack App

Here are The Steps – Step 1 – Create a route – router.post(‘/signout’, signOut) Step 2 –  Create a signOut Controller – export const signOut=(req, res, next)=>{ try { res.clearCookie(‘access_token’).status(200).json(‘User has been Signout’) } catch (error) { next(error) } } Step 3 – Add onClick on SignOut Button – <span className=’ cursor-pointer’ onClick={handleSignout}>Sign Out</span> Step

How to Create User Signout API and Implement Functionality in a MERN Stack App Read More »

How to Implement Delete User Functionality in a MERN Stack App

How to Implement Delete User Functionality in a MERN Stack App

Here are the steps – Step 1 –   const [showModal, setShowModal]=useState(false); Step 2 – Add onClick – <span className=’ cursor-pointer’ onClick={()=>setShowModal(true)}>Delete Account</span>   Step 3 – Import icon to show on popup – import {HiOutlineExclamationCircle} from ‘react-icons/hi’   Step 4 – Add Modal – <Modal show={showModal} onClose={()=>setShowModal(false)} popup size=’md’>         <Modal.Header/>  

How to Implement Delete User Functionality in a MERN Stack App Read More »

How to Create Delete User API in Node Js MongoDB

How to Create Delete User API in Node JS MongoDB

Here are the Steps – 1. Create a route – router.delete(‘/delete/:userId’, verifyToken, deleteUser)   2. Create a user delete controller – export const deleteUser=async(req, res, next)=>{ if(req.user.id !== req.params.userId){ return next(errorHandler(403, ‘You are not allowed to Delete this User’)) } try { await User.findByIdAndDelete(req.params.userId); res.status(200).json(‘User Has been Deleted’) } catch (error) { next(error) } }

How to Create Delete User API in Node JS MongoDB Read More »

How to implement Update User Profile Page API Functionality in React JS

How to Create Update User Profile API and Implement in React JS

Here are the Steps: – Add route – router.put(‘/update/:userId’, verifyToken, updateUser); Install a package – npm i cookie-parser Import cookie parser in index.js – import cookieParser from ‘cookie-parser’ Use cookie parser  – app.use(cookieParser()); Create a file inside utils “verifyUser.js” import jwt from ‘jsonwebtoken’ import { errorHandler } from ‘./error.js’; export const verifyToken=(req, res, next)=>{ const

How to Create Update User Profile API and Implement in React JS Read More »

How to Implement Image Upload Functionality in React JS?

How to Implement Image Upload Functionality in React JS?

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

How to Implement Image Upload Functionality in React JS? Read More »

How to Create Responsive Profile Page in React JS

How to Create Responsive Profile Page in React JS

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

How to Create Responsive Profile Page in React JS Read More »

How to Create a Responsive Dashboard Sidebar in React JS?

How to Create a Responsive Dashboard Sidebar in React JS

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

How to Create a Responsive Dashboard Sidebar in React JS Read More »