├── frontend
    ├── src
    │   ├── App.css
    │   ├── components
    │   │   ├── ScrollToTop.jsx
    │   │   ├── AdminPrivateRoute.jsx
    │   │   ├── PrivateRoute.jsx
    │   │   ├── ThemeProvider.jsx
    │   │   ├── CallToAction.jsx
    │   │   ├── PostCard.jsx
    │   │   ├── OAuth.jsx
    │   │   ├── Footer.jsx
    │   │   ├── DashSidbar.jsx
    │   │   ├── Header.jsx
    │   │   ├── Comment.jsx
    │   │   ├── DashComments.jsx
    │   │   ├── DashUsers.jsx
    │   │   ├── DashPosts.jsx
    │   │   ├── CommentSection.jsx
    │   │   ├── DashboardComp.jsx
    │   │   └── DashProfile.jsx
    │   ├── redux
    │   │   ├── reducers
    │   │   │   ├── theme
    │   │   │   │   └── themeSlice.js
    │   │   │   └── user
    │   │   │   │   └── userSlice.js
    │   │   └── store
    │   │   │   └── store.js
    │   ├── pages
    │   │   ├── Projects.jsx
    │   │   ├── Dashboard.jsx
    │   │   ├── About.jsx
    │   │   ├── PageNotFound.jsx
    │   │   ├── Home.jsx
    │   │   ├── PostPage.jsx
    │   │   ├── SignIn.jsx
    │   │   ├── SignUp.jsx
    │   │   ├── CreatePost.jsx
    │   │   ├── Search.jsx
    │   │   └── UpdatePost.jsx
    │   ├── index.css
    │   ├── main.jsx
    │   ├── firebase.js
    │   └── App.jsx
    ├── .env
    ├── postcss.config.js
    ├── index.html
    ├── vite.config.js
    ├── .gitignore
    ├── README.md
    ├── tailwind.config.js
    ├── .eslintrc.cjs
    └── package.json
├── backend
    ├── utils
    │   ├── error.js
    │   └── verifyUser.js
    ├── router
    │   ├── auth.routes.js
    │   ├── post.routes.js
    │   ├── user.routes.js
    │   └── comment.routes.js
    ├── .gitignore
    ├── config
    │   └── config.js
    ├── model
    │   ├── comment.model.js
    │   ├── users.model.js
    │   └── post.model.js
    ├── package.json
    ├── index.js
    └── controller
    │   ├── auth.controller.js
    │   ├── post.controller.js
    │   ├── comment.controller.js
    │   └── user.controller.js
└── .gitignore


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


--------------------------------------------------------------------------------
/frontend/.env:
--------------------------------------------------------------------------------
1 | VITE_FIREBASE_API = "AIzaSyDs7gM38dGMGUXMXr6Xou6NOZ3Xtyeq_p8"
2 | 


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


--------------------------------------------------------------------------------
/backend/utils/error.js:
--------------------------------------------------------------------------------
1 | const errorHandler = (statusCode, message) => {
2 |   const error = new Error();
3 |   error.statusCode = statusCode;
4 |   error.message = message;
5 |   return error;
6 | };
7 | 
8 | module.exports = errorHandler;
9 | 


--------------------------------------------------------------------------------
/frontend/src/components/ScrollToTop.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | import { useLocation } from "react-router-dom";
 3 | 
 4 | export default function ScrollToTop() {
 5 |   const { pathname } = useLocation();
 6 |   useEffect(() => {
 7 |     window.scrollTo(0, 0);
 8 |   }, [pathname]);
 9 |   return null;
10 | }
11 | 


--------------------------------------------------------------------------------
/backend/router/auth.routes.js:
--------------------------------------------------------------------------------
 1 | const { signup, signin, googleAuth } = require("../controller/auth.controller");
 2 | 
 3 | const authRoutes = require("express").Router();
 4 | 
 5 | authRoutes.post("/signup", signup);
 6 | authRoutes.post("/signin", signin);
 7 | authRoutes.post('/google', googleAuth);
 8 | 
 9 | module.exports = authRoutes;
10 | 


--------------------------------------------------------------------------------
/frontend/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Blog</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="root"></div>
10 |     <script type="module" src="/src/main.jsx"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/frontend/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 |   server:{
 7 |     proxy:{
 8 |       '/api':{
 9 |         target : 'http://localhost:8080',
10 |         secure:false
11 |       }
12 |     }
13 |   },
14 |   plugins: [react()],
15 | })
16 | 


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


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


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


--------------------------------------------------------------------------------
/frontend/src/components/AdminPrivateRoute.jsx:
--------------------------------------------------------------------------------
 1 | import { useSelector } from "react-redux";
 2 | import { Navigate, Outlet } from "react-router-dom";
 3 | 
 4 | export function AdminPrivateRoute() {
 5 |   const { currentUser } = useSelector((state) => state.user);
 6 |   return currentUser && currentUser.isAdmin ? (
 7 |     <Outlet />
 8 |   ) : (
 9 |     <Navigate to={"/sign-in"} />
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/backend/config/config.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require('mongoose');
 2 | 
 3 | 
 4 | const startConnection=(URI)=>{
 5 | 
 6 |     mongoose.connect(URI)
 7 |     .then((res)=>{
 8 |         console.log(`Server is Connected to ${res.connection.host}`);
 9 |     })
10 |     .catch((err)=>{
11 |         console.log(`Error connecting to ${err.message}`);
12 |     });
13 | 
14 | }
15 | 
16 | module.exports = startConnection;


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


--------------------------------------------------------------------------------
/frontend/src/redux/reducers/theme/themeSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice } from "@reduxjs/toolkit";
 2 | 
 3 | const initialState = {
 4 |   theme: "light",
 5 | };
 6 | 
 7 | const themeSlice = createSlice({
 8 |   name: "theme",
 9 |   initialState,
10 |   reducers: {
11 |     toogletheme: (state) => {
12 |       state.theme = state.theme === "light" ? "dark" : "light";
13 |     },
14 |   },
15 | });
16 | 
17 | export const { toogletheme } = themeSlice.actions;
18 | export default themeSlice.reducer;
19 | 


--------------------------------------------------------------------------------
/frontend/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | import Flowbite  from 'flowbite/plugin'
 3 | import tailwindScrollbar from "tailwind-scrollbar";
 4 | export default {
 5 |   content: [
 6 |     "./index.html",
 7 |     "./src/**/*.{js,ts,jsx,tsx}",
 8 |     'node_modules/flowbite-react/lib/esm/**/*.js',
 9 |   ],
10 |   theme: {
11 |     extend: {},
12 |   },
13 |   plugins: [
14 |     // require('flowbite/plugin'),
15 |     Flowbite,
16 |     tailwindScrollbar,
17 |   ],
18 | }


--------------------------------------------------------------------------------
/frontend/src/components/PrivateRoute.jsx:
--------------------------------------------------------------------------------
 1 | import { useSelector } from "react-redux";
 2 | import { Navigate, Outlet } from "react-router-dom";
 3 | 
 4 | export function PrivateRoute() {
 5 |   const { currentUser } = useSelector((state) => state.user);
 6 |   return currentUser ? <Outlet /> : <Navigate to={"/sign-in"} />;
 7 | }
 8 | 
 9 | export function ProtectedRoute() {
10 |   const { currentUser } = useSelector((state) => state.user);
11 |   return currentUser ? <Navigate to={"/"} /> : <Outlet />;
12 | }
13 | 


--------------------------------------------------------------------------------
/backend/router/post.routes.js:
--------------------------------------------------------------------------------
 1 | const { create, getPosts, updatePost, deletePost } = require('../controller/post.controller');
 2 | const verifyToken = require('../utils/verifyUser');
 3 | 
 4 | const postRoutes = require('express').Router();
 5 | 
 6 | 
 7 | postRoutes.post('/create', verifyToken, create);
 8 | postRoutes.get('/getposts', getPosts);
 9 | postRoutes.put('/updatepost/:postId/:userId', verifyToken, updatePost);
10 | postRoutes.delete('/deletepost/:postId/:userId', verifyToken, deletePost);
11 | 
12 | module.exports = postRoutes;


--------------------------------------------------------------------------------
/frontend/src/pages/Projects.jsx:
--------------------------------------------------------------------------------
 1 | import CallToAction from "../components/CallToAction";
 2 | 
 3 | export default function Projects() {
 4 |   return (
 5 |     <div className="min-h-screen max-w-2xl mx-auto flex justify-center items-center flex-col gap-6 p-3">
 6 |       <h1 className="text-3xl font-semibold">Pojects</h1>
 7 |       <p className="text-md text-gray-500">
 8 |         Build fun and engaging projects while learning HTML, CSS, and
 9 |         JavaScript!
10 |       </p>
11 |       <CallToAction />
12 |     </div>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/frontend/src/components/ThemeProvider.jsx:
--------------------------------------------------------------------------------
 1 | import { useSelector } from "react-redux";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | export default function ThemeProvider({ children }) {
 5 |   const { theme } = useSelector((state) => state.theme);
 6 |   return (
 7 |     <div className={theme}>
 8 |       <div className="bg-white text-gray-700 dark:text-gray-200 dark:bg-[rgb(16,23,42)] min-h-screen">
 9 |         {children}
10 |       </div>
11 |     </div>
12 |   );
13 | }
14 | 
15 | ThemeProvider.propTypes = {
16 |   children: PropTypes.node,
17 | };
18 | 


--------------------------------------------------------------------------------
/backend/router/user.routes.js:
--------------------------------------------------------------------------------
 1 | const { test, updateUser, deleteUser, signOut, getUsers, getUser } = require("../controller/user.controller");
 2 | const verifyToken = require("../utils/verifyUser");
 3 | 
 4 | const userRoutes = require("express").Router();
 5 | 
 6 | userRoutes.get("/", test);
 7 | userRoutes.put("/update/:userId", verifyToken, updateUser);
 8 | userRoutes.delete("/delete/:userId", verifyToken, deleteUser);
 9 | userRoutes.post("/signout", signOut);
10 | userRoutes.get("/getUsers", verifyToken, getUsers);
11 | userRoutes.get('/:userId', getUser);
12 | 
13 | module.exports = userRoutes;
14 | 


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


--------------------------------------------------------------------------------
/backend/model/comment.model.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require("mongoose");
 2 | 
 3 | const commentSchema = mongoose.Schema(
 4 |   {
 5 |     content: {
 6 |       type: String,
 7 |       required: true,
 8 |     },
 9 |     postId: {
10 |       type: String,
11 |       required: true,
12 |     },
13 |     userId: {
14 |       type: String,
15 |       required: true,
16 |     },
17 |     likes: {
18 |       type: Array,
19 |       default: [],
20 |     },
21 |     numberofLikes: {
22 |       type: Number,
23 |       default: 0,
24 |     },
25 |   },
26 |   { timestamps: true }
27 | );
28 | 
29 | const COMMENT = mongoose.model("COMMENT", commentSchema);
30 | 
31 | module.exports = COMMENT;
32 | 


--------------------------------------------------------------------------------
/backend/utils/verifyUser.js:
--------------------------------------------------------------------------------
 1 | const jwt = require('jsonwebtoken');
 2 | const errorHandler = require("./error");
 3 | 
 4 | 
 5 | const verifyToken = (req , res , next) => {
 6 |     const token = req.cookies.access_token
 7 |     if(!token){
 8 |         return next(errorHandler(401,'Unauthorized access'));
 9 |     }
10 |     try {
11 |         jwt.verify(token,process.env.JWT_SECRETKEY, (err, user)=>{
12 |             if(err){
13 |                 return next(errorHandler("Unauthorized Access"));
14 |             }
15 |             req.user = user;
16 |             next()
17 |         })
18 |     } catch (error) {
19 |         next(error)
20 |     }
21 | }
22 | 
23 | module.exports = verifyToken


--------------------------------------------------------------------------------
/frontend/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | body {
 6 |   height: 100vh;
 7 | }
 8 | 
 9 | .ql-editor {
10 |   font-size: 1.05rem;
11 | }
12 | .post-content p {
13 |   margin-bottom: 0.5rem;
14 | }
15 | .post-content h1 {
16 |   font-size: 1.5rem;
17 |   font-weight: 600;
18 |   font-family: sans-serif;
19 |   margin: 1.5rem 0;
20 | }
21 | .post-content h2 {
22 |   font-size: 1.4rem;
23 |   font-family: sans-serif;
24 |   margin: 1.5rem 0;
25 | }
26 | .post-content a {
27 |   color: rgb(73, 149, 139);
28 |   text-decoration: none;
29 | }
30 | .post-content a:hover {
31 |   text-decoration: underline;
32 | }
33 | 
34 | .dark .post-content a {
35 |   color: red;
36 | }
37 | 


--------------------------------------------------------------------------------
/frontend/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 | import { Provider } from "react-redux";
 6 | import { store, persistor } from "./redux/store/store.js";
 7 | import { PersistGate } from "redux-persist/integration/react";
 8 | import ThemeProvider from "./components/ThemeProvider.jsx";
 9 | 
10 | ReactDOM.createRoot(document.getElementById("root")).render(
11 |   <React.StrictMode>
12 |     <PersistGate persistor={persistor}>
13 |       <Provider store={store}>
14 |         <ThemeProvider>
15 |           <App />
16 |         </ThemeProvider>
17 |       </Provider>
18 |     </PersistGate>
19 |   </React.StrictMode>
20 | );
21 | 


--------------------------------------------------------------------------------
/backend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "backend",
 3 |   "version": "1.0.0",
 4 |   "description": "Nitin's Blog Backend",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "start": "node index.js",
 9 |     "dev": "nodemon start index.js",
10 |     "build": "npm install && npm install --prefix ../frontend && npm run build --prefix ../frontend"
11 |   },
12 |   "author": "Nitin Rajput",
13 |   "license": "ISC",
14 |   "dependencies": {
15 |     "bcrypt": "^5.1.1",
16 |     "cookie-parser": "^1.4.6",
17 |     "cors": "^2.8.5",
18 |     "dotenv": "^16.4.5",
19 |     "express": "^4.18.3",
20 |     "jsonwebtoken": "^9.0.2",
21 |     "mongoose": "^8.2.2",
22 |     "nodemon": "^3.1.0"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/backend/router/comment.routes.js:
--------------------------------------------------------------------------------
 1 | const {
 2 |   createComment,
 3 |   getPostsComment,
 4 |   likeComment,
 5 |   editComment,
 6 |   deleteComment,
 7 |   getComments,
 8 | } = require("../controller/comment.controller");
 9 | const verifyToken = require("../utils/verifyUser");
10 | 
11 | const commentRoutes = require("express").Router();
12 | 
13 | commentRoutes.post("/create", verifyToken, createComment);
14 | commentRoutes.get("/getPostComment/:postId", getPostsComment);
15 | commentRoutes.put("/likeComment/:commentId", verifyToken, likeComment);
16 | commentRoutes.put("/editComment/:commentId", verifyToken, editComment);
17 | commentRoutes.delete("/deleteComment/:commentId", verifyToken, deleteComment);
18 | commentRoutes.get('/getComments', verifyToken, getComments);
19 | 
20 | module.exports = commentRoutes;
21 | 


--------------------------------------------------------------------------------
/frontend/src/firebase.js:
--------------------------------------------------------------------------------
 1 | // Import the functions you need from the SDKs you need
 2 | import { initializeApp } from "firebase/app";
 3 | // TODO: Add SDKs for Firebase products that you want to use
 4 | // https://firebase.google.com/docs/web/setup#available-libraries
 5 | 
 6 | // Your web app's Firebase configuration
 7 | // For Firebase JS SDK v7.20.0 and later, measurementId is optional
 8 | const firebaseConfig = {
 9 |   apiKey: import.meta.env.VITE_FIREBASE_API,
10 |   authDomain: "nitin-s-blog.firebaseapp.com",
11 |   projectId: "nitin-s-blog",
12 |   storageBucket: "nitin-s-blog.appspot.com",
13 |   messagingSenderId: "22846366881",
14 |   appId: "1:22846366881:web:21063a883f4990a8617ce0",
15 |   measurementId: "G-76GXJ4NHCS",
16 | };
17 | 
18 | // Initialize Firebase
19 | export const app = initializeApp(firebaseConfig);
20 | 


--------------------------------------------------------------------------------
/backend/model/users.model.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require("mongoose");
 2 | 
 3 | const userSchema = new mongoose.Schema(
 4 |   {
 5 |     username: {
 6 |       type: String,
 7 |       required: true,
 8 |       unique: true,
 9 |     },
10 |     email: {
11 |       type: String,
12 |       required: true,
13 |       unique: true,
14 |     },
15 |     password: {
16 |       type: String,
17 |       required: true,
18 |     },
19 |     profilePicture: {
20 |       type: String,
21 |       default : 'https://w7.pngwing.com/pngs/340/946/png-transparent-avatar-user-computer-icons-software-developer-avatar-child-face-heroes-thumbnail.png',
22 |     },
23 |     isAdmin: {
24 |       type : Boolean,
25 |       default : false,
26 |     },
27 |   },
28 |   { timestamps: true }
29 | );
30 | 
31 | const USER = mongoose.model("USER", userSchema);
32 | 
33 | module.exports = USER;
34 | 


--------------------------------------------------------------------------------
/backend/model/post.model.js:
--------------------------------------------------------------------------------
 1 | const mongoose = require("mongoose");
 2 | 
 3 | const postSchema = new mongoose.Schema(
 4 |   {
 5 |     userId: {
 6 |       type: String,
 7 |       required: true,
 8 |     },
 9 |     title: {
10 |       type: String,
11 |       required: true,
12 |     },
13 |     content: {
14 |       type: String,
15 |       required: true,
16 |     },
17 |     image: {
18 |       type: String,
19 |       default:
20 |         "https://tiny-img.com/images/blog/thumb/blog-post-images-best-practices-in-2022.jpg",
21 |     },
22 |     category: {
23 |       type: String,
24 |       default: "uncategorized",
25 |     },
26 |     slug: {
27 |       type: String,
28 |       required: true,
29 |       unique: true,
30 |     },
31 |   },
32 |   { timestamps: true }
33 | );
34 | 
35 | const POST = mongoose.model("POST", postSchema);
36 | 
37 | module.exports = POST;
38 | 


--------------------------------------------------------------------------------
/frontend/src/redux/store/store.js:
--------------------------------------------------------------------------------
 1 | import { combineReducers, configureStore } from "@reduxjs/toolkit";
 2 | import userSlice from "../reducers/user/userSlice";
 3 | import themeSlice from "../reducers/theme/themeSlice";
 4 | import { persistReducer } from "redux-persist";
 5 | import storage from "redux-persist/lib/storage";
 6 | import persistStore from "redux-persist/es/persistStore";
 7 | 
 8 | // Root reducers all the reducers in the store
 9 | const rootReducer = combineReducers({
10 |   user: userSlice,
11 |   theme: themeSlice,
12 | });
13 | 
14 | const persistConfig = {
15 |   key: "root",
16 |   storage,
17 |   version: 1,
18 | };
19 | 
20 | const persistedReducer = persistReducer(persistConfig, rootReducer);
21 | 
22 | export const store = configureStore({
23 |   reducer: persistedReducer,
24 |   middleware: (getDefaultMiddleware) =>
25 |     getDefaultMiddleware({
26 |       serializableCheck: false,
27 |     }),
28 | });
29 | 
30 | export const persistor = persistStore(store);
31 | 


--------------------------------------------------------------------------------
/frontend/src/components/CallToAction.jsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "flowbite-react";
 2 | 
 3 | export default function CallToAction() {
 4 |   return (
 5 |     <div className="flex flex-col sm:flex-row p-3 border border-teal-500 justify-center items-center rounded-tl-3xl rounded-br-3xl text-center ">
 6 |       <div className="flex-1 justify-center flex flex-col">
 7 |         <h2 className="text-2xl">want to Learn more about JavaScript ?</h2>
 8 |         <p className="text-gray-500 my-2">
 9 |           Check out these resources to learn more about JavaScript
10 |         </p>
11 |         <Button
12 |           gradientDuoTone={"purpleToPink"}
13 |           className="rounded-tl-xl rounded-bl-none"
14 |         >
15 |           <a
16 |             href="https://github.com/nitinrajputind"
17 |             target="_blank"
18 |             rel="noopener noreferrer"
19 |           >
20 |             Learn more
21 |           </a>
22 |         </Button>
23 |       </div>
24 |       <div className="flex-1 p-7">
25 |         <img
26 |           src="https://bairesdev.mo.cloudinary.net/blog/2023/08/What-Is-JavaScript-Used-For.jpg?tx=w_1920,q_auto"
27 |           alt=""
28 |         />
29 |       </div>
30 |     </div>
31 |   );
32 | }
33 | 


--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend",
 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.2",
14 |     "firebase": "^10.9.0",
15 |     "flowbite-react": "^0.7.3",
16 |     "framer-motion": "^11.3.7",
17 |     "moment": "^2.30.1",
18 |     "react": "^18.2.0",
19 |     "react-circular-progressbar": "^2.1.0",
20 |     "react-dom": "^18.2.0",
21 |     "react-icons": "^5.0.1",
22 |     "react-quill": "^2.0.0",
23 |     "react-redux": "^9.1.0",
24 |     "react-router-dom": "^6.22.2",
25 |     "redux-persist": "^6.0.0"
26 |   },
27 |   "devDependencies": {
28 |     "@tailwindcss/line-clamp": "^0.4.4",
29 |     "@types/react": "^18.2.56",
30 |     "@types/react-dom": "^18.2.19",
31 |     "@vitejs/plugin-react": "^4.2.1",
32 |     "autoprefixer": "^10.4.18",
33 |     "eslint": "^8.56.0",
34 |     "eslint-plugin-react": "^7.33.2",
35 |     "eslint-plugin-react-hooks": "^4.6.0",
36 |     "eslint-plugin-react-refresh": "^0.4.5",
37 |     "postcss": "^8.4.35",
38 |     "tailwind-scrollbar": "^3.1.0",
39 |     "tailwindcss": "^3.4.1",
40 |     "vite": "^5.1.4"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/frontend/src/pages/Dashboard.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import { useLocation } from "react-router-dom";
 3 | import DashSidbar from "../components/DashSidbar";
 4 | import DashProfile from "../components/DashProfile";
 5 | import DashPosts from "../components/DashPosts";
 6 | import DashUsers from "../components/DashUsers";
 7 | import DashComments from "../components/DashComments";
 8 | import DashboardComp from "../components/DashboardComp";
 9 | 
10 | export default function Dashboard() {
11 |   const location = useLocation();
12 |   const [tab, setTab] = useState("");
13 |   useEffect(() => {
14 |     const urlParms = new URLSearchParams(location.search);
15 |     const tabFormUrl = urlParms.get("tab");
16 |     if (tabFormUrl) {
17 |       setTab(tabFormUrl);
18 |     }
19 |   }, [location.search]);
20 |   return (
21 |     <div className="min-h-screen flex flex-col md:flex-row">
22 |       {/* Dashboard SideBar */}
23 |       <div className="md:w-56">
24 |         <DashSidbar />
25 |       </div>
26 |       {/* Profile Section */}
27 |       {tab === "profile" && <DashProfile />}
28 |       {/* Admin Posts Section */}
29 |       {tab === "posts" && <DashPosts />}
30 |       {/* All Users Sections */}
31 |       {tab === "users" && <DashUsers />}
32 |       {/* All comments Section */}
33 |       {tab === "comments" && <DashComments />}
34 |       {/* Dashboard Compoent */}
35 |       {tab === "dashboard" && <DashboardComp />}
36 |     </div>
37 |   );
38 | }
39 | 


--------------------------------------------------------------------------------
/frontend/src/components/PostCard.jsx:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | export default function PostCard({ post }) {
 5 |   return (
 6 |     <div className="group relative w-full border border-teal-500 hover:border-2 h-[400px] overflow-hidden rounded-lg sm:w-[380px] transition-all">
 7 |       <Link to={`/post/${post.slug}`}>
 8 |         <img
 9 |           src={post.image}
10 |           alt="post cover"
11 |           className="h-[260px] w-full  object-cover group-hover:h-[200px] transition-all duration-300 z-20"
12 |         />
13 |       </Link>
14 |       <div className="p-3 flex flex-col gap-2">
15 |         <p className="text-lg font-semibold line-clamp-2">{post.title}</p>
16 |         <span className="italic text-sm">{post.category}</span>
17 |         <Link
18 |           to={`/post/${post.slug}`}
19 |           className="z-10 group-hover:bottom-0 absolute bottom-[-200px] left-0 right-0 border border-teal-500 text-teal-500 hover:bg-teal-500 hover:text-white transition-all duration-300 text-center py-2 rounded-md !rounded-tl-none m-2"
20 |         >
21 |           Read article
22 |         </Link>
23 |       </div>
24 |     </div>
25 |   );
26 | }
27 | 
28 | PostCard.propTypes = {
29 |   post: PropTypes.shape({
30 |     _id: PropTypes.string,
31 |     title: PropTypes.string,
32 |     image: PropTypes.string,
33 |     category: PropTypes.string,
34 |     createdAt: PropTypes.string,
35 |     slug: PropTypes.string,
36 |   }),
37 | };
38 | 


--------------------------------------------------------------------------------
/frontend/src/pages/About.jsx:
--------------------------------------------------------------------------------
 1 | export default function About() {
 2 |   return (
 3 |     <div className="min-h-screen flex items-center justify-center">
 4 |       <div className="max-w-2xl mx-auto p-3 text-center">
 5 |         <div>
 6 |           <h1 className="text-3xl font font-semibold text-center my-7">
 7 |             About Nitin&apos;s Blog
 8 |           </h1>
 9 |           <div className="text-md text-gray-500 flex flex-col gap-6">
10 |             <p>
11 |               Welcome to Nitin&apos;s Blog! This blog was created by Nitin
12 |               Rajput as a personal project to share his thoughts and ideas with
13 |               the world. Nitin is a passionate developer who loves to write
14 |               about technology, coding, and everything in between.
15 |             </p>
16 | 
17 |             <p>
18 |               On this blog, you&apos;ll find weekly articles and tutorials on
19 |               topics such as web development, software engineering, and
20 |               programming languages. Nitin is always learning and exploring new
21 |               technologies, so be sure to check back often for new content!
22 |             </p>
23 | 
24 |             <p>
25 |               We encourage you to leave comments on our posts and engage with
26 |               other readers. You can like other people&apos;s comments and reply
27 |               to them as well. We believe that a community of learners can help
28 |               each other grow and improve.
29 |             </p>
30 |           </div>
31 |         </div>
32 |       </div>
33 |     </div>
34 |   );
35 | }
36 | 


--------------------------------------------------------------------------------
/backend/index.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const connectDB = require("./config/config");
 3 | const userRoutes = require("./router/user.routes");
 4 | const authRoutes = require("./router/auth.routes");
 5 | const postRoutes = require("./router/post.routes");
 6 | const cookieParser = require("cookie-parser");
 7 | const cors = require("cors");
 8 | const commentRoutes = require("./router/comment.routes");
 9 | require("dotenv").config();
10 | const path = require("path");
11 | 
12 | const PORT = process.env.PORT || 8080;
13 | const app = express();
14 | app.use(express.json());
15 | app.use(cookieParser());
16 | app.use(
17 |   cors({
18 |     origin: "*",
19 |   })
20 | );
21 | 
22 | const _dirname = path.resolve();
23 | 
24 | // database connection
25 | const startConnection = async () => {
26 |   try {
27 |     await connectDB(process.env.DB_URI);
28 |     app.listen(PORT, () => {
29 |       console.log(`Server is Runing on http://localhost:${PORT}`);
30 |     });
31 |   } catch (err) {
32 |     console.log(`Database is showing Error ${err.message}`);
33 |   }
34 | };
35 | 
36 | startConnection();
37 | 
38 | app.use("/api/user", userRoutes);
39 | app.use("/api/auth", authRoutes);
40 | app.use("/api/post", postRoutes);
41 | app.use("/api/comment", commentRoutes);
42 | 
43 | app.use(express.static(path.join(__dirname, "../frontend/dist")));
44 | app.get("*", (req, res) => {
45 |   res.sendFile(path.join(__dirname, "../frontend", "dist", "index.html"));
46 | });
47 | 
48 | //Middleware to handle the error
49 | app.use((err, req, res, next) => {
50 |   const statusCode = err.statusCode || 500;
51 |   const message = err.message || "Internal Server Error";
52 |   res.status(statusCode).json({
53 |     success: false,
54 |     statusCode,
55 |     message,
56 |   });
57 | });
58 | 


--------------------------------------------------------------------------------
/frontend/src/components/OAuth.jsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "flowbite-react";
 2 | import { AiFillGoogleCircle } from "react-icons/ai";
 3 | import { GoogleAuthProvider, getAuth, signInWithPopup } from "firebase/auth";
 4 | import { app } from "../firebase";
 5 | import { useDispatch } from "react-redux";
 6 | import { SignInSuccess } from "../redux/reducers/user/userSlice";
 7 | import { useNavigate } from "react-router-dom";
 8 | 
 9 | export default function OAuth() {
10 |   const dispatch = useDispatch();
11 |   const navigate = useNavigate();
12 |   const auth = getAuth(app);
13 |   const handleGoogleClick = async () => {
14 |     const provider = new GoogleAuthProvider();
15 |     provider.setCustomParameters({ prompt: "select_account" });
16 |     try {
17 |       const resultsFromGoogle = await signInWithPopup(auth, provider);
18 |       // console.log(resultsFromGoogle)
19 |       const res = await fetch("/api/auth/google", {
20 |         method: "POST",
21 |         headers: { "Content-Type": "application/json" },
22 |         body: JSON.stringify({
23 |           name: resultsFromGoogle.user.displayName,
24 |           email: resultsFromGoogle.user.email,
25 |           googlePhotoUrl: resultsFromGoogle.user.photoURL,
26 |         }),
27 |       });
28 |       const data = await res.json();
29 |       console.log("respone data", data);
30 |       if (res.ok) {
31 |         dispatch(SignInSuccess(data));
32 |         navigate("/");
33 |       }
34 |     } catch (e) {
35 |       console.log(e);
36 |     }
37 |   };
38 |   return (
39 |     <Button
40 |       type="button"
41 |       gradientDuoTone="pinkToOrange"
42 |       outline
43 |       onClick={handleGoogleClick}
44 |     >
45 |       <AiFillGoogleCircle className="w-6 h-6 mr-2" />
46 |       Continue with Google
47 |     </Button>
48 |   );
49 | }
50 | 


--------------------------------------------------------------------------------
/frontend/src/redux/reducers/user/userSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice } from "@reduxjs/toolkit";
 2 | 
 3 | const initialState = {
 4 |   currentUser: null,
 5 |   error: null,
 6 |   loading: false,
 7 | };
 8 | 
 9 | const userSlice = createSlice({
10 |   name: "user",
11 |   initialState,
12 |   reducers: {
13 |     SignInStart: (state) => {
14 |       state.loading = true;
15 |       state.error = null;
16 |     },
17 |     SignInSuccess: (state, action) => {
18 |       state.currentUser = action.payload;
19 |       state.loading = false;
20 |       state.error = null;
21 |     },
22 |     SignInFailure: (state, action) => {
23 |       state.loading = false;
24 |       state.error = action.payload;
25 |     },
26 |     UpdateStart: (state) => {
27 |       state.loading = true;
28 |       state.error = null;
29 |     },
30 |     UpdateSucess: (state, action) => {
31 |       state.currentUser = action.payload;
32 |       state.loading = false;
33 |       state.error = null;
34 |     },
35 |     UpdateFailure: (state, action) => {
36 |       state.loading = false;
37 |       state.error = action.payload;
38 |     },
39 |     deleteUserStart: (state) => {
40 |       state.loading = true;
41 |       state.error = null;
42 |     },
43 |     deleteUserSucess: (state) => {
44 |       state.currentUser = null;
45 |       state.loading = false;
46 |       state.error = null;
47 |     },
48 |     deleteUserFailure: (state, action) => {
49 |       state.loading = false;
50 |       state.error = action.payload;
51 |     },
52 |     SignOutSucess: (state) => {
53 |       state.currentUser = null;
54 |       state.error = null;
55 |       state.loading = false;
56 |     },
57 |   },
58 | });
59 | 
60 | export const {
61 |   SignInStart,
62 |   SignInSuccess,
63 |   SignInFailure,
64 |   UpdateStart,
65 |   UpdateSucess,
66 |   UpdateFailure,
67 |   deleteUserStart,
68 |   deleteUserSucess,
69 |   deleteUserFailure,
70 |   SignOutSucess,
71 | } = userSlice.actions;
72 | 
73 | export default userSlice.reducer;
74 | 


--------------------------------------------------------------------------------
/frontend/src/pages/PageNotFound.jsx:
--------------------------------------------------------------------------------
 1 | // src/NotFound.js
 2 | import { motion } from "framer-motion";
 3 | 
 4 | export const PageNotFound = () => {
 5 |   return (
 6 |     <div className="flex items-center justify-center min-h-screen bg-gradient-to-r from-blue-500 to-purple-600 text-white">
 7 |       <div className="absolute inset-0 flex items-center justify-center overflow-hidden">
 8 |         <motion.div
 9 |           initial={{ scale: 1 }}
10 |           animate={{ scale: [1, 1.5, 1] }}
11 |           transition={{ repeat: Infinity, duration: 15 }}
12 |           className="absolute w-1/2 h-1/2 bg-white opacity-20 rounded-full"
13 |         ></motion.div>
14 |       </div>
15 |       <motion.div
16 |         initial={{ opacity: 0, y: 50 }}
17 |         animate={{ opacity: 1, y: 0 }}
18 |         transition={{ duration: 0.8 }}
19 |         className="relative text-center p-10 bg-opacity-70 bg-black rounded-lg shadow-lg max-w-md w-full"
20 |       >
21 |         <h1 className="text-8xl font-extrabold mb-4">404</h1>
22 |         <p className="text-2xl mb-6">Oops! Page Not Found</p>
23 |         <motion.div
24 |           animate={{ rotate: 360 }}
25 |           transition={{ repeat: Infinity, duration: 8 }}
26 |           className="mt-6 mb-8"
27 |         >
28 |           <svg
29 |             className="w-16 h-16 mx-auto text-blue-300"
30 |             fill="none"
31 |             stroke="currentColor"
32 |             viewBox="0 0 24 24"
33 |             xmlns="http://www.w3.org/2000/svg"
34 |           >
35 |             <path
36 |               strokeLinecap="round"
37 |               strokeLinejoin="round"
38 |               strokeWidth="2"
39 |               d="M12 8v4l3 3m6 1.5A9.5 9.5 0 1112 2.5m6 1.5a9.5 9.5 0 11-6 6m0 0h.01"
40 |             />
41 |           </svg>
42 |         </motion.div>
43 |         <a
44 |           href="/"
45 |           className="px-4 py-2 bg-blue-500 hover:bg-blue-700 rounded-lg"
46 |         >
47 |           Go back to Home
48 |         </a>
49 |       </motion.div>
50 |     </div>
51 |   );
52 | };
53 | 


--------------------------------------------------------------------------------
/frontend/src/pages/Home.jsx:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | import CallToAction from "../components/CallToAction";
 3 | import { useEffect, useState } from "react";
 4 | import PostCard from "../components/PostCard";
 5 | 
 6 | export default function Home() {
 7 |   const [posts, setPosts] = useState([]);
 8 | 
 9 |   useEffect(() => {
10 |     const fetchPosts = async () => {
11 |       const res = await fetch("/api/post/getPosts?limit=12");
12 |       const data = await res.json();
13 |       setPosts(data.posts);
14 |     };
15 |     fetchPosts();
16 |   }, []);
17 |   return (
18 |     <div>
19 |       <div className="flex flex-col gap-6 p-28 px-3 max-w-6xl mx-auto ">
20 |         <h1 className="text-3xl font-bold lg:text-6xl">Welcome to my Blog</h1>
21 |         <p className="text-gray-500 text-xs sm:text-sm">
22 |           Here you&apos;ll find a variety of articles and tutorials on topics
23 |           such as web development, software engineering, and programming
24 |           languages.
25 |         </p>
26 |         <Link
27 |           to="/search"
28 |           className="text-xs sm:text-sm text-teal-500 font-bold hover:underline"
29 |         >
30 |           View all posts
31 |         </Link>
32 |       </div>
33 |       <div className="p-3 bg-amber-100 dark:bg-slate-700">
34 |         <CallToAction />
35 |       </div>
36 | 
37 |       <div className="w-full mx-auto p-3 flex flex-col gap-8 py-7 items-center">
38 |         {posts && posts.length > 0 && (
39 |           <div className="flex flex-col gap-6 items-center">
40 |             <h2 className="text-2xl font-semibold text-center">Recent Posts</h2>
41 |             <div className="flex flex-wrap justify-center gap-x-10 gap-y-8">
42 |               {posts.map((post) => (
43 |                 <PostCard key={post._id} post={post} />
44 |               ))}
45 |             </div>
46 |             <Link
47 |               to={"/search"}
48 |               className="text-lg text-teal-500 hover:underline text-center"
49 |             >
50 |               View all posts
51 |             </Link>
52 |           </div>
53 |         )}
54 |       </div>
55 |     </div>
56 |   );
57 | }
58 | 


--------------------------------------------------------------------------------
/frontend/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import { BrowserRouter, Route, Routes } from "react-router-dom";
 2 | import Home from "./pages/Home";
 3 | import About from "./pages/About";
 4 | import SignIn from "./pages/SignIn";
 5 | import SignUp from "./pages/SignUp";
 6 | import Dashboard from "./pages/Dashboard";
 7 | import Projects from "./pages/Projects";
 8 | import Header from "./components/Header";
 9 | import FooterComp from "./components/Footer";
10 | import { PrivateRoute, ProtectedRoute } from "./components/PrivateRoute";
11 | import { AdminPrivateRoute } from "./components/AdminPrivateRoute";
12 | import CreatePost from "./pages/CreatePost";
13 | import UpdatePost from "./pages/UpdatePost";
14 | import PostPage from "./pages/PostPage";
15 | import ScrollToTop from "./components/ScrollToTop";
16 | import Search from "./pages/Search";
17 | import { PageNotFound } from "./pages/PageNotFound";
18 | 
19 | export default function App() {
20 |   return (
21 |     <>
22 |       <BrowserRouter>
23 |         <ScrollToTop />
24 |         <Header />
25 |         <div className="mt-16"></div>
26 |         <Routes>
27 |           <Route path="/" element={<Home />} />
28 |           <Route path="/about" element={<About />} />
29 |           <Route path="/search" element={<Search />} />
30 |           {/* Admin Private Routes */}
31 |           <Route element={<AdminPrivateRoute />}>
32 |             <Route path="/create-post" element={<CreatePost />} />
33 |             <Route path="/update-post/:postId" element={<UpdatePost />} />
34 |           </Route>
35 | 
36 |           {/* For making protected route */}
37 |           <Route element={<ProtectedRoute />}>
38 |             <Route path="/sign-in" element={<SignIn />} />
39 |             <Route path="/sign-up" element={<SignUp />} />
40 |           </Route>
41 |           {/* For making protected route */}
42 |           <Route element={<PrivateRoute />}>
43 |             <Route path="/dashboard" element={<Dashboard />} />
44 |           </Route>
45 | 
46 |           <Route path="/projects" element={<Projects />} />
47 |           <Route path="/post/:postSlug" element={<PostPage />} />
48 |           <Route path="*" element={<PageNotFound />} />
49 |         </Routes>
50 |         <FooterComp />
51 |       </BrowserRouter>
52 |     </>
53 |   );
54 | }
55 | 


--------------------------------------------------------------------------------
/frontend/src/components/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import { Footer } from "flowbite-react";
 2 | import { Link } from "react-router-dom";
 3 | import { BsFacebook, BsInstagram, BsLinkedin, BsGithub } from "react-icons/bs";
 4 | 
 5 | export default function FooterComp() {
 6 |   return (
 7 |     <Footer container className=" border border-t-8 border-teal-500">
 8 |       <div className="w-full max-w-7xl mx-auto">
 9 |         <div className="grid w-full justify-between sm:flex md:grid-cols-1">
10 |           <div className="mt-5">
11 |             <Link className="self-center whitespace-nowrap text-xl  sm:text-xl font-semibold dark:text-white">
12 |               <span className="px-2 py-1 bg-gradient-to-tr from-indigo-500 via-purple-500 to-pink-500 rounded-lg text-white">
13 |                 Nitin&apos;s
14 |               </span>
15 |               Blog
16 |             </Link>
17 |           </div>
18 |           <div className="grid grid-cols-2 gap-8 mt-4 sm:grid-cols-3 sm:gap-6">
19 |             <div>
20 |               <Footer.Title title="About" />
21 |               <Footer.LinkGroup col>
22 |                 <Footer.Link href="#" target="_blank">
23 |                   100 JS Project
24 |                 </Footer.Link>
25 |                 <Footer.Link href="#" target="_blank">
26 |                   Nitin&apos;s Blogs
27 |                 </Footer.Link>
28 |               </Footer.LinkGroup>
29 |             </div>
30 |             <div>
31 |               <Footer.Title title="Follow Us" />
32 |               <Footer.LinkGroup col>
33 |                 <Footer.Link href="#" target="_blank">
34 |                   Github
35 |                 </Footer.Link>
36 |                 <Footer.Link href="#">Linkedin</Footer.Link>
37 |               </Footer.LinkGroup>
38 |             </div>
39 |             <div>
40 |               <Footer.Title title="Legal" />
41 |               <Footer.LinkGroup col>
42 |                 <Footer.Link href="#" target="_blank">
43 |                   Privacy Policy
44 |                 </Footer.Link>
45 |                 <Footer.Link href="#">Terms and Conditions</Footer.Link>
46 |               </Footer.LinkGroup>
47 |             </div>
48 |           </div>
49 |         </div>
50 |         <Footer.Divider />
51 |         <div className="w-full sm:flex sm:items-center sm:justify-between">
52 |           <Footer.Copyright
53 |             href="#"
54 |             by="All CopyRight reserved by Nitin's Blog "
55 |             year={new Date().getFullYear()}
56 |           />
57 |           <div className="flex gap-6 sm:mt-0  mt-4 sm:justify-center">
58 |             <Footer.Icon href="#" icon={BsInstagram} />
59 |             <Footer.Icon href="#" icon={BsFacebook} />
60 |             <Footer.Icon href="#" icon={BsLinkedin} />
61 |             <Footer.Icon href="#" icon={BsGithub} />
62 |             <Footer.Icon href="#" icon={BsFacebook} />
63 |           </div>
64 |         </div>
65 |       </div>
66 |     </Footer>
67 |   );
68 | }
69 | 


--------------------------------------------------------------------------------
/frontend/src/components/DashSidbar.jsx:
--------------------------------------------------------------------------------
  1 | import { Sidebar } from "flowbite-react";
  2 | import { Link, useLocation } from "react-router-dom";
  3 | import { useEffect, useState } from "react";
  4 | import {
  5 |   HiAnnotation,
  6 |   HiArrowSmRight,
  7 |   HiDocumentText,
  8 |   HiOutlineUserGroup,
  9 |   HiUser,
 10 | } from "react-icons/hi";
 11 | import { SignOutSucess } from "../redux/reducers/user/userSlice";
 12 | import { useDispatch, useSelector } from "react-redux";
 13 | 
 14 | export default function DashSidbar() {
 15 |   const location = useLocation();
 16 |   const dispatch = useDispatch();
 17 |   const { currentUser } = useSelector((state) => state.user);
 18 |   const [tab, setTab] = useState("");
 19 |   useEffect(() => {
 20 |     const urlParms = new URLSearchParams(location.search);
 21 |     const tabFormUrl = urlParms.get("tab");
 22 |     if (tabFormUrl) {
 23 |       setTab(tabFormUrl);
 24 |     }
 25 |   }, [location.search]);
 26 |   const handleSignOut = async () => {
 27 |     try {
 28 |       const res = await fetch("/api/user/signout", {
 29 |         method: "POST",
 30 |       });
 31 |       const data = await res.json();
 32 |       if (!res.ok) {
 33 |         console.log(data.message);
 34 |       } else {
 35 |         dispatch(SignOutSucess());
 36 |       }
 37 |     } catch (error) {
 38 |       console.log(error.message);
 39 |     }
 40 |   };
 41 |   return (
 42 |     <Sidebar className="w-full md:w-56">
 43 |       <Sidebar.Items>
 44 |         <Sidebar.ItemGroup className="flex flex-col gap-2">
 45 |           <Link to={"/dashboard?tab=profile"}>
 46 |             <Sidebar.Item
 47 |               active={tab === "profile"}
 48 |               icon={HiUser}
 49 |               label={currentUser ? "Admin" : "User"}
 50 |               labelColor={"dark"}
 51 |               as="div"
 52 |             >
 53 |               Profile
 54 |             </Sidebar.Item>
 55 |           </Link>
 56 |           {currentUser.isAdmin && (
 57 |             <>
 58 |               <Link to={"/dashboard?tab=dashboard"}>
 59 |                 <Sidebar.Item
 60 |                   active={tab === "dashboard"}
 61 |                   icon={HiDocumentText}
 62 |                   as="div"
 63 |                 >
 64 |                   Dashboard
 65 |                 </Sidebar.Item>
 66 |               </Link>
 67 |               <Link to={"/dashboard?tab=posts"}>
 68 |                 <Sidebar.Item
 69 |                   active={tab === "posts"}
 70 |                   icon={HiDocumentText}
 71 |                   as="div"
 72 |                 >
 73 |                   Post
 74 |                 </Sidebar.Item>
 75 |               </Link>
 76 |               <Link to={"/dashboard?tab=comments"}>
 77 |                 <Sidebar.Item
 78 |                   active={tab === "comments"}
 79 |                   icon={HiAnnotation}
 80 |                   as="div"
 81 |                 >
 82 |                   Comments
 83 |                 </Sidebar.Item>
 84 |               </Link>
 85 |               <Link to={"/dashboard?tab=users"}>
 86 |                 <Sidebar.Item
 87 |                   active={tab === "users"}
 88 |                   icon={HiOutlineUserGroup}
 89 |                   as="div"
 90 |                 >
 91 |                   Users
 92 |                 </Sidebar.Item>
 93 |               </Link>
 94 |             </>
 95 |           )}
 96 |           <Sidebar.Item
 97 |             icon={HiArrowSmRight}
 98 |             className="cursor-pointer"
 99 |             onClick={handleSignOut}
100 |           >
101 |             Sign Out
102 |           </Sidebar.Item>
103 |         </Sidebar.ItemGroup>
104 |       </Sidebar.Items>
105 |     </Sidebar>
106 |   );
107 | }
108 | 


--------------------------------------------------------------------------------
/frontend/src/pages/PostPage.jsx:
--------------------------------------------------------------------------------
  1 | import { Button, Spinner } from "flowbite-react";
  2 | import { useEffect, useState } from "react";
  3 | import { Link, useParams } from "react-router-dom";
  4 | import CallToAction from "../components/CallToAction";
  5 | import CommentSection from "../components/CommentSection";
  6 | import PostCard from "../components/PostCard";
  7 | 
  8 | export default function PostPage() {
  9 |   const { postSlug } = useParams();
 10 |   const [loading, setLoading] = useState(true);
 11 |   const [post, setPost] = useState(null);
 12 |   const [recentPosts, setRecentPosts] = useState(null);
 13 | 
 14 |   useEffect(() => {
 15 |     const fetchPost = async () => {
 16 |       try {
 17 |         setLoading(true);
 18 |         const res = await fetch(`/api/post/getposts?slug=${postSlug}`);
 19 |         const data = await res.json();
 20 |         if (!res.ok) {
 21 |           setLoading(false);
 22 |           return;
 23 |         }
 24 |         if (res.ok) {
 25 |           setPost(data.posts[0]);
 26 |           setLoading(false);
 27 |         }
 28 |       } catch (error) {
 29 |         setLoading(false);
 30 |       }
 31 |     };
 32 |     if (postSlug) {
 33 |       fetchPost();
 34 |     }
 35 |   }, [postSlug]);
 36 | 
 37 |   useEffect(() => {
 38 |     try {
 39 |       const fetchRecentPosts = async () => {
 40 |         const res = await fetch(`/api/post/getposts?limit=3`);
 41 |         const data = await res.json();
 42 |         if (res.ok) {
 43 |           setRecentPosts(data.posts);
 44 |         }
 45 |       };
 46 |       fetchRecentPosts();
 47 |     } catch (error) {
 48 |       console.log(error.message);
 49 |     }
 50 |   }, []);
 51 | 
 52 |   if (loading) {
 53 |     return (
 54 |       <div className="flex justify-center items-center min-h-screen">
 55 |         <Spinner size={"xl"} />
 56 |       </div>
 57 |     );
 58 |   }
 59 | 
 60 |   return (
 61 |     <>
 62 |       {post && (
 63 |         <main className="p-3 flex flex-col max-w-6xl mx-auto min-h-screen">
 64 |           <h1 className="text-3xl mt-10 p-3 text-center font-serif max-w-2xl mx-auto lg:text-4xl">
 65 |             {post && post.title}
 66 |           </h1>
 67 |           <Link
 68 |             to={`/search?category=${post && post.category}`}
 69 |             className="self-center mt-5"
 70 |           >
 71 |             <Button color={"gray"} pill size={"xs"}>
 72 |               {post && post.category}
 73 |             </Button>
 74 |           </Link>
 75 |           <img
 76 |             src={post && post.image}
 77 |             alt={post && post.title}
 78 |             className="mt-10 p-3 max-h-[600px] w-full object-cover"
 79 |           />
 80 |           <div className="flex justify-between p-3 border-b border-slate-500 mx-auto w-full max-w-4xl text-xs ">
 81 |             <span>{post && new Date(post.createdAt).toLocaleDateString()}</span>
 82 |             <span className="italic">
 83 |               {post && (post.content.length / 1000).toFixed(0)} mins read
 84 |             </span>
 85 |           </div>
 86 |           <div
 87 |             className="p-3 max-w-4xl mx-auto post-content"
 88 |             dangerouslySetInnerHTML={{ __html: post && post.content }}
 89 |           ></div>
 90 |           <div className="max-w-4xl mx-auto w-full">
 91 |             <CallToAction />
 92 |           </div>
 93 |           <CommentSection postId={post._id} />
 94 |         </main>
 95 |       )}
 96 |       <div className="flex flex-col justify-center items-center mb-5">
 97 |         <h1 className="text-xl mt-5">Recent articles</h1>
 98 |         <div className="flex flex-wrap gap-5 mt-5 justify-center">
 99 |           {recentPosts &&
100 |             recentPosts.map((post) => <PostCard key={post._id} post={post} />)}
101 |         </div>
102 |       </div>
103 |     </>
104 |   );
105 | }
106 | 


--------------------------------------------------------------------------------
/backend/controller/auth.controller.js:
--------------------------------------------------------------------------------
  1 | const bcrypt = require("bcrypt");
  2 | const jwt = require("jsonwebtoken");
  3 | const USER = require("../model/users.model");
  4 | const errorHandler = require("../utils/error");
  5 | 
  6 | const signup = async (req, res, next) => {
  7 |   const { username, email, password } = req.body;
  8 | 
  9 |   try {
 10 |     // Check if any required field is missing or empty
 11 |     if (
 12 |       !username ||
 13 |       !email ||
 14 |       !password ||
 15 |       username === "" ||
 16 |       email === "" ||
 17 |       password === ""
 18 |     ) {
 19 |       next(errorHandler(400, "All fields are required"));
 20 |     }
 21 | 
 22 |     // Check if the email is already registered
 23 |     const existingUser = await USER.findOne({ email });
 24 |     if (existingUser) {
 25 |       next(errorHandler(400, "Email already registered"));
 26 |     }
 27 | 
 28 |     // Hash the password
 29 |     const hashedPassword = await bcrypt.hash(password, 10);
 30 | 
 31 |     // Create a new user
 32 |     const newUser = new USER({
 33 |       username,
 34 |       email,
 35 |       password: hashedPassword,
 36 |     });
 37 | 
 38 |     // Save the new user to the database
 39 |     await newUser.save();
 40 | 
 41 |     res.json({
 42 |       msg: "User Signup successful",
 43 |     });
 44 |   } catch (error) {
 45 |     next(error);
 46 |   }
 47 | };
 48 | 
 49 | const signin = async (req, res, next) => {
 50 |   const { email, password } = req.body;
 51 |   if (!email || !password || password === "" || email === "") {
 52 |     next(errorHandler(400, "All fields are required"));
 53 |   }
 54 |   try {
 55 |     const validUser = await USER.findOne({ email: email });
 56 |     if (!validUser) {
 57 |       return next(errorHandler(400, "invaild email or password"));
 58 |     }
 59 |     const vaildPassword = bcrypt.compareSync(password, validUser.password);
 60 |     if (!vaildPassword) {
 61 |       return next(errorHandler(400, "invaild email or password"));
 62 |     }
 63 |     const token = jwt.sign({ id: validUser._id, isAdmin: validUser.isAdmin }, process.env.JWT_SECRETKEY, {
 64 |       expiresIn: "30day",
 65 |     });
 66 | 
 67 |     // to remove the password from the response
 68 |     const { password: pass, ...rest } = validUser._doc;
 69 | 
 70 |     res
 71 |       .status(200)
 72 |       .cookie("access_token", token, { httpOnly: true })
 73 |       .json(rest);
 74 |   } catch (err) {
 75 |     next(err);
 76 |   }
 77 | };
 78 | 
 79 | const googleAuth = async (req, res, next) => {
 80 |   const { name, email, googlePhotoUrl } = req.body;
 81 |   try {
 82 |     const user = await USER.findOne({ email: email });
 83 |     if (user) {
 84 |       const token = jwt.sign({ id: user._id, isAdmin: user.isAdmin }, process.env.JWT_SECRETKEY);
 85 |       const { password, ...rest } = user._doc;
 86 |       res
 87 |         .status(200)
 88 |         .cookie("access_token", token, { httpOnly: true })
 89 |         .json(rest);
 90 |     } else {
 91 |       const genratedPassword =
 92 |         Math.random().toString(36).slice(-8) +
 93 |         Math.random().toString(36).slice(-8);
 94 |       const hashedPassword = bcrypt.hashSync(genratedPassword, 10);
 95 |       const newUser = new USER({
 96 |         username: name.toLowerCase().split(' ').join('') + Math.random().toString(9).slice(-4),
 97 |         email: email,
 98 |         password: hashedPassword,
 99 |         profilePicture: googlePhotoUrl
100 |       });
101 |       await newUser.save();
102 |       const token = jwt.sign({ id: newUser._id, isAdmin: newUser.isAdmin }, process.env.JWT_SECRETKEY);
103 |       const { password, ...rest } = newUser._doc;
104 |       res
105 |         .status(200)
106 |         .cookie("access_token", token, { httpOnly: true })
107 |         .json(rest);
108 |     }
109 |   } catch (error) {
110 |     next(error);
111 |   }
112 | };
113 | 
114 | module.exports = { signup, signin, googleAuth };
115 | 


--------------------------------------------------------------------------------
/backend/controller/post.controller.js:
--------------------------------------------------------------------------------
  1 | const POST = require("../model/post.model");
  2 | const errorHandler = require("../utils/error");
  3 | 
  4 | const create = async (req, res, next) => {
  5 |   if (!req.user.isAdmin) {
  6 |     return next(
  7 |       errorHandler(403, "You do not have permission to create a post")
  8 |     );
  9 |   }
 10 |   if (!req.body.title || !req.body.content) {
 11 |     return next(errorHandler(400, "please provide all required fields"));
 12 |   }
 13 |   const slug = req.body.title
 14 |     .split(" ")
 15 |     .join("-")
 16 |     .toLowerCase()
 17 |     .replace(/[^a-zA-Z0-9-]/g, "");
 18 |   const newPost = new POST({
 19 |     userId: req.user.id,
 20 |     slug: slug,
 21 |     ...req.body,
 22 |   });
 23 | 
 24 |   try {
 25 |     const savePost = await newPost.save();
 26 |     res.status(201).json(savePost);
 27 |   } catch (error) {
 28 |     next(error);
 29 |   }
 30 | };
 31 | 
 32 | const getPosts = async (req, res, next) => {
 33 |   try {
 34 |     const startIndex = parseInt(req.query.startIndex) || 0;
 35 |     const limit = parseInt(req.query.limit) || 10;
 36 |     const sortDirection = req.query.order === "asc" ? 1 : -1;
 37 |     const posts = await POST.find({
 38 |       ...(req.query.userId && { userId: req.query.userId }),
 39 |       ...(req.query.category && { category: req.query.category }),
 40 |       ...(req.query.slug && { slug: req.query.slug }),
 41 |       ...(req.query.postId && { _id: req.query.postId }),
 42 |       ...(req.query.searchTerm && {
 43 |         $or: [
 44 |           { title: { $regex: req.query.searchTerm, $options: "i" } },
 45 |           { content: { $regex: req.query.searchTerm, $options: "i" } },
 46 |         ],
 47 |       }),
 48 |     })
 49 |       .sort({ updatedAt: sortDirection })
 50 |       .skip(startIndex)
 51 |       .limit(limit);
 52 | 
 53 |     const totalPosts = await POST.countDocuments();
 54 | 
 55 |     const now = new Date();
 56 |     const oneMonthAgo = new Date(
 57 |       now.getFullYear(),
 58 |       now.getMonth() - 1,
 59 |       now.getDate()
 60 |     );
 61 | 
 62 |     const lastMonthPosts = await POST.countDocuments({
 63 |       createdAt: { $gte: oneMonthAgo },
 64 |     });
 65 | 
 66 |     res.status(200).json({
 67 |       posts,
 68 |       totalPosts,
 69 |       lastMonthPosts,
 70 |     });
 71 |   } catch (error) {
 72 |     console.log("error :- ", error.message);
 73 |     next(error);
 74 |   }
 75 | };
 76 | 
 77 | const updatePost = async (req, res, next) => {
 78 |   if (!req.user.isAdmin) {
 79 |     return next(
 80 |       errorHandler(403, "You do not have permission to create a post")
 81 |     );
 82 |   }
 83 |   if (!req.body.title || !req.body.content) {
 84 |     return next(errorHandler(400, "please provide all required fields"));
 85 |   }
 86 |   try {
 87 |     const updatedPost = await POST.findByIdAndUpdate(
 88 |       req.params.postId,
 89 |       {
 90 |         $set: {
 91 |           title: req.body.title,
 92 |           content: req.body.content,
 93 |           category: req.body.category,
 94 |           image: req.body.image,
 95 |           slug: req.body.title
 96 |             .split(" ")
 97 |             .join("-")
 98 |             .toLowerCase()
 99 |             .replace(/[^a-zA-Z0-9-]/g, ""),
100 |         },
101 |       },
102 |       { new: true }
103 |     );
104 |     
105 |     res.status(200).json(updatedPost);
106 |   } catch (error) {
107 |     next(error);
108 |   }
109 | };
110 | 
111 | const deletePost = async (req, res , next) => {
112 |     if(!req.user.isAdmin || req.user.id !== req.params.userId){
113 |         return next(errorHandler(403, "You do not have permission to delete a post"));
114 |     }
115 |     try {
116 |         await POST.findByIdAndDelete(req.params.postId);
117 |         res.status(200).json('Post has been deleted successfully');
118 |     } catch (error) {
119 |         next(error);
120 |     }
121 | }
122 | 
123 | module.exports = { create, getPosts, deletePost , updatePost};
124 | 


--------------------------------------------------------------------------------
/backend/controller/comment.controller.js:
--------------------------------------------------------------------------------
  1 | const COMMENT = require("../model/comment.model");
  2 | const errorHandler = require("../utils/error");
  3 | 
  4 | const createComment = async (req, res, next) => {
  5 |   try {
  6 |     const { comment, postId, userId } = req.body;
  7 |     if (userId !== req.user.id) {
  8 |       return next(
  9 |         errorHandler(403, " You are not allowed to create a comment")
 10 |       );
 11 |     }
 12 | 
 13 |     const newComment = new COMMENT({
 14 |       content: comment,
 15 |       postId,
 16 |       userId,
 17 |     });
 18 | 
 19 |     await newComment.save();
 20 |     res.status(201).json({ newComment });
 21 |   } catch (error) {
 22 |     next(error);
 23 |   }
 24 | };
 25 | 
 26 | const getPostsComment = async (req, res, next) => {
 27 |   try {
 28 |     const comments = await COMMENT.find({ postId: req.params.postId }).sort({
 29 |       createAt: -1,
 30 |     });
 31 |     res.status(200).json(comments);
 32 |   } catch (error) {
 33 |     next(error);
 34 |   }
 35 | };
 36 | 
 37 | const likeComment = async (req, res, next) => {
 38 |   try {
 39 |     const comment = await COMMENT.findById(req.params.commentId);
 40 |     if (!comment) {
 41 |       return next(errorHandler(404, "Comment not found"));
 42 |     }
 43 |     const userIndex = await comment.likes.indexOf(req.user.id);
 44 |     if (userIndex === -1) {
 45 |       comment.numberofLikes += 1;
 46 |       comment.likes.push(req.user.id);
 47 |     } else {
 48 |       comment.numberofLikes -= 1;
 49 |       comment.likes.splice(userIndex, 1);
 50 |     }
 51 |     await comment.save();
 52 |     res.status(200).json(comment);
 53 |   } catch (error) {
 54 |     next(error);
 55 |   }
 56 | };
 57 | 
 58 | const editComment = async (req, res, next) => {
 59 |   try {
 60 |     const comment = await COMMENT.findById(req.params.commentId);
 61 |     if (!comment) {
 62 |       return next(errorHandler(404, "Comment not found"));
 63 |     }
 64 |     if (comment.userId !== req.user.id && !req.user.isAdmin) {
 65 |       return next(
 66 |         errorHandler(403, "You are not allowed to edit this comment")
 67 |       );
 68 |     }
 69 |     const editedComment = await COMMENT.findByIdAndUpdate(
 70 |       req.params.commentId,
 71 |       {
 72 |         content: req.body.content,
 73 |       },
 74 |       { new: true }
 75 |     );
 76 |     res.status(200).json(editedComment);
 77 |   } catch (error) {
 78 |     next(error);
 79 |   }
 80 | };
 81 | 
 82 | const deleteComment = async (req, res, next) => {
 83 |   try {
 84 |     const comment = await COMMENT.findById(req.params.commentId);
 85 |     if (!comment) {
 86 |       return next(errorHandler(404, "Comment not found"));
 87 |     }
 88 |     if (comment.userId !== req.user.id && !req.user.isAdmin) {
 89 |       return next(
 90 |         errorHandler(403, "You are not allowed to edit this comment")
 91 |       );
 92 |     }
 93 |     await COMMENT.findByIdAndDelete(req.params.commentId);
 94 |     res.status(200).json("Comment has been deleted");
 95 |   } catch (error) {
 96 |     next(error);
 97 |   }
 98 | };
 99 | 
100 | const getComments = async (req, res, next) => {
101 |   if (!req.user.isAdmin) {
102 |     return next(errorHandler(403, " You are not allowed to get all comments"));
103 |   }
104 |   try {
105 |     const startIndex = parseInt(req.query.startIndex) || 0;
106 |     const limit = parseInt(req.query.limit) || 9;
107 |     const sortDirection = req.query.sort === "'desc" ? -1 : 1;
108 |     const comments = await COMMENT.find()
109 |       .sort({ createdAt: sortDirection })
110 |       .skip(startIndex)
111 |       .limit(limit);
112 | 
113 |     const totalComments = await COMMENT.countDocuments();
114 |     const now = new Date();
115 | 
116 |     const oneMonth = new Date(
117 |       now.getFullYear(),
118 |       now.getMonth() - 1,
119 |       now.getDate()
120 |     );
121 | 
122 |     const lastMonthComments = await COMMENT.countDocuments({
123 |       createdAt: { $gte: oneMonth },
124 |     });
125 | 
126 |     res.status(200).json({ comments, totalComments, lastMonthComments });
127 |   } catch (error) {
128 |     next(error);
129 |   }
130 | };
131 | 
132 | module.exports = {
133 |   createComment,
134 |   getPostsComment,
135 |   likeComment,
136 |   editComment,
137 |   deleteComment,
138 |   getComments,
139 | };
140 | 


--------------------------------------------------------------------------------
/frontend/src/pages/SignIn.jsx:
--------------------------------------------------------------------------------
  1 | import { Alert, Button, Label, Spinner, TextInput } from "flowbite-react";
  2 | import { useState } from "react";
  3 | import { Link, useNavigate } from "react-router-dom";
  4 | import { useDispatch, useSelector } from "react-redux";
  5 | import {
  6 |   SignInStart,
  7 |   SignInSuccess,
  8 |   SignInFailure,
  9 | } from "../redux/reducers/user/userSlice";
 10 | import OAuth from "../components/OAuth";
 11 | 
 12 | export default function SignIn() {
 13 |   const navigate = useNavigate();
 14 |   const dispatch = useDispatch();
 15 |   const { loading, error: errorMessage } = useSelector((state) => state.user);
 16 |   const [formData, setFormData] = useState({});
 17 |   const handleChange = (event) => {
 18 |     setFormData({
 19 |       ...formData,
 20 |       [event.target.id]: event.target.value.trim(),
 21 |     });
 22 |   };
 23 |   const handleSubmit = async (event) => {
 24 |     event.preventDefault();
 25 |     if (!formData.email || !formData.password) {
 26 |       return dispatch(SignInFailure("please fill all the required fields"));
 27 |     }
 28 |     try {
 29 |       dispatch(SignInStart());
 30 |       const res = await fetch("/api/auth/signin", {
 31 |         method: "POST",
 32 |         headers: { "Content-Type": "application/json" },
 33 |         body: JSON.stringify(formData),
 34 |       });
 35 |       const data = await res.json();
 36 |       if (data.success === false) {
 37 |         dispatch(SignInFailure(data.message));
 38 |       }
 39 |       if (res.ok) {
 40 |         dispatch(SignInSuccess(data));
 41 |         navigate("/");
 42 |       }
 43 |     } catch (err) {
 44 |       dispatch(SignInFailure(err.message));
 45 |     }
 46 |   };
 47 |   return (
 48 |     <div className="min-h-screen mt-20">
 49 |       <div className="flex p-3 max-w-3xl mx-auto flex-col md:flex-row md:items-center gap-6">
 50 |         {/* left Side Conatnier */}
 51 |         <div className="flex-1">
 52 |           <Link className="font-bold dark:text-white text-4xl">
 53 |             <span className="px-2 py-1 bg-gradient-to-tr from-indigo-500 via-purple-500 to-pink-500 rounded-lg text-white">
 54 |               Nitin&apos;s
 55 |             </span>
 56 |             Blog
 57 |           </Link>
 58 |           <p className="text-sm mt-5">
 59 |             Welcome to our blog community! Signing up is your first step towards
 60 |             unlocking a world of knowledge, creativity, and connection.
 61 |           </p>
 62 |         </div>
 63 |         {/* Right Side Conatnier */}
 64 |         <div className="flex-1">
 65 |           <form
 66 |             action=""
 67 |             className="flex flex-col gap-4"
 68 |             onSubmit={handleSubmit}
 69 |           >
 70 |             <div>
 71 |               <Label value="Your email" />
 72 |               <TextInput
 73 |                 type="email"
 74 |                 placeholder="name@company.com"
 75 |                 id="email"
 76 |                 onChange={handleChange}
 77 |               />
 78 |             </div>
 79 |             <div>
 80 |               <Label value="Your password" />
 81 |               <TextInput
 82 |                 type="password"
 83 |                 placeholder="************"
 84 |                 id="password"
 85 |                 autoComplete="true"
 86 |                 onChange={handleChange}
 87 |               />
 88 |             </div>
 89 |             <Button
 90 |               gradientDuoTone={"purpleToPink"}
 91 |               type="submit"
 92 |               disabled={loading}
 93 |             >
 94 |               {loading ? (
 95 |                 <>
 96 |                   <Spinner size="sm" />
 97 |                   <span className="pl-3">Loading....</span>
 98 |                 </>
 99 |               ) : (
100 |                 "Sign In"
101 |               )}
102 |             </Button>
103 |             <OAuth />
104 |           </form>
105 |           <div className="flex gap-2 text-sm mt-5">
106 |             <span>Don&apos;t have an account ? </span>
107 |             <Link to={"/sign-up"} className="text-blue-500">
108 |               Sign Up
109 |             </Link>
110 |           </div>
111 |           {errorMessage && (
112 |             <Alert className="mt-5" color={"failure"}>
113 |               {errorMessage}
114 |             </Alert>
115 |           )}
116 |         </div>
117 |       </div>
118 |     </div>
119 |   );
120 | }
121 | 


--------------------------------------------------------------------------------
/backend/controller/user.controller.js:
--------------------------------------------------------------------------------
  1 | const errorHandler = require("../utils/error");
  2 | const bcrypt = require("bcrypt");
  3 | const USER = require("../model/users.model");
  4 | 
  5 | const test = async (req, res) => {
  6 |   res.json({
  7 |     message: "test message",
  8 |   });
  9 | };
 10 | 
 11 | const updateUser = async (req, res, next) => {
 12 |   if (req.user.id !== req.params.userId) {
 13 |     return next(
 14 |       errorHandler(403, "You are not allowed to allow to update this user")
 15 |     );
 16 |   }
 17 |   if (req.body.password) {
 18 |     if (req.body.password.length < 6) {
 19 |       next(errorHandler(403, "Password must be at least 6 characters"));
 20 |     }
 21 |     req.body.password = bcrypt.hashSync(req.body.password, 10);
 22 |   }
 23 |   if (req.body.username) {
 24 |     if (req.body.username.length < 5 || req.body.username.length > 20) {
 25 |       return next(
 26 |         errorHandler(403, "Username must be in between 5 to 20 characters")
 27 |       );
 28 |     }
 29 |     if (req.body.username.includes(" ")) {
 30 |       return next(errorHandler(403, "Username cannot contain spaces"));
 31 |     }
 32 |     if (!req.body.username === req.body.username.toLowerCase()) {
 33 |       return next(errorHandler(403, "Username should be in lowercase"));
 34 |     }
 35 |     if (!req.body.username.match(/^[a-zA-Z0-9]+$/)) {
 36 |       return next(
 37 |         errorHandler(403, "Username only contains letters and numbers")
 38 |       );
 39 |     }
 40 |   }
 41 |   try {
 42 |     const updateUser = await USER.findOneAndUpdate(
 43 |       { _id: req.params.userId },
 44 |       {
 45 |         $set: {
 46 |           username: req.body.username,
 47 |           email: req.body.email,
 48 |           password: req.body.password,
 49 |           profilePicture: req.body.profilePicture,
 50 |         },
 51 |       },
 52 |       { new: true }
 53 |     );
 54 |     const { password, ...rest } = updateUser._doc;
 55 |     res.status(200).json(rest);
 56 |   } catch (error) {
 57 |     next(error);
 58 |   }
 59 | };
 60 | 
 61 | const deleteUser = async (req, res, next) => {
 62 |   if (!req.user.isAdmin && req.user.id !== req.params.userId) {
 63 |     return next(
 64 |       errorHandler(403, "You are not allowed to allow to delete this Account")
 65 |     );
 66 |   }
 67 |   try {
 68 |     await USER.findByIdAndDelete(req.params.userId);
 69 |     res.status(200).json("User has been deleted Successfully");
 70 |   } catch (error) {
 71 |     next(error);
 72 |   }
 73 | };
 74 | 
 75 | const signOut = async (req, res) => {
 76 |   try {
 77 |     res
 78 |       .clearCookie("access_token")
 79 |       .status(200)
 80 |       .json("User has been signed out Successfully");
 81 |   } catch (error) {
 82 |     next(error);
 83 |   }
 84 | };
 85 | 
 86 | const getUsers = async (req, res, next) => {
 87 |   if (!req.user.isAdmin) {
 88 |     return next(errorHandler(403, "You are not allowed to see all users"));
 89 |   }
 90 |   try {
 91 |     const startIndex = parseInt(req.query.startIndex) || 0;
 92 |     const limit = parseInt(req.query.limit) || 10;
 93 |     const sortDirection = req.query.sortDirection === "asc" ? 1 : -1;
 94 | 
 95 |     const users = await USER.find()
 96 |       .skip(startIndex)
 97 |       .limit(limit)
 98 |       .sort({ username: sortDirection });
 99 | 
100 |     const userWithPassword = users.map((user) => {
101 |       const { password, ...rest } = user._doc;
102 |       return rest;
103 |     });
104 | 
105 |     const totalUsers = await USER.countDocuments();
106 | 
107 |     const now = new Date();
108 | 
109 |     const oneMonthAgo = new Date(
110 |       now.getFullYear(),
111 |       now.getMonth() - 1,
112 |       now.getDate()
113 |     );
114 | 
115 |     const lastMonthUsers = await USER.countDocuments({
116 |       createdAt: { $gte: oneMonthAgo },
117 |     });
118 | 
119 |     res.status(200).json({
120 |       users: userWithPassword,
121 |       totalUsers,
122 |       lastMonthUsers: lastMonthUsers,
123 |     });
124 |   } catch (error) {
125 |     next(error);
126 |   }
127 | };
128 | 
129 | const getUser = async (req, res, next) => {
130 |   try {
131 |     const user = await USER.findById(req.params.userId);
132 |     const { password, ...rest } = user._doc;
133 |     if (!user) {
134 |       return next(errorHandler(404, "User not found"));
135 |     }
136 |     res.status(200).json(rest);
137 |   } catch (error) {
138 |     next(error);
139 |   }
140 | };
141 | 
142 | module.exports = { test, updateUser, deleteUser, signOut, getUsers, getUser };
143 | 


--------------------------------------------------------------------------------
/frontend/src/pages/SignUp.jsx:
--------------------------------------------------------------------------------
  1 | import { Alert, Button, Label, Spinner, TextInput } from "flowbite-react";
  2 | import { useState } from "react";
  3 | import { Link, useNavigate } from "react-router-dom";
  4 | import OAuth from "../components/OAuth";
  5 | 
  6 | export default function SignUp() {
  7 |   const navigate = useNavigate();
  8 |   const [formData, setFormData] = useState({});
  9 |   const [errorMessage, setErrorMessage] = useState(null);
 10 |   const [loading, setLoading] = useState(false);
 11 |   const handleChange = (event) => {
 12 |     setFormData({
 13 |       ...formData,
 14 |       [event.target.id]: event.target.value.trim(),
 15 |     });
 16 |   };
 17 |   const handleSubmit = async (event) => {
 18 |     event.preventDefault();
 19 |     if (!formData.username || !formData.email || !formData.password) {
 20 |       return setErrorMessage("please fill all the required fields");
 21 |     }
 22 |     try {
 23 |       setLoading(true);
 24 |       setErrorMessage(null);
 25 |       const res = await fetch("/api/auth/signup", {
 26 |         method: "POST",
 27 |         headers: { "Content-Type": "application/json" },
 28 |         body: JSON.stringify(formData),
 29 |       });
 30 |       const data = await res.json();
 31 |       if (data.success === false) {
 32 |         setLoading(false);
 33 |         return setErrorMessage(data.message);
 34 |       }
 35 |       if (res.ok) {
 36 |         navigate("/sign-in");
 37 |       }
 38 |       setLoading(false);
 39 |     } catch (err) {
 40 |       setErrorMessage(err.message);
 41 |       setLoading(false);
 42 |     }
 43 |   };
 44 |   return (
 45 |     <div className="min-h-screen mt-20">
 46 |       <div className="flex p-3 max-w-3xl mx-auto flex-col md:flex-row md:items-center gap-6">
 47 |         {/* left Side Conatnier */}
 48 |         <div className="flex-1">
 49 |           <Link className="font-bold dark:text-white text-4xl">
 50 |             <span className="px-2 py-1 bg-gradient-to-tr from-indigo-500 via-purple-500 to-pink-500 rounded-lg text-white">
 51 |               Nitin&apos;s
 52 |             </span>
 53 |             Blog
 54 |           </Link>
 55 |           <p className="text-sm mt-5">
 56 |             Welcome to our blog community! Signing up is your first step towards
 57 |             unlocking a world of knowledge, creativity, and connection.
 58 |           </p>
 59 |         </div>
 60 |         {/* Right Side Conatnier */}
 61 |         <div className="flex-1">
 62 |           <form
 63 |             action=""
 64 |             className="flex flex-col gap-4"
 65 |             onSubmit={handleSubmit}
 66 |           >
 67 |             <div className="">
 68 |               <Label value="Your username" />
 69 |               <TextInput
 70 |                 type="text"
 71 |                 placeholder="Your username"
 72 |                 id="username"
 73 |                 onChange={handleChange}
 74 |               />
 75 |             </div>
 76 |             <div className="">
 77 |               <Label value="Your email" />
 78 |               <TextInput
 79 |                 type="email"
 80 |                 placeholder="name@company.com"
 81 |                 id="email"
 82 |                 onChange={handleChange}
 83 |               />
 84 |             </div>
 85 |             <div className="">
 86 |               <Label value="Your password" />
 87 |               <TextInput
 88 |                 type="password"
 89 |                 placeholder="Your password"
 90 |                 id="password"
 91 |                 autoComplete="true"
 92 |                 onChange={handleChange}
 93 |               />
 94 |             </div>
 95 |             <Button
 96 |               gradientDuoTone={"purpleToPink"}
 97 |               type="submit"
 98 |               disabled={loading}
 99 |             >
100 |               {loading ? (
101 |                 <>
102 |                   <Spinner size="sm" />
103 |                   <span className="pl-3">Loading....</span>
104 |                 </>
105 |               ) : (
106 |                 "Sign Up"
107 |               )}
108 |             </Button>
109 |             <OAuth />
110 |           </form>
111 |           <div className="flex gap-2 text-sm mt-5">
112 |             <span>have an account ? </span>
113 |             <Link to={"/sign-in"} className="text-blue-500">
114 |               Sign In
115 |             </Link>
116 |           </div>
117 |           {errorMessage && (
118 |             <Alert className="mt-5" color={"failure"}>
119 |               {errorMessage}
120 |             </Alert>
121 |           )}
122 |         </div>
123 |       </div>
124 |     </div>
125 |   );
126 | }
127 | 


--------------------------------------------------------------------------------
/frontend/src/components/Header.jsx:
--------------------------------------------------------------------------------
  1 | import { Avatar, Button, Dropdown, Navbar, TextInput } from "flowbite-react";
  2 | import { Link, useLocation, useNavigate } from "react-router-dom";
  3 | import { AiOutlineSearch } from "react-icons/ai";
  4 | import { FaMoon, FaSun } from "react-icons/fa";
  5 | import { useDispatch, useSelector } from "react-redux";
  6 | import { toogletheme } from "../redux/reducers/theme/themeSlice";
  7 | import { SignOutSucess } from "../redux/reducers/user/userSlice";
  8 | import { useEffect, useState } from "react";
  9 | 
 10 | export default function Header() {
 11 |   const path = useLocation().pathname;
 12 |   const location = useLocation();
 13 |   const navigate = useNavigate();
 14 |   const dispatch = useDispatch();
 15 |   const { theme } = useSelector((state) => state.theme);
 16 |   const { currentUser } = useSelector((state) => state.user);
 17 |   const [searchTerm, setSearchTerm] = useState("");
 18 | 
 19 |   useEffect(() => {
 20 |     const urlParams = new URLSearchParams(location.search);
 21 |     const searchTermFromUrl = urlParams.get("searchTerm");
 22 |     if (searchTermFromUrl) {
 23 |       setSearchTerm(searchTermFromUrl);
 24 |     }
 25 |   }, [location.search]);
 26 | 
 27 |   const handleSignOut = async () => {
 28 |     try {
 29 |       const res = await fetch("/api/user/signout", {
 30 |         method: "POST",
 31 |       });
 32 |       const data = await res.json();
 33 |       if (!res.ok) {
 34 |         console.log(data.message);
 35 |       } else {
 36 |         dispatch(SignOutSucess());
 37 |       }
 38 |     } catch (error) {
 39 |       console.log(error.message);
 40 |     }
 41 |   };
 42 | 
 43 |   const handleSubmit = (e) => {
 44 |     e.preventDefault();
 45 |     const urlParams = new URLSearchParams(location.search);
 46 |     urlParams.set("searchTerm", searchTerm);
 47 |     const searchQuery = urlParams.toString();
 48 |     navigate(`/search?${searchQuery}`);
 49 |   };
 50 | 
 51 |   return (
 52 |     <Navbar className="border-b-2 fixed z-50 top-0 w-full">
 53 |       <Link
 54 |         to={"/"}
 55 |         className="self-center whitespace-nowrap text-sm  sm:text-xl font-semibold dark:text-white"
 56 |       >
 57 |         <span className="px-2 py-1 bg-gradient-to-tr from-indigo-500 via-purple-500 to-pink-500 rounded-lg text-white">
 58 |           Nitin&apos;s
 59 |         </span>
 60 |         Blog
 61 |       </Link>
 62 |       <form onSubmit={handleSubmit}>
 63 |         <TextInput
 64 |           type="text"
 65 |           placeholder="search..."
 66 |           rightIcon={AiOutlineSearch}
 67 |           className="hidden lg:inline"
 68 |           value={searchTerm}
 69 |           onChange={(e) => setSearchTerm(e.target.value)}
 70 |         />
 71 |       </form>
 72 |       <Button className="w-12 h-10 lg:hidden" color={"gray"} pill>
 73 |         <AiOutlineSearch />
 74 |       </Button>
 75 |       <div className="flex gap-2 md:order-2">
 76 |         <Button
 77 |           className="w-12 h-10 hidden lg:inline"
 78 |           color={"gray"}
 79 |           pill
 80 |           onClick={() => dispatch(toogletheme())}
 81 |         >
 82 |           {theme === "light" ? <FaMoon /> : <FaSun />}
 83 |         </Button>
 84 |         {currentUser ? (
 85 |           <Dropdown
 86 |             arrowIcon={false}
 87 |             inline
 88 |             label={
 89 |               <Avatar
 90 |                 alt="User Avatar"
 91 |                 img={currentUser.profilePicture}
 92 |                 rounded
 93 |               />
 94 |             }
 95 |           >
 96 |             <Dropdown.Header>
 97 |               <span className="block text-sm">@{currentUser.username}</span>
 98 |               <span className="block text-sm font-medium truncate">
 99 |                 {currentUser.email}
100 |               </span>
101 |             </Dropdown.Header>
102 |             <Link to={"/dashboard?tab=profile"}>
103 |               <Dropdown.Item>Profile</Dropdown.Item>
104 |             </Link>
105 |             <Dropdown.Divider />
106 |             <Dropdown.Item onClick={handleSignOut}>Sign Out</Dropdown.Item>
107 |           </Dropdown>
108 |         ) : (
109 |           <Link to={"/sign-in"}>
110 |             <Button gradientDuoTone={"purpleToBlue"} outline>
111 |               SignIn
112 |             </Button>
113 |           </Link>
114 |         )}
115 |         <Navbar.Toggle />
116 |       </div>
117 |       <Navbar.Collapse>
118 |         <Navbar.Link active={path === "/"} as={"div"}>
119 |           <Link to={"/"}>Home</Link>
120 |         </Navbar.Link>
121 |         <Navbar.Link active={path === "/about"} as={"div"}>
122 |           <Link to={"/about"}>About</Link>
123 |         </Navbar.Link>
124 |         <Navbar.Link active={path === "/projects"} as={"div"}>
125 |           <Link to={"/projects"}>Projects</Link>
126 |         </Navbar.Link>
127 |       </Navbar.Collapse>
128 |     </Navbar>
129 |   );
130 | }
131 | 


--------------------------------------------------------------------------------
/frontend/src/components/Comment.jsx:
--------------------------------------------------------------------------------
  1 | import PropTypes from "prop-types";
  2 | import { useEffect, useState } from "react";
  3 | import moment from "moment";
  4 | import { FaThumbsUp } from "react-icons/fa";
  5 | import { useSelector } from "react-redux";
  6 | import { Button, Textarea } from "flowbite-react";
  7 | 
  8 | export default function Comment({ comment, onLike, onEdit, onDelte }) {
  9 |   const [user, setuser] = useState({});
 10 |   const { currentUser } = useSelector((state) => state.user);
 11 |   const [editedContent, setEditedContent] = useState(comment.content);
 12 |   const [isEditing, setIsEditing] = useState(false);
 13 | 
 14 |   useEffect(() => {
 15 |     const getUsers = async () => {
 16 |       try {
 17 |         const res = await fetch(`/api/user/${comment.userId}`);
 18 |         const data = await res.json();
 19 |         if (res.ok) {
 20 |           setuser(data);
 21 |         }
 22 |       } catch (error) {
 23 |         console.log(error);
 24 |       }
 25 |     };
 26 |     getUsers();
 27 |   }, [comment]);
 28 | 
 29 |   const handleEdit = async () => {
 30 |     setIsEditing(true);
 31 |     setEditedContent(comment.content);
 32 |   };
 33 | 
 34 |   const handleSave = async () => {
 35 |     try {
 36 |       const res = await fetch(`/api/comment/editComment/${comment._id}`, {
 37 |         method: "PUT",
 38 |         headers: {
 39 |           "Content-Type": "application/json",
 40 |         },
 41 |         body: JSON.stringify({ content: editedContent }),
 42 |       });
 43 | 
 44 |       if (res.ok) {
 45 |         onEdit(comment, editedContent);
 46 |         setIsEditing(false);
 47 |       }
 48 |     } catch (error) {
 49 |       console.log(error);
 50 |     }
 51 |   };
 52 | 
 53 |   return (
 54 |     <div className="flex p-4 border-b dark:border-gray-600 text-sm">
 55 |       <div className="flex-shrink-0 mr-3">
 56 |         <img
 57 |           className="w-10 h-10 rounded-full bg-gray-200"
 58 |           src={user.profilePicture}
 59 |           alt={user.username}
 60 |         />
 61 |       </div>
 62 |       <div className="flex-1">
 63 |         <div className="flex items-center mb-1">
 64 |           <span className="font-bold mr-1 text-xs truncate">
 65 |             {user ? `@ ${user.username}` : `anonymous user`}
 66 |           </span>
 67 |           <span className="text-gray- text-xs">
 68 |             {moment(comment.createdAt).fromNow()}
 69 |           </span>
 70 |         </div>
 71 |         {isEditing ? (
 72 |           <>
 73 |             <Textarea
 74 |               className="mb-2"
 75 |               value={editedContent && editedContent}
 76 |               onChange={(e) => setEditedContent(e.target.value)}
 77 |             />
 78 |             <div className="flex justify-end gap-2 text-xs">
 79 |               <Button
 80 |                 type="button"
 81 |                 size={"sm"}
 82 |                 gradientDuoTone={"purpleToBlue"}
 83 |                 onClick={handleSave}
 84 |               >
 85 |                 Save
 86 |               </Button>
 87 |               <Button
 88 |                 type="button"
 89 |                 size={"sm"}
 90 |                 gradientDuoTone={"purpleToBlue"}
 91 |                 outline
 92 |                 onClick={() => setIsEditing(false)}
 93 |               >
 94 |                 Cancel
 95 |               </Button>
 96 |             </div>
 97 |           </>
 98 |         ) : (
 99 |           <>
100 |             <p className="text-gray-500 pb-2">{comment && comment.content}</p>
101 |             <div className="flex items-center pt-2 text-xs border-t dark:border-gray-700 max-w-fit gap-2">
102 |               <button
103 |                 type="button"
104 |                 onClick={() => onLike(comment._id)}
105 |                 className={`text-gray-400 hover:text-blue-500 ${
106 |                   currentUser &&
107 |                   comment.likes.includes(currentUser._id) &&
108 |                   "!text-blue-500"
109 |                 }`}
110 |               >
111 |                 <FaThumbsUp className="text-sm" />
112 |               </button>
113 |               <p className="text-gray-400">
114 |                 {comment.numberofLikes > 0 &&
115 |                   comment.numberofLikes +
116 |                     " " +
117 |                     (comment.numberofLikes === 1 ? "Like" : "Likes")}
118 |               </p>
119 |               {currentUser &&
120 |                 currentUser._id === comment.userId &&
121 |                 currentUser.isAdmin && (
122 |                   <>
123 |                     <button
124 |                       type="button"
125 |                       className="text-gray-400 hover:text-blue-500"
126 |                       onClick={handleEdit}
127 |                     >
128 |                       Edit
129 |                     </button>
130 |                     <button
131 |                       type="button"
132 |                       className="text-gray-400 hover:text-red-500"
133 |                       onClick={() => onDelte(comment._id)}
134 |                     >
135 |                       Delete
136 |                     </button>
137 |                   </>
138 |                 )}
139 |             </div>
140 |           </>
141 |         )}
142 |       </div>
143 |     </div>
144 |   );
145 | }
146 | 
147 | Comment.propTypes = {
148 |   comment: PropTypes.shape({
149 |     _id: PropTypes.string,
150 |     content: PropTypes.string,
151 |     userId: PropTypes.string,
152 |     postId: PropTypes.string,
153 |     createdAt: PropTypes.string,
154 |     updatedAt: PropTypes.string,
155 |     likes: PropTypes.array,
156 |     numberofLikes: PropTypes.number,
157 |   }),
158 |   onLike: PropTypes.func,
159 |   onEdit: PropTypes.func,
160 |   onDelte: PropTypes.func,
161 | };
162 | 


--------------------------------------------------------------------------------
/frontend/src/components/DashComments.jsx:
--------------------------------------------------------------------------------
  1 | import { Modal, Table, Button } from "flowbite-react";
  2 | import { useEffect, useState } from "react";
  3 | import { useSelector } from "react-redux";
  4 | import { HiOutlineExclamationCircle } from "react-icons/hi";
  5 | 
  6 | export default function DashComments() {
  7 |   const { currentUser } = useSelector((state) => state.user);
  8 |   const [comments, setComments] = useState([]);
  9 |   const [showMore, setShowMore] = useState(true);
 10 |   const [showModal, setShowModal] = useState(false);
 11 |   const [commentIdToDelete, setCommentIdToDelete] = useState("");
 12 |   useEffect(() => {
 13 |     const fetchComments = async () => {
 14 |       try {
 15 |         const res = await fetch(`/api/comment/getcomments`);
 16 |         const data = await res.json();
 17 |         if (res.ok) {
 18 |           setComments(data.comments);
 19 |           if (data.comments.length < 9) {
 20 |             setShowMore(false);
 21 |           }
 22 |         }
 23 |       } catch (error) {
 24 |         console.log(error.message);
 25 |       }
 26 |     };
 27 |     if (currentUser.isAdmin) {
 28 |       fetchComments();
 29 |     }
 30 |   }, [currentUser._id, currentUser.isAdmin]);
 31 | 
 32 |   const handleShowMore = async () => {
 33 |     const startIndex = comments.length;
 34 |     try {
 35 |       const res = await fetch(
 36 |         `/api/comment/getcomments?startIndex=${startIndex}`
 37 |       );
 38 |       const data = await res.json();
 39 |       if (res.ok) {
 40 |         setComments((prev) => [...prev, ...data.comments]);
 41 |         if (data.comments.length < 9) {
 42 |           setShowMore(false);
 43 |         }
 44 |       }
 45 |     } catch (error) {
 46 |       console.log(error.message);
 47 |     }
 48 |   };
 49 | 
 50 |   const handleDeleteComment = async () => {
 51 |     setShowModal(false);
 52 |     try {
 53 |       const res = await fetch(
 54 |         `/api/comment/deleteComment/${commentIdToDelete}`,
 55 |         {
 56 |           method: "DELETE",
 57 |         }
 58 |       );
 59 |       const data = await res.json();
 60 |       if (res.ok) {
 61 |         setComments((prev) =>
 62 |           prev.filter((comment) => comment._id !== commentIdToDelete)
 63 |         );
 64 |         setShowModal(false);
 65 |       } else {
 66 |         console.log(data.message);
 67 |       }
 68 |     } catch (error) {
 69 |       console.log(error.message);
 70 |     }
 71 |   };
 72 | 
 73 |   return (
 74 |     <div className="table-auto overflow-x-scroll overflow-y-scroll lg:w-full md:mx-auto p-3 scrollbar scrollbar-track-slate-100 scrollbar-thumb-slate-300 dark:scrollbar-track-slate-700 dark:scrollbar-thumb-slate-500">
 75 |       {currentUser.isAdmin && comments.length > 0 ? (
 76 |         <>
 77 |           <Table hoverable className="shadow-md">
 78 |             <Table.Head>
 79 |               <Table.HeadCell>Date updated</Table.HeadCell>
 80 |               <Table.HeadCell>Comment content</Table.HeadCell>
 81 |               <Table.HeadCell>Number of likes</Table.HeadCell>
 82 |               <Table.HeadCell>PostId</Table.HeadCell>
 83 |               <Table.HeadCell>UserId</Table.HeadCell>
 84 |               <Table.HeadCell>Delete</Table.HeadCell>
 85 |             </Table.Head>
 86 |             {comments.map((comment) => (
 87 |               <Table.Body className="divide-y" key={comment._id}>
 88 |                 <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
 89 |                   <Table.Cell>
 90 |                     {new Date(comment.updatedAt).toLocaleDateString()}
 91 |                   </Table.Cell>
 92 |                   <Table.Cell>{comment.content}</Table.Cell>
 93 |                   <Table.Cell>{comment.numberofLikes}</Table.Cell>
 94 |                   <Table.Cell>{comment.postId}</Table.Cell>
 95 |                   <Table.Cell>{comment.userId}</Table.Cell>
 96 |                   <Table.Cell>
 97 |                     <span
 98 |                       onClick={() => {
 99 |                         setShowModal(true);
100 |                         setCommentIdToDelete(comment._id);
101 |                       }}
102 |                       className="font-medium text-red-500 hover:underline cursor-pointer"
103 |                     >
104 |                       Delete
105 |                     </span>
106 |                   </Table.Cell>
107 |                 </Table.Row>
108 |               </Table.Body>
109 |             ))}
110 |           </Table>
111 |           {showMore && (
112 |             <button
113 |               onClick={handleShowMore}
114 |               className="w-full text-teal-500 self-center text-sm py-7"
115 |             >
116 |               Show more
117 |             </button>
118 |           )}
119 |         </>
120 |       ) : (
121 |         <p>You have no comments yet!</p>
122 |       )}
123 |       <Modal
124 |         show={showModal}
125 |         onClose={() => setShowModal(false)}
126 |         popup
127 |         size="md"
128 |       >
129 |         <Modal.Header />
130 |         <Modal.Body>
131 |           <div className="text-center">
132 |             <HiOutlineExclamationCircle className="h-14 w-14 text-gray-400 dark:text-gray-200 mb-4 mx-auto" />
133 |             <h3 className="mb-5 text-lg text-gray-500 dark:text-gray-400">
134 |               Are you sure you want to delete this comment?
135 |             </h3>
136 |             <div className="flex justify-center gap-4">
137 |               <Button color="failure" onClick={handleDeleteComment}>
138 |                 Yes, I&apos;m sure
139 |               </Button>
140 |               <Button color="gray" onClick={() => setShowModal(false)}>
141 |                 No, cancel
142 |               </Button>
143 |             </div>
144 |           </div>
145 |         </Modal.Body>
146 |       </Modal>
147 |     </div>
148 |   );
149 | }
150 | 


--------------------------------------------------------------------------------
/frontend/src/pages/CreatePost.jsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import { Alert, Button, FileInput, Select, TextInput } from "flowbite-react";
  3 | import ReactQuill from "react-quill";
  4 | import "react-quill/dist/quill.snow.css";
  5 | import {
  6 |   getDownloadURL,
  7 |   getStorage,
  8 |   ref,
  9 |   uploadBytesResumable,
 10 | } from "firebase/storage";
 11 | import { app } from "../firebase";
 12 | import { CircularProgressbar } from "react-circular-progressbar";
 13 | import "react-circular-progressbar/dist/styles.css";
 14 | import { useNavigate } from "react-router-dom";
 15 | 
 16 | export default function CreatePost() {
 17 |   const [file, setFile] = useState(null);
 18 |   const [imageUploadProgress, setImageUploadProgress] = useState(null);
 19 |   const [imageUploadError, setImageUploadError] = useState(null);
 20 |   const [formData, setFormData] = useState({});
 21 |   const [publishError, setPublishError] = useState(null);
 22 |   const navigate = useNavigate();
 23 | 
 24 |   const handleUploadImage = async () => {
 25 |     try {
 26 |       if (!file) {
 27 |         setImageUploadError("Please select an Image file");
 28 |         return;
 29 |       }
 30 |       setImageUploadError(null);
 31 |       const storage = getStorage(app);
 32 |       const fileName = new Date().getTime() + "-" + file.name;
 33 |       const storageRef = ref(storage, fileName);
 34 |       const uploadTask = uploadBytesResumable(storageRef, file);
 35 |       uploadTask.on(
 36 |         "state_changed",
 37 |         (snapshot) => {
 38 |           const progress =
 39 |             (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
 40 |           setImageUploadProgress(progress.toFixed(0));
 41 |         },
 42 |         (error) => {
 43 |           setImageUploadError(error.message);
 44 |           setImageUploadProgress(null);
 45 |         },
 46 |         () => {
 47 |           getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
 48 |             setImageUploadProgress(null);
 49 |             setImageUploadError(null);
 50 |             setFormData({
 51 |               ...formData,
 52 |               image: downloadURL,
 53 |             });
 54 |           });
 55 |         }
 56 |       );
 57 |     } catch (error) {
 58 |       setImageUploadError(error.message);
 59 |       setImageUploadProgress(null);
 60 |       console.log(error);
 61 |     }
 62 |   };
 63 | 
 64 |   const handleSubmit = async (e) => {
 65 |     e.preventDefault();
 66 |     try {
 67 |       const res = await fetch("/api/post/create", {
 68 |         method: "POST",
 69 |         headers: {
 70 |           "Content-Type": "application/json",
 71 |         },
 72 |         body: JSON.stringify(formData),
 73 |       });
 74 |       const data = await res.json();
 75 |       if (!res.ok) {
 76 |         setPublishError(data.message);
 77 |         return;
 78 |       }
 79 |       if (res.ok) {
 80 |         setPublishError(null);
 81 |         console.log("Naviagte");
 82 |         navigate(`/post/${data.slug}`);
 83 |       }
 84 |     } catch (error) {
 85 |       setPublishError("Somthing went wrong, please try again");
 86 |     }
 87 |   };
 88 | 
 89 |   return (
 90 |     <div className="p-3 max-w-3xl mx-auto min-h-screen">
 91 |       <h1 className="text-center text-3xl my-7 font-semibold">
 92 |         Create a post{" "}
 93 |       </h1>
 94 |       <form className="flex flex-col gap-4 " onSubmit={handleSubmit}>
 95 |         <div className="flex flex-col gap-4 sm:flex-row justify-between">
 96 |           <TextInput
 97 |             type="text"
 98 |             placeholder="Title"
 99 |             required
100 |             id="title"
101 |             className="flex-1"
102 |             onChange={(e) =>
103 |               setFormData({ ...formData, title: e.target.value })
104 |             }
105 |           />
106 |           <Select
107 |             onChange={(e) =>
108 |               setFormData({ ...formData, category: e.target.value })
109 |             }
110 |           >
111 |             <option value={"uncategorized"}>select a category</option>
112 |             <option value={"javascript"}>javascript</option>
113 |             <option value={"react"}>React.Js</option>
114 |             <option value={"Next"}>Next.Js</option>
115 |           </Select>
116 |         </div>
117 |         <div className="flex gap-4 items-center justify-between border-4 border-teal-500 border-dotted p-3">
118 |           <FileInput
119 |             type="file"
120 |             accept="image/*"
121 |             onChange={(e) => setFile(e.target.files[0])}
122 |           />
123 |           <Button
124 |             type="button"
125 |             gradientDuoTone={"purpleToBlue"}
126 |             size={"sm"}
127 |             outline
128 |             onClick={handleUploadImage}
129 |             disabled={imageUploadProgress}
130 |           >
131 |             {imageUploadProgress ? (
132 |               <div className="w-16 h-16">
133 |                 <CircularProgressbar
134 |                   value={imageUploadProgress}
135 |                   text={`${imageUploadProgress || 0} %`}
136 |                 />
137 |               </div>
138 |             ) : (
139 |               "Upload Image"
140 |             )}
141 |           </Button>
142 |         </div>
143 |         {imageUploadError && (
144 |           <Alert color={"failure"}> {imageUploadError} </Alert>
145 |         )}
146 |         {formData.image && (
147 |           <img
148 |             src={formData.image}
149 |             alt="uploaded"
150 |             className="w-full h-72 object-cover"
151 |           />
152 |         )}
153 |         <ReactQuill
154 |           theme="snow"
155 |           placeholder="Write Something"
156 |           className="h-72 mb-12"
157 |           required
158 |           onChange={(value) => setFormData({ ...formData, content: value })}
159 |         />
160 |         <Button type="submit" gradientDuoTone={"purpleToPink"}>
161 |           Publish
162 |         </Button>
163 |         {publishError && (
164 |           <Alert className="mt-5" color={"failure"}>
165 |             {" "}
166 |             {publishError}{" "}
167 |           </Alert>
168 |         )}
169 |       </form>
170 |     </div>
171 |   );
172 | }
173 | 


--------------------------------------------------------------------------------
/frontend/src/components/DashUsers.jsx:
--------------------------------------------------------------------------------
  1 | import { Button, Modal, Table } from "flowbite-react";
  2 | import { useEffect, useState } from "react";
  3 | import { HiOutlineExclamationCircle } from "react-icons/hi";
  4 | import { useSelector } from "react-redux";
  5 | import { FaCheck, FaTimes } from "react-icons/fa";
  6 | 
  7 | export default function DashUsers() {
  8 |   const { currentUser } = useSelector((state) => state.user);
  9 |   const [users, setUsers] = useState([]);
 10 |   const [showMore, setShowMore] = useState(true);
 11 |   const [showModal, setShowModal] = useState(false);
 12 |   const [userIdToDelete, setUserIdToDelete] = useState("");
 13 |   useEffect(() => {
 14 |     const fetchUsers = async () => {
 15 |       try {
 16 |         const res = await fetch(`/api/user/getusers`);
 17 |         const data = await res.json();
 18 |         if (res.ok) {
 19 |           setUsers(data.users);
 20 |           if (data.users.length < 9) {
 21 |             setShowMore(false);
 22 |           }
 23 |         }
 24 |       } catch (error) {
 25 |         console.log(error);
 26 |       }
 27 |     };
 28 |     if (currentUser.isAdmin) {
 29 |       fetchUsers();
 30 |     }
 31 |   }, [currentUser._id, currentUser.isAdmin]);
 32 | 
 33 |   const handleShowMore = async () => {
 34 |     const startIndex = users.length;
 35 |     try {
 36 |       const res = await fetch(`/api/user/getusers?startIndex=${startIndex}`);
 37 |       const data = await res.json();
 38 |       if (res.ok) {
 39 |         setUsers([...users, ...data.users]);
 40 |         if (data.users.length < 9) {
 41 |           setShowMore(false);
 42 |         }
 43 |       }
 44 |     } catch (error) {
 45 |       console.log(error.message);
 46 |     }
 47 |   };
 48 | 
 49 |   const handleDeleteUser = async () => {
 50 |     try {
 51 |       const res = await fetch(`/api/user/delete/${userIdToDelete}`, {
 52 |         method: "DELETE",
 53 |       });
 54 |       const data = await res.json();
 55 |       if (res.ok) {
 56 |         console.log(data);
 57 |         setUsers(users.filter((user) => user._id !== userIdToDelete));
 58 |         setShowModal(false);
 59 |       } else {
 60 |         console.log(data.message);
 61 |       }
 62 |     } catch (error) {
 63 |       console.log(error.message);
 64 |     }
 65 |   };
 66 | 
 67 |   return (
 68 |     <div className="table-auto overflow-x-scroll overflow-y-scroll lg:w-full md:mx-auto p-3 scrollbar scrollbar-track-slate-100 scrollbar-thumb-slate-300 dark:scrollbar-track-slate-700 dark:scrollbar-thumb-slate-500">
 69 |       {currentUser.isAdmin && users.length > 0 ? (
 70 |         <>
 71 |           <Table hoverable className="shadow-md">
 72 |             <Table.Head>
 73 |               <Table.HeadCell>Date Created</Table.HeadCell>
 74 |               <Table.HeadCell>User Image</Table.HeadCell>
 75 |               <Table.HeadCell>User Name</Table.HeadCell>
 76 |               <Table.HeadCell>Email</Table.HeadCell>
 77 |               <Table.HeadCell>Admin</Table.HeadCell>
 78 |               <Table.HeadCell>Delete</Table.HeadCell>
 79 |             </Table.Head>
 80 |             {users.map((user, key) => {
 81 |               return (
 82 |                 <Table.Body key={key} className="divide-y">
 83 |                   <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
 84 |                     <Table.Cell>
 85 |                       {new Date(user.createdAt).toLocaleDateString()}
 86 |                     </Table.Cell>
 87 |                     <Table.Cell>
 88 |                       <img
 89 |                         src={user.profilePicture}
 90 |                         alt={user.username}
 91 |                         className="w-10 h-10 object-cover bg-gray-500 rounded-full"
 92 |                         loading="lazy"
 93 |                       />
 94 |                     </Table.Cell>
 95 |                     <Table.Cell>
 96 |                       {user.username.charAt(0).toUpperCase() +
 97 |                         user.username.slice(1)}
 98 |                     </Table.Cell>
 99 |                     <Table.Cell>{user.email}</Table.Cell>
100 |                     <Table.Cell>
101 |                       {user.isAdmin ? (
102 |                         <FaCheck className="text-green-500" />
103 |                       ) : (
104 |                         <FaTimes className="text-red-500" />
105 |                       )}
106 |                     </Table.Cell>
107 |                     <Table.Cell>
108 |                       <span
109 |                         onClick={() => {
110 |                           setShowModal(true);
111 |                           setUserIdToDelete(user._id);
112 |                         }}
113 |                         className="font-medium text-red-500 hover:underline cursor-pointer"
114 |                       >
115 |                         Delete
116 |                       </span>
117 |                     </Table.Cell>
118 |                   </Table.Row>
119 |                 </Table.Body>
120 |               );
121 |             })}
122 |           </Table>
123 |           {showMore && (
124 |             <button
125 |               onClick={handleShowMore}
126 |               className="w-full text-teal-500 self-center text-sm py-7"
127 |             >
128 |               show more
129 |             </button>
130 |           )}
131 |         </>
132 |       ) : (
133 |         <p>You Have No Users Yet !</p>
134 |       )}
135 |       <Modal
136 |         show={showModal}
137 |         onClose={() => setShowModal(false)}
138 |         popup
139 |         size={"md"}
140 |       >
141 |         <Modal.Header />
142 |         <Modal.Body>
143 |           <div className="text-center">
144 |             <HiOutlineExclamationCircle className="h-14 w-14 text-gray-400 dark:text-gray-200 mb-4 mx-auto" />
145 |             <h1 className="mb-5 text-lg text-gray-500 dark:text-gray-400">
146 |               Are You Sure. You want to delete this User ?
147 |             </h1>
148 |             <div className="flex justify-center gap-4">
149 |               <Button color={"failure"} onClick={handleDeleteUser}>
150 |                 Yes I am Sure
151 |               </Button>
152 |               <Button color={"gray"} onClick={() => setShowModal(false)}>
153 |                 No, Cancel
154 |               </Button>
155 |             </div>
156 |           </div>
157 |         </Modal.Body>
158 |       </Modal>
159 |     </div>
160 |   );
161 | }
162 | 


--------------------------------------------------------------------------------
/frontend/src/pages/Search.jsx:
--------------------------------------------------------------------------------
  1 | import { Button, Select, TextInput } from "flowbite-react";
  2 | import { useEffect, useState } from "react";
  3 | import { useLocation, useNavigate } from "react-router-dom";
  4 | import PostCard from "../components/PostCard";
  5 | 
  6 | export default function Search() {
  7 |   const [sidebarData, setSidebarData] = useState({
  8 |     searchTerm: "",
  9 |     sort: "desc",
 10 |     category: "uncategorized",
 11 |   });
 12 | 
 13 |   console.log(sidebarData);
 14 |   const [posts, setPosts] = useState([]);
 15 |   const [loading, setLoading] = useState(false);
 16 |   const [showMore, setShowMore] = useState(false);
 17 | 
 18 |   const location = useLocation();
 19 | 
 20 |   const navigate = useNavigate();
 21 | 
 22 |   useEffect(() => {
 23 |     const urlParams = new URLSearchParams(location.search);
 24 |     const searchTermFromUrl = urlParams.get("searchTerm");
 25 |     const sortFromUrl = urlParams.get("sort");
 26 |     const categoryFromUrl = urlParams.get("category");
 27 |     if (searchTermFromUrl || sortFromUrl || categoryFromUrl) {
 28 |       setSidebarData({
 29 |         ...sidebarData,
 30 |         searchTerm: searchTermFromUrl,
 31 |         sort: sortFromUrl,
 32 |         category: categoryFromUrl,
 33 |       });
 34 |     }
 35 | 
 36 |     const fetchPosts = async () => {
 37 |       setLoading(true);
 38 |       const searchQuery = urlParams.toString();
 39 |       const res = await fetch(`/api/post/getposts?${searchQuery}`);
 40 |       if (!res.ok) {
 41 |         setLoading(false);
 42 |         return;
 43 |       }
 44 |       if (res.ok) {
 45 |         const data = await res.json();
 46 |         setPosts(data.posts);
 47 |         setLoading(false);
 48 |         if (data.posts.length === 9) {
 49 |           setShowMore(true);
 50 |         } else {
 51 |           setShowMore(false);
 52 |         }
 53 |       }
 54 |     };
 55 |     fetchPosts();
 56 |   }, [location.search]);
 57 | 
 58 |   const handleChange = (e) => {
 59 |     if (e.target.id === "searchTerm") {
 60 |       setSidebarData({ ...sidebarData, searchTerm: e.target.value });
 61 |     }
 62 |     if (e.target.id === "sort") {
 63 |       const order = e.target.value || "desc";
 64 |       setSidebarData({ ...sidebarData, sort: order });
 65 |     }
 66 |     if (e.target.id === "category") {
 67 |       const category = e.target.value || "uncategorized";
 68 |       setSidebarData({ ...sidebarData, category });
 69 |     }
 70 |   };
 71 | 
 72 |   const handleSubmit = (e) => {
 73 |     e.preventDefault();
 74 |     const urlParams = new URLSearchParams(location.search);
 75 |     urlParams.set("searchTerm", sidebarData.searchTerm);
 76 |     urlParams.set("sort", sidebarData.sort);
 77 |     urlParams.set("category", sidebarData.category);
 78 |     const searchQuery = urlParams.toString();
 79 |     navigate(`/search?${searchQuery}`);
 80 |   };
 81 | 
 82 |   const handleShowMore = async () => {
 83 |     const numberOfPosts = posts.length;
 84 |     const startIndex = numberOfPosts;
 85 |     const urlParams = new URLSearchParams(location.search);
 86 |     urlParams.set("startIndex", startIndex);
 87 |     const searchQuery = urlParams.toString();
 88 |     const res = await fetch(`/api/post/getposts?${searchQuery}`);
 89 |     if (!res.ok) {
 90 |       return;
 91 |     }
 92 |     if (res.ok) {
 93 |       const data = await res.json();
 94 |       setPosts([...posts, ...data.posts]);
 95 |       if (data.posts.length === 9) {
 96 |         setShowMore(true);
 97 |       } else {
 98 |         setShowMore(false);
 99 |       }
100 |     }
101 |   };
102 | 
103 |   const handleClearFilters = () => {
104 |     setSidebarData({
105 |       searchTerm: "",
106 |       sort: "desc",
107 |       category: "uncategorized",
108 |     });
109 |     navigate("/search");
110 |   };
111 | 
112 |   return (
113 |     <div className="flex flex-col md:flex-row">
114 |       <div className="p-7 border-b md:border-r md:min-h-screen border-gray-500">
115 |         <form className="flex flex-col gap-8" onSubmit={handleSubmit}>
116 |           <div className="flex   items-center gap-2">
117 |             <label className="whitespace-nowrap font-semibold">
118 |               Search Term:
119 |             </label>
120 |             <TextInput
121 |               placeholder="Search..."
122 |               id="searchTerm"
123 |               type="text"
124 |               value={sidebarData.searchTerm}
125 |               onChange={handleChange}
126 |             />
127 |           </div>
128 |           <div className="flex items-center gap-2">
129 |             <label className="font-semibold">Sort:</label>
130 |             <Select onChange={handleChange} value={sidebarData.sort} id="sort">
131 |               <option value="desc">Latest</option>
132 |               <option value="asc">Oldest</option>
133 |             </Select>
134 |           </div>
135 |           <div className="flex items-center gap-2">
136 |             <label className="font-semibold">Category:</label>
137 |             <Select
138 |               onChange={handleChange}
139 |               value={sidebarData.category}
140 |               id="category"
141 |             >
142 |               <option value=" ">Uncategorized</option>
143 |               <option value="reactjs">React.js</option>
144 |               <option value="nextjs">Next.js</option>
145 |               <option value="javascript">JavaScript</option>
146 |             </Select>
147 |           </div>
148 |           <Button type="submit" outline gradientDuoTone="purpleToPink">
149 |             Apply Filters
150 |           </Button>
151 |           <Button type="button" color="gray" onClick={handleClearFilters}>
152 |             Clear Filters
153 |           </Button>
154 |         </form>
155 |       </div>
156 |       <div className="w-full">
157 |         <h1 className="text-3xl font-semibold sm:border-b border-gray-500 p-3 mt-5 ">
158 |           Posts results:
159 |         </h1>
160 |         <div className="p-7 flex flex-wrap gap-4">
161 |           {!loading && posts.length === 0 && (
162 |             <p className="text-xl text-gray-500">No posts found.</p>
163 |           )}
164 |           {loading && <p className="text-xl text-gray-500">Loading...</p>}
165 |           {!loading &&
166 |             posts &&
167 |             posts.map((post) => <PostCard key={post._id} post={post} />)}
168 |           {showMore && (
169 |             <button
170 |               onClick={handleShowMore}
171 |               className="text-teal-500 text-lg hover:underline p-7 w-full"
172 |             >
173 |               Show More
174 |             </button>
175 |           )}
176 |         </div>
177 |       </div>
178 |     </div>
179 |   );
180 | }
181 | 


--------------------------------------------------------------------------------
/frontend/src/components/DashPosts.jsx:
--------------------------------------------------------------------------------
  1 | import { Button, Modal, Table } from "flowbite-react";
  2 | import { useEffect, useState } from "react";
  3 | import { HiOutlineExclamationCircle } from "react-icons/hi";
  4 | import { useSelector } from "react-redux";
  5 | import { Link } from "react-router-dom";
  6 | 
  7 | export default function DashPosts() {
  8 |   const { currentUser } = useSelector((state) => state.user);
  9 |   const [userPosts, setUserPosts] = useState([]);
 10 |   const [showMore, setShowMore] = useState(true);
 11 |   const [showModal, setShowModal] = useState(false);
 12 |   const [postIdToDelete, setPostIdToDelete] = useState("");
 13 |   useEffect(() => {
 14 |     const fetchPosts = async () => {
 15 |       try {
 16 |         const res = await fetch(`/api/post/getposts?userId=${currentUser._id}`);
 17 |         const data = await res.json();
 18 |         if (res.ok) {
 19 |           setUserPosts(data.posts);
 20 |           if (data.posts.length < 9) {
 21 |             setShowMore(false);
 22 |           }
 23 |         }
 24 |       } catch (error) {
 25 |         console.log(error.message);
 26 |       }
 27 |     };
 28 |     if (currentUser.isAdmin) {
 29 |       fetchPosts();
 30 |     }
 31 |   }, [currentUser._id, currentUser.isAdmin]);
 32 | 
 33 |   const handleShowMore = async () => {
 34 |     const startIndex = userPosts.length;
 35 |     try {
 36 |       const res = await fetch(
 37 |         `/api/post/getposts?userId=${currentUser._id}&startIndex=${startIndex}`
 38 |       );
 39 |       const data = await res.json();
 40 |       if (res.ok) {
 41 |         setUserPosts([...userPosts, ...data.posts]);
 42 |         if (data.posts.length < 9) {
 43 |           setShowMore(false);
 44 |         }
 45 |       }
 46 |     } catch (error) {
 47 |       console.log(error.message);
 48 |     }
 49 |   };
 50 | 
 51 |   const handleDeletePost = async () => {
 52 |     setShowModal(false);
 53 |     try {
 54 |       const res = await fetch(
 55 |         `/api/post/deletepost/${postIdToDelete}/${currentUser._id}`,
 56 |         {
 57 |           method: "DELETE",
 58 |         }
 59 |       );
 60 |       const data = await res.json();
 61 |       if (!res.ok) {
 62 |         console.log(data.message);
 63 |       } else {
 64 |         setUserPosts((prev) =>
 65 |           prev.filter((post) => post._id !== postIdToDelete)
 66 |         );
 67 |       }
 68 |     } catch (error) {
 69 |       console.log(error.message);
 70 |     }
 71 |   };
 72 | 
 73 |   return (
 74 |     <div className="table-auto overflow-x-scroll overflow-y-scroll lg:w-full md:mx-auto p-3 scrollbar scrollbar-track-slate-100 scrollbar-thumb-slate-300 dark:scrollbar-track-slate-700 dark:scrollbar-thumb-slate-500">
 75 |       {currentUser.isAdmin && userPosts.length > 0 ? (
 76 |         <>
 77 |           <Table hoverable className="shadow-md">
 78 |             <Table.Head>
 79 |               <Table.HeadCell>Date Updated</Table.HeadCell>
 80 |               <Table.HeadCell>Post Image</Table.HeadCell>
 81 |               <Table.HeadCell>Post Title</Table.HeadCell>
 82 |               <Table.HeadCell>Category</Table.HeadCell>
 83 |               <Table.HeadCell>Delete</Table.HeadCell>
 84 |               <Table.HeadCell>
 85 |                 <span>Edit</span>
 86 |               </Table.HeadCell>
 87 |             </Table.Head>
 88 |             {userPosts.map((post, key) => {
 89 |               return (
 90 |                 <Table.Body key={key} className="divide-y">
 91 |                   <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
 92 |                     <Table.Cell>
 93 |                       {new Date(post.updatedAt).toLocaleDateString()}
 94 |                     </Table.Cell>
 95 |                     <Table.Cell>
 96 |                       <Link to={`/post/${post.slug}`}>
 97 |                         <img
 98 |                           src={post.image}
 99 |                           alt={post.title}
100 |                           className="w-20 h-10 object-cover bg-gray-500"
101 |                           loading="lazy"
102 |                         />
103 |                       </Link>
104 |                     </Table.Cell>
105 |                     <Table.Cell>
106 |                       <Link
107 |                         className="font-medium text-gray-900 dark:text-white"
108 |                         to={`/post/${post.slug}`}
109 |                       >
110 |                         {post.title}
111 |                       </Link>
112 |                     </Table.Cell>
113 |                     <Table.Cell>{post.category}</Table.Cell>
114 |                     <Table.Cell>
115 |                       <span
116 |                         onClick={() => {
117 |                           setShowModal(true);
118 |                           setPostIdToDelete(post._id);
119 |                         }}
120 |                         className="font-medium text-red-500 hover:underline cursor-pointer"
121 |                       >
122 |                         Delete
123 |                       </span>
124 |                     </Table.Cell>
125 |                     <Table.Cell>
126 |                       <Link
127 |                         className="text-teal-500 hover:underline"
128 |                         to={`/update-post/${post._id}`}
129 |                       >
130 |                         <span>Edit</span>
131 |                       </Link>
132 |                     </Table.Cell>
133 |                   </Table.Row>
134 |                 </Table.Body>
135 |               );
136 |             })}
137 |           </Table>
138 |           {showMore && (
139 |             <button
140 |               onClick={handleShowMore}
141 |               className="w-full text-teal-500 self-center text-sm py-7"
142 |             >
143 |               show more
144 |             </button>
145 |           )}
146 |         </>
147 |       ) : (
148 |         <p>You Have No Post Yet !</p>
149 |       )}
150 |       <Modal
151 |         show={showModal}
152 |         onClose={() => setShowModal(false)}
153 |         popup
154 |         size={"md"}
155 |       >
156 |         <Modal.Header />
157 |         <Modal.Body>
158 |           <div className="text-center">
159 |             <HiOutlineExclamationCircle className="h-14 w-14 text-gray-400 dark:text-gray-200 mb-4 mx-auto" />
160 |             <h1 className="mb-5 text-lg text-gray-500 dark:text-gray-400">
161 |               Are You Sure. You want to delete this Post ?
162 |             </h1>
163 |             <div className="flex justify-center gap-4">
164 |               <Button color={"failure"} onClick={handleDeletePost}>
165 |                 Yes I am Sure
166 |               </Button>
167 |               <Button color={"gray"} onClick={() => setShowModal(false)}>
168 |                 No, Cancel
169 |               </Button>
170 |             </div>
171 |           </div>
172 |         </Modal.Body>
173 |       </Modal>
174 |     </div>
175 |   );
176 | }
177 | 


--------------------------------------------------------------------------------
/frontend/src/pages/UpdatePost.jsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect, useCallback, useMemo } from "react";
  2 | import {
  3 |   Alert,
  4 |   Button,
  5 |   FileInput,
  6 |   Select,
  7 |   Spinner,
  8 |   TextInput,
  9 | } from "flowbite-react";
 10 | import ReactQuill from "react-quill";
 11 | import "react-quill/dist/quill.snow.css";
 12 | import {
 13 |   getDownloadURL,
 14 |   getStorage,
 15 |   ref,
 16 |   uploadBytesResumable,
 17 | } from "firebase/storage";
 18 | import { app } from "../firebase";
 19 | import { CircularProgressbar } from "react-circular-progressbar";
 20 | import "react-circular-progressbar/dist/styles.css";
 21 | import { useNavigate, useParams } from "react-router-dom";
 22 | import { useSelector } from "react-redux";
 23 | import { debounce } from "lodash";
 24 | 
 25 | export default function UpdatePost() {
 26 |   const [file, setFile] = useState(null);
 27 |   const [imageUploadProgress, setImageUploadProgress] = useState(null);
 28 |   const [imageUploadError, setImageUploadError] = useState(null);
 29 |   const [formData, setFormData] = useState({});
 30 |   const [publishError, setPublishError] = useState(null);
 31 |   const [loading, setLoading] = useState(true); // Add loading state
 32 |   const { postId } = useParams();
 33 |   const navigate = useNavigate();
 34 |   const { currentUser } = useSelector((state) => state.user);
 35 | 
 36 |   useEffect(() => {
 37 |     setPublishError(null);
 38 |     const fetchPost = async () => {
 39 |       try {
 40 |         setLoading(true); // Start loading
 41 |         const res = await fetch(`/api/post/getposts?postId=${postId}`);
 42 |         const data = await res.json();
 43 |         if (!res.ok) {
 44 |           setPublishError(data.message);
 45 |           return;
 46 |         }
 47 |         setFormData(data.posts[0]);
 48 |       } catch (error) {
 49 |         setPublishError(error.message);
 50 |       } finally {
 51 |         setLoading(false); // Stop loading
 52 |       }
 53 |     };
 54 |     fetchPost();
 55 |   }, [postId]);
 56 | 
 57 |   const handleUploadImage = useCallback(async () => {
 58 |     if (!file) {
 59 |       setImageUploadError("Please select an Image file");
 60 |       return;
 61 |     }
 62 | 
 63 |     setImageUploadError(null);
 64 |     const storage = getStorage(app);
 65 |     const fileName = `${new Date().getTime()}-${file.name}`;
 66 |     const storageRef = ref(storage, fileName);
 67 |     const uploadTask = uploadBytesResumable(storageRef, file);
 68 | 
 69 |     uploadTask.on(
 70 |       "state_changed",
 71 |       (snapshot) => {
 72 |         const progress =
 73 |           (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
 74 |         setImageUploadProgress(progress.toFixed(0));
 75 |       },
 76 |       (error) => {
 77 |         setImageUploadError(error.message);
 78 |         setImageUploadProgress(null);
 79 |       },
 80 |       async () => {
 81 |         const downloadURL = await getDownloadURL(uploadTask.snapshot.ref);
 82 |         setImageUploadProgress(null);
 83 |         setImageUploadError(null);
 84 |         setFormData((prevData) => ({ ...prevData, image: downloadURL }));
 85 |       }
 86 |     );
 87 |   }, [file]);
 88 | 
 89 |   const handleSubmit = async (e) => {
 90 |     e.preventDefault();
 91 |     try {
 92 |       const res = await fetch(
 93 |         `/api/post/updatepost/${postId}/${currentUser._id}`,
 94 |         {
 95 |           method: "PUT",
 96 |           headers: {
 97 |             "Content-Type": "application/json",
 98 |           },
 99 |           body: JSON.stringify(formData),
100 |         }
101 |       );
102 |       const data = await res.json();
103 |       if (!res.ok) {
104 |         setPublishError(data.message);
105 |         return;
106 |       }
107 |       navigate(`/post/${data.slug}`);
108 |     } catch (error) {
109 |       setPublishError("Something went wrong, please try again");
110 |     }
111 |   };
112 | 
113 |   const debouncedSetFormData = useMemo(() => debounce(setFormData, 300), []);
114 | 
115 |   const handleInputChange = (field, value) => {
116 |     debouncedSetFormData((prevData) => ({ ...prevData, [field]: value }));
117 |   };
118 | 
119 |   if (loading) {
120 |     return (
121 |       <div className="p-3 max-w-3xl mx-auto min-h-screen flex items-center justify-center">
122 |         <Spinner size="lg" />
123 |       </div>
124 |     );
125 |   }
126 | 
127 |   return (
128 |     <div className="p-3 max-w-3xl mx-auto min-h-screen">
129 |       <h1 className="text-center text-3xl my-7 font-semibold">Update a post</h1>
130 |       <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
131 |         <div className="flex flex-col gap-4 sm:flex-row justify-between">
132 |           <TextInput
133 |             type="text"
134 |             placeholder="Title"
135 |             required
136 |             id="title"
137 |             className="flex-1"
138 |             value={formData.title || ""}
139 |             onChange={(event) => handleInputChange("title", event.target.value)}
140 |           />
141 |           <Select
142 |             value={formData.category || ""}
143 |             onChange={(event) =>
144 |               handleInputChange("category", event.target.value)
145 |             }
146 |           >
147 |             <option value={"uncategorized"}>select a category</option>
148 |             <option value={"javascript"}>javascript</option>
149 |             <option value={"react"}>React.Js</option>
150 |             <option value={"Next"}>Next.Js</option>
151 |           </Select>
152 |         </div>
153 |         <div className="flex gap-4 items-center justify-between border-4 border-teal-500 border-dotted p-3">
154 |           <FileInput
155 |             type="file"
156 |             accept="image/*"
157 |             onChange={(e) => setFile(e.target.files[0])}
158 |           />
159 |           <Button
160 |             type="button"
161 |             gradientDuoTone={"purpleToBlue"}
162 |             size={"sm"}
163 |             outline
164 |             onClick={handleUploadImage}
165 |             disabled={!!imageUploadProgress}
166 |           >
167 |             {imageUploadProgress ? (
168 |               <div className="w-16 h-16">
169 |                 <CircularProgressbar
170 |                   value={imageUploadProgress}
171 |                   text={`${imageUploadProgress || 0} %`}
172 |                 />
173 |               </div>
174 |             ) : (
175 |               "Upload Image"
176 |             )}
177 |           </Button>
178 |         </div>
179 |         {imageUploadError && (
180 |           <Alert color={"failure"}>{imageUploadError}</Alert>
181 |         )}
182 |         {formData.image && (
183 |           <img
184 |             src={formData.image}
185 |             alt="uploaded"
186 |             className="w-full h-72 object-cover"
187 |           />
188 |         )}
189 |         <ReactQuill
190 |           theme="snow"
191 |           placeholder="Write Something"
192 |           className="h-72 mb-12"
193 |           required
194 |           value={formData.content || ""}
195 |           onChange={(value) => handleInputChange("content", value)}
196 |         />
197 |         <Button type="submit" gradientDuoTone={"purpleToPink"}>
198 |           Update Post
199 |         </Button>
200 |         {publishError && (
201 |           <Alert className="mt-5" color={"failure"}>
202 |             {publishError}
203 |           </Alert>
204 |         )}
205 |       </form>
206 |     </div>
207 |   );
208 | }
209 | 


--------------------------------------------------------------------------------
/frontend/src/components/CommentSection.jsx:
--------------------------------------------------------------------------------
  1 | import { Alert, Button, Modal, Textarea } from "flowbite-react";
  2 | import { useEffect, useState } from "react";
  3 | import { useSelector } from "react-redux";
  4 | import { Link, useNavigate } from "react-router-dom";
  5 | import PropTypes from "prop-types";
  6 | import Comment from "./Comment";
  7 | import { HiOutlineExclamationCircle } from "react-icons/hi";
  8 | 
  9 | export default function CommentSection({ postId }) {
 10 |   const { currentUser } = useSelector((state) => state.user);
 11 |   const [comment, setComment] = useState("");
 12 |   const [commentError, setCommentError] = useState(null);
 13 |   const [comments, setComments] = useState([]);
 14 |   const [showModal, setShowModal] = useState(false);
 15 |   const [commentTodelete, setCommentTodelete] = useState(null);
 16 |   const navigate = useNavigate();
 17 |   const handleSubmit = async (e) => {
 18 |     setCommentError(null);
 19 |     e.preventDefault();
 20 |     if (!currentUser) return;
 21 |     if (!comment) return;
 22 |     try {
 23 |       const res = await fetch("/api/comment/create", {
 24 |         method: "POST",
 25 |         headers: {
 26 |           "Content-Type": "application/json",
 27 |         },
 28 |         body: JSON.stringify({
 29 |           comment,
 30 |           postId,
 31 |           userId: currentUser._id,
 32 |         }),
 33 |       });
 34 |       const data = await res.json();
 35 |       if (res.ok) {
 36 |         setComment("");
 37 |         setComments([data.newComment, ...comments]);
 38 |         setCommentError(null);
 39 |       }
 40 |       if (!res.ok) {
 41 |         setCommentError(data);
 42 |       }
 43 |     } catch (error) {
 44 |       setCommentError(error);
 45 |     }
 46 |   };
 47 | 
 48 |   useEffect(() => {
 49 |     const fetchPostComment = async () => {
 50 |       try {
 51 |         const res = await fetch(`/api/comment/getPostComment/${postId}`);
 52 |         const data = await res.json();
 53 |         if (res.ok) {
 54 |           setComments(data);
 55 |         }
 56 |       } catch (error) {
 57 |         console.log(error);
 58 |       }
 59 |     };
 60 |     if (postId) {
 61 |       fetchPostComment();
 62 |     }
 63 |   }, [postId]);
 64 | 
 65 |   const handleLike = async (commentId) => {
 66 |     try {
 67 |       if (!currentUser) {
 68 |         navigate("/sign-in");
 69 |         return;
 70 |       }
 71 |       const res = await fetch(`/api/comment/likeComment/${commentId}`, {
 72 |         method: "PUT",
 73 |         headers: {
 74 |           "Content-Type": "application/json",
 75 |         },
 76 |       });
 77 |       if (res.ok) {
 78 |         const data = await res.json();
 79 |         setComments(
 80 |           comments.map((comment) =>
 81 |             comment._id === commentId
 82 |               ? {
 83 |                   ...comment,
 84 |                   likes: data.likes,
 85 |                   numberofLikes: data.likes.length,
 86 |                 }
 87 |               : comment
 88 |           )
 89 |         );
 90 |       } else {
 91 |         console.error("Failed to like comment:", res.status, res.statusText);
 92 |       }
 93 |     } catch (error) {
 94 |       console.error("Error liking comment:", error);
 95 |     }
 96 |   };
 97 | 
 98 |   const handleEdit = async (comment, editedContent) => {
 99 |     setComments(
100 |       comments.map((c) =>
101 |         c._id === comment._id ? { ...c, content: editedContent } : c
102 |       )
103 |     );
104 |   };
105 | 
106 |   const handleDelete = async (commentId) => {
107 |     setShowModal(false);
108 |     try {
109 |       if (!currentUser) {
110 |         navigate("/sign-in");
111 |         return;
112 |       }
113 |       const res = await fetch(`/api/comment/deleteComment/${commentId}`, {
114 |         method: "DELETE",
115 |       });
116 |       if (res.ok) {
117 |         setComments(comments.filter((comment) => comment._id !== commentId));
118 |       }
119 |     } catch (error) {
120 |       console.log(error);
121 |     }
122 |   };
123 |   return (
124 |     <div className="max-w-2xl mx-auto w-full p-3">
125 |       {currentUser ? (
126 |         <div className="flex items-center gap-1 my-5 text-gray-500 text-sm">
127 |           <p>Signed in as :</p>
128 |           <img
129 |             className="h-5 w-5 object-cover rounded-full"
130 |             src={currentUser.profilePicture}
131 |             alt=""
132 |           />
133 |           <Link
134 |             to={"/dashboard?tab=profile"}
135 |             className="text-xs text-cyan-600 hover:underline"
136 |           >
137 |             @ {currentUser.username}
138 |           </Link>
139 |         </div>
140 |       ) : (
141 |         <div className="text-sm text-teal-500 my-5 flex gap-1">
142 |           You must be signed in to comment.
143 |           <Link className="text-blue-500 hover:underline" to={"/sign-in"}>
144 |             Sign In
145 |           </Link>
146 |         </div>
147 |       )}
148 |       {currentUser && (
149 |         <>
150 |           <form
151 |             className="border border-teal-500 rounded-md p-3"
152 |             onSubmit={handleSubmit}
153 |           >
154 |             <Textarea
155 |               placeholder="Add a comment"
156 |               rows="3"
157 |               maxLength={200}
158 |               value={comment}
159 |               onChange={(e) => setComment(e.target.value)}
160 |             />
161 |             <div className="flex justify-between items-center mt-5">
162 |               <p className="text-gray-500 text-xs">
163 |                 {200 - comment.length} characters remaining
164 |               </p>
165 |               <Button outline gradientDuoTone={"purpleToBlue"} type="submit">
166 |                 Submit
167 |               </Button>
168 |             </div>
169 |             {commentError && (
170 |               <Alert color={"failure"} className="mt-5">
171 |                 {commentError.message}
172 |               </Alert>
173 |             )}
174 |           </form>
175 |         </>
176 |       )}
177 |       {comments.length === 0 ? (
178 |         <p className="text-gray-500 text-sm my-5">No commments yet !</p>
179 |       ) : (
180 |         <>
181 |           <div className=" text-sm my-5 flex items-center gap-1">
182 |             <p>Comments</p>
183 |             <div className="border border-gray-500 py-1 px-2 rounded-sm">
184 |               <p>{comments.length}</p>
185 |             </div>
186 |           </div>
187 |           {comments &&
188 |             comments.map((comment) => {
189 |               return (
190 |                 <Comment
191 |                   comment={comment}
192 |                   key={comment._id}
193 |                   onLike={handleLike}
194 |                   onEdit={handleEdit}
195 |                   onDelte={(commentId) => {
196 |                     setShowModal(true);
197 |                     setCommentTodelete(commentId);
198 |                   }}
199 |                 />
200 |               );
201 |             })}
202 |         </>
203 |       )}
204 |       <Modal
205 |         show={showModal}
206 |         onClose={() => setShowModal(false)}
207 |         popup
208 |         size={"md"}
209 |       >
210 |         <Modal.Header />
211 |         <Modal.Body>
212 |           <div className="text-center">
213 |             <HiOutlineExclamationCircle className="h-14 w-14 text-gray-400 dark:text-gray-200 mb-4 mx-auto" />
214 |             <h1 className="mb-5 text-lg text-gray-500 dark:text-gray-400">
215 |               Are You Sure. You want to delete this Comment ?
216 |             </h1>
217 |             <div className="flex justify-center gap-4">
218 |               <Button
219 |                 color={"failure"}
220 |                 onClick={() => handleDelete(commentTodelete)}
221 |               >
222 |                 Yes I am Sure
223 |               </Button>
224 |               <Button color={"gray"} onClick={() => setShowModal(false)}>
225 |                 No, Cancel
226 |               </Button>
227 |             </div>
228 |           </div>
229 |         </Modal.Body>
230 |       </Modal>
231 |     </div>
232 |   );
233 | }
234 | 
235 | CommentSection.propTypes = {
236 |   postId: PropTypes.string.isRequired,
237 | };
238 | 


--------------------------------------------------------------------------------
/frontend/src/components/DashboardComp.jsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState } from "react";
  2 | import { useSelector } from "react-redux";
  3 | import {
  4 |   HiAnnotation,
  5 |   HiArrowNarrowUp,
  6 |   HiDocumentText,
  7 |   HiOutlineUserGroup,
  8 | } from "react-icons/hi";
  9 | import { Button, Table } from "flowbite-react";
 10 | import { Link } from "react-router-dom";
 11 | 
 12 | export default function DashboardComp() {
 13 |   const [users, setUsers] = useState([]);
 14 |   const [comments, setComments] = useState([]);
 15 |   const [posts, setPosts] = useState([]);
 16 |   const [totalUsers, setTotalUsers] = useState(0);
 17 |   const [totalPosts, setTotalPosts] = useState(0);
 18 |   const [totalComments, setTotalComments] = useState(0);
 19 |   const [lastMonthUsers, setLastMonthUsers] = useState(0);
 20 |   const [lastMonthPosts, setLastMonthPosts] = useState(0);
 21 |   const [lastMonthComments, setLastMonthComments] = useState(0);
 22 |   const { currentUser } = useSelector((state) => state.user);
 23 |   useEffect(() => {
 24 |     const fetchUsers = async () => {
 25 |       try {
 26 |         const res = await fetch("/api/user/getusers?limit=5");
 27 |         const data = await res.json();
 28 |         if (res.ok) {
 29 |           setUsers(data.users);
 30 |           setTotalUsers(data.totalUsers);
 31 |           setLastMonthUsers(data.lastMonthUsers);
 32 |         }
 33 |       } catch (error) {
 34 |         console.log(error.message);
 35 |       }
 36 |     };
 37 |     const fetchPosts = async () => {
 38 |       try {
 39 |         const res = await fetch("/api/post/getposts?limit=5");
 40 |         const data = await res.json();
 41 |         if (res.ok) {
 42 |           setPosts(data.posts);
 43 |           setTotalPosts(data.totalPosts);
 44 |           setLastMonthPosts(data.lastMonthPosts);
 45 |         }
 46 |       } catch (error) {
 47 |         console.log(error.message);
 48 |       }
 49 |     };
 50 |     const fetchComments = async () => {
 51 |       try {
 52 |         const res = await fetch("/api/comment/getcomments?limit=5");
 53 |         const data = await res.json();
 54 |         if (res.ok) {
 55 |           setComments(data.comments);
 56 |           setTotalComments(data.totalComments);
 57 |           setLastMonthComments(data.lastMonthComments);
 58 |         }
 59 |       } catch (error) {
 60 |         console.log(error.message);
 61 |       }
 62 |     };
 63 |     if (currentUser.isAdmin) {
 64 |       fetchUsers();
 65 |       fetchPosts();
 66 |       fetchComments();
 67 |     }
 68 |   }, [currentUser]);
 69 |   return (
 70 |     <div className="p-3 md:mx-auto">
 71 |       <div className="flex-wrap flex gap-4 justify-center">
 72 |         <div className="flex flex-col p-3 dark:bg-slate-800 gap-4 md:w-72 w-full rounded-md shadow-md">
 73 |           <div className="flex justify-between">
 74 |             <div className="">
 75 |               <h3 className="text-gray-500 text-md uppercase">Total Users</h3>
 76 |               <p className="text-2xl">{totalUsers}</p>
 77 |             </div>
 78 |             <HiOutlineUserGroup className="bg-teal-600  text-white rounded-full text-5xl p-3 shadow-lg" />
 79 |           </div>
 80 |           <div className="flex  gap-2 text-sm">
 81 |             <span className="text-green-500 flex items-center">
 82 |               <HiArrowNarrowUp />
 83 |               {lastMonthUsers}
 84 |             </span>
 85 |             <div className="text-gray-500">Last month</div>
 86 |           </div>
 87 |         </div>
 88 |         <div className="flex flex-col p-3 dark:bg-slate-800 gap-4 md:w-72 w-full rounded-md shadow-md">
 89 |           <div className="flex justify-between">
 90 |             <div className="">
 91 |               <h3 className="text-gray-500 text-md uppercase">
 92 |                 Total Comments
 93 |               </h3>
 94 |               <p className="text-2xl">{totalComments}</p>
 95 |             </div>
 96 |             <HiAnnotation className="bg-indigo-600  text-white rounded-full text-5xl p-3 shadow-lg" />
 97 |           </div>
 98 |           <div className="flex  gap-2 text-sm">
 99 |             <span className="text-green-500 flex items-center">
100 |               <HiArrowNarrowUp />
101 |               {lastMonthComments}
102 |             </span>
103 |             <div className="text-gray-500">Last month</div>
104 |           </div>
105 |         </div>
106 |         <div className="flex flex-col p-3 dark:bg-slate-800 gap-4 md:w-72 w-full rounded-md shadow-md">
107 |           <div className="flex justify-between">
108 |             <div className="">
109 |               <h3 className="text-gray-500 text-md uppercase">Total Posts</h3>
110 |               <p className="text-2xl">{totalPosts}</p>
111 |             </div>
112 |             <HiDocumentText className="bg-lime-600  text-white rounded-full text-5xl p-3 shadow-lg" />
113 |           </div>
114 |           <div className="flex  gap-2 text-sm">
115 |             <span className="text-green-500 flex items-center">
116 |               <HiArrowNarrowUp />
117 |               {lastMonthPosts}
118 |             </span>
119 |             <div className="text-gray-500">Last month</div>
120 |           </div>
121 |         </div>
122 |       </div>
123 |       <div className="flex flex-wrap gap-4 py-3 mx-auto justify-center">
124 |         <div className="flex flex-col w-full md:w-auto shadow-md p-2 rounded-md dark:bg-gray-800">
125 |           <div className="flex justify-between  p-3 text-sm font-semibold">
126 |             <h1 className="text-center p-2">Recent users</h1>
127 |             <Button outline gradientDuoTone="purpleToPink">
128 |               <Link to={"/dashboard?tab=users"}>See all</Link>
129 |             </Button>
130 |           </div>
131 |           <Table hoverable>
132 |             <Table.Head>
133 |               <Table.HeadCell>User image</Table.HeadCell>
134 |               <Table.HeadCell>Username</Table.HeadCell>
135 |             </Table.Head>
136 |             {users &&
137 |               users.map((user) => (
138 |                 <Table.Body key={user._id} className="divide-y">
139 |                   <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
140 |                     <Table.Cell>
141 |                       <img
142 |                         src={user.profilePicture}
143 |                         alt="user"
144 |                         className="w-10 h-10 rounded-full bg-gray-500"
145 |                       />
146 |                     </Table.Cell>
147 |                     <Table.Cell>{user.username}</Table.Cell>
148 |                   </Table.Row>
149 |                 </Table.Body>
150 |               ))}
151 |           </Table>
152 |         </div>
153 |         <div className="flex flex-col w-full md:w-auto shadow-md p-2 rounded-md dark:bg-gray-800">
154 |           <div className="flex justify-between  p-3 text-sm font-semibold">
155 |             <h1 className="text-center p-2">Recent comments</h1>
156 |             <Button outline gradientDuoTone="purpleToPink">
157 |               <Link to={"/dashboard?tab=comments"}>See all</Link>
158 |             </Button>
159 |           </div>
160 |           <Table hoverable>
161 |             <Table.Head>
162 |               <Table.HeadCell>Comment content</Table.HeadCell>
163 |               <Table.HeadCell>Likes</Table.HeadCell>
164 |             </Table.Head>
165 |             {comments &&
166 |               comments.map((comment) => (
167 |                 <Table.Body key={comment._id} className="divide-y">
168 |                   <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
169 |                     <Table.Cell className="w-96">
170 |                       <p className="line-clamp-2">{comment.content}</p>
171 |                     </Table.Cell>
172 |                     <Table.Cell>{comment.numberOfLikes}</Table.Cell>
173 |                   </Table.Row>
174 |                 </Table.Body>
175 |               ))}
176 |           </Table>
177 |         </div>
178 |         <div className="flex flex-col w-full md:w-auto shadow-md p-2 rounded-md dark:bg-gray-800">
179 |           <div className="flex justify-between  p-3 text-sm font-semibold">
180 |             <h1 className="text-center p-2">Recent posts</h1>
181 |             <Button outline gradientDuoTone="purpleToPink">
182 |               <Link to={"/dashboard?tab=posts"}>See all</Link>
183 |             </Button>
184 |           </div>
185 |           <div className="overflow-x-auto">
186 |             <Table hoverable>
187 |               <Table.Head>
188 |                 <Table.HeadCell>Post image</Table.HeadCell>
189 |                 <Table.HeadCell>Post Title</Table.HeadCell>
190 |                 <Table.HeadCell>Category</Table.HeadCell>
191 |               </Table.Head>
192 |               {posts &&
193 |                 posts.map((post) => (
194 |                   <Table.Body key={post._id} className="divide-y">
195 |                     <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
196 |                       <Table.Cell>
197 |                         <img
198 |                           src={post.image}
199 |                           alt="user"
200 |                           className="w-14 h-10 rounded-md bg-gray-500"
201 |                         />
202 |                       </Table.Cell>
203 |                       <Table.Cell className="w-96">{post.title}</Table.Cell>
204 |                       <Table.Cell className="w-5">{post.category}</Table.Cell>
205 |                     </Table.Row>
206 |                   </Table.Body>
207 |                 ))}
208 |             </Table>
209 |           </div>
210 |         </div>
211 |       </div>
212 |     </div>
213 |   );
214 | }
215 | 


--------------------------------------------------------------------------------
/frontend/src/components/DashProfile.jsx:
--------------------------------------------------------------------------------
  1 | import { useSelector } from "react-redux";
  2 | import { Alert, Button, Modal, TextInput } from "flowbite-react";
  3 | import { useEffect, useRef, useState } from "react";
  4 | import { CircularProgressbar } from "react-circular-progressbar";
  5 | import "react-circular-progressbar/dist/styles.css";
  6 | import { app } from "../firebase";
  7 | import {
  8 |   getStorage,
  9 |   getDownloadURL,
 10 |   ref,
 11 |   uploadBytesResumable,
 12 | } from "firebase/storage";
 13 | import {
 14 |   UpdateStart,
 15 |   UpdateSucess,
 16 |   UpdateFailure,
 17 |   deleteUserStart,
 18 |   deleteUserSucess,
 19 |   deleteUserFailure,
 20 |   SignOutSucess,
 21 | } from "../redux/reducers/user/userSlice";
 22 | import { useDispatch } from "react-redux";
 23 | import { HiOutlineExclamationCircle } from "react-icons/hi";
 24 | import { Link } from "react-router-dom";
 25 | 
 26 | export default function DashProfile() {
 27 |   const { currentUser, error, loading } = useSelector((state) => state.user);
 28 |   const [imageFile, setImageFile] = useState(null);
 29 |   const [imageFileUrl, setimageFileUrl] = useState(null);
 30 |   const [imageFileUploadingProgress, setImageFileUploadingProgress] =
 31 |     useState(null);
 32 |   const [imageFileUploadError, setImageFileUploadError] = useState(null);
 33 |   const [imageFileUploading, setImageFileUploading] = useState(false);
 34 |   const [UpdateUserSuccess, setUpdateUserSuccess] = useState(null);
 35 |   const [updateUserError, setUpdateUserError] = useState(null);
 36 |   const [showModel, setShowModel] = useState(false);
 37 |   const [formData, setFormData] = useState({});
 38 |   const filePickerRef = useRef();
 39 |   const dispatch = useDispatch();
 40 |   const handleImageChange = (e) => {
 41 |     const file = e.target.files[0];
 42 |     if (file) {
 43 |       setImageFile(e.target.files[0]);
 44 |       setimageFileUrl(URL.createObjectURL(file));
 45 |     }
 46 |   };
 47 |   useEffect(() => {
 48 |     if (imageFile) {
 49 |       uploadImage();
 50 |     }
 51 |     // eslint-disable-next-line react-hooks/exhaustive-deps
 52 |   }, [imageFile]);
 53 |   const uploadImage = async () => {
 54 |     // service firebase.storage {
 55 |     //   match /b/{bucket}/o {
 56 |     //     match /{allPaths=**} {
 57 |     //       allow read;
 58 |     //       allow write : if
 59 |     //       request.resource.size <2 * 1024 * 1024 &&
 60 |     //       request.resource.contentType.matches('image/.*')
 61 |     //     }
 62 |     //   }
 63 |     // }
 64 |     setImageFileUploading(true);
 65 |     setImageFileUploadError(null);
 66 |     const storage = getStorage(app);
 67 |     const fileName = `${currentUser.username}_${new Date().getDate()}_${
 68 |       imageFile.name
 69 |     }`;
 70 |     const storageRef = ref(storage, fileName);
 71 |     const uploadTask = uploadBytesResumable(storageRef, imageFile);
 72 |     uploadTask.on(
 73 |       "state_changed",
 74 |       (snapShort) => {
 75 |         const progress =
 76 |           (snapShort.bytesTransferred / snapShort.totalBytes) * 100;
 77 |         setImageFileUploadingProgress(progress.toFixed(0));
 78 |       },
 79 |       (error) => {
 80 |         setImageFileUploadError(
 81 |           "could not upload image : (File must be less than 2Mb) ",
 82 |           error
 83 |         );
 84 |         setImageFileUploadingProgress(null);
 85 |         setImageFile(null);
 86 |         setimageFileUrl(null);
 87 |         setImageFileUploading(false);
 88 |       },
 89 |       () => {
 90 |         getDownloadURL(uploadTask.snapshot.ref).then((downloadUrl) => {
 91 |           setimageFileUrl(downloadUrl);
 92 |           setFormData({ ...formData, profilePicture: downloadUrl });
 93 |           setImageFileUploading(false);
 94 |         });
 95 |       }
 96 |     );
 97 |   };
 98 |   const handleChange = (event) => {
 99 |     setFormData({ ...formData, [event.target.id]: event.target.value });
100 |   };
101 |   const handleSubmit = async (event) => {
102 |     event.preventDefault();
103 |     setUpdateUserError(null);
104 |     setUpdateUserSuccess(null);
105 |     if (Object.keys(formData).length === 0) {
106 |       setUpdateUserError("No changes Made");
107 |       return;
108 |     }
109 |     if (imageFileUploading) {
110 |       return;
111 |     }
112 |     try {
113 |       dispatch(UpdateStart());
114 |       const res = await fetch(`/api/user/update/${currentUser._id}`, {
115 |         method: "PUT",
116 |         headers: {
117 |           "Content-Type": "application/json",
118 |         },
119 |         body: JSON.stringify(formData),
120 |       });
121 |       const data = await res.json();
122 |       if (!res.ok) {
123 |         dispatch(UpdateFailure(data.message));
124 |         setUpdateUserError(data.message);
125 |       }
126 |       dispatch(UpdateSucess(data));
127 |       setUpdateUserSuccess("User Profile Updated SuccessFully");
128 |     } catch (error) {
129 |       setUpdateUserError(error.message);
130 |       dispatch(UpdateFailure(error.message));
131 |     }
132 |   };
133 |   const handleDeleteUser = async () => {
134 |     setShowModel(false);
135 |     try {
136 |       dispatch(deleteUserStart());
137 |       const res = await fetch(`/api/user/delete/${currentUser._id}`, {
138 |         method: "DELETE",
139 |       });
140 |       const data = await res.json();
141 |       if (!res.ok) {
142 |         dispatch(deleteUserFailure(data.message));
143 |       } else {
144 |         dispatch(deleteUserSucess());
145 |       }
146 |     } catch (error) {
147 |       dispatch(deleteUserFailure(error.message));
148 |     }
149 |   };
150 |   const handleSignOut = async () => {
151 |     try {
152 |       const res = await fetch("/api/user/signout", {
153 |         method: "POST",
154 |       });
155 |       const data = await res.json();
156 |       if (!res.ok) {
157 |         console.log(data.message);
158 |       } else {
159 |         dispatch(SignOutSucess());
160 |       }
161 |     } catch (error) {
162 |       console.log(error.message);
163 |     }
164 |   };
165 |   return (
166 |     <div className="max-w-lg mx-auto p-3 w-full">
167 |       <h1 className="my-7 text-center font-semibold text-3xl">Profile</h1>
168 |       <form onSubmit={handleSubmit} className="flex flex-col gap-4">
169 |         <input
170 |           type="file"
171 |           accept="imgage/*"
172 |           onChange={handleImageChange}
173 |           ref={filePickerRef}
174 |           className="hidden"
175 |         />
176 |         <div
177 |           className="relative w-32 h-32 self-center cursor-pointer shadow-md overflow-hidden rounded-full"
178 |           onClick={() => filePickerRef.current.click()}
179 |         >
180 |           {imageFileUploadingProgress && (
181 |             <CircularProgressbar
182 |               value={imageFileUploadingProgress || 0}
183 |               text={`${imageFileUploadingProgress}%`}
184 |               strokeWidth={5}
185 |               styles={{
186 |                 root: {
187 |                   width: "100%",
188 |                   height: "100%",
189 |                   position: "absolute",
190 |                   top: 0,
191 |                   left: 0,
192 |                 },
193 |                 path: {
194 |                   stroke: `rgba(62,152, 199,${
195 |                     imageFileUploadingProgress / 100
196 |                   })`,
197 |                 },
198 |               }}
199 |             />
200 |           )}
201 |           <img
202 |             src={imageFileUrl || currentUser.profilePicture}
203 |             alt="UserProfile"
204 |             className={`rounded-full w-full h-full border-8 border-[lightgray] object-cover ${
205 |               imageFileUploadingProgress &&
206 |               imageFileUploadingProgress < 100 &&
207 |               "opacity-60"
208 |             }`}
209 |           />
210 |         </div>
211 |         {imageFileUploadError && (
212 |           <Alert color={"failure"}>{imageFileUploadError}</Alert>
213 |         )}
214 |         <TextInput
215 |           type="text"
216 |           id="username"
217 |           placeholder="username"
218 |           defaultValue={currentUser.username}
219 |           onChange={handleChange}
220 |         />
221 |         <TextInput
222 |           type="text"
223 |           id="email"
224 |           placeholder="abc@gmail.com"
225 |           defaultValue={currentUser.email}
226 |           onChange={handleChange}
227 |         />
228 |         <TextInput
229 |           type="password"
230 |           id="password"
231 |           placeholder="password"
232 |           autoComplete="true"
233 |           onChange={handleChange}
234 |         />
235 |         <Button
236 |           type="submit"
237 |           gradientDuoTone={"purpleToBlue"}
238 |           outline
239 |           disabled={loading || imageFileUploading}
240 |         >
241 |           {loading ? "Loading..." : "Update"}
242 |         </Button>
243 |         {currentUser.isAdmin && (
244 |           <Link to={"/create-post"}>
245 |             <Button
246 |               type="button"
247 |               gradientDuoTone={"purpleToBlue"}
248 |               className="w-full "
249 |             >
250 |               Create Post
251 |             </Button>
252 |           </Link>
253 |         )}
254 |       </form>
255 |       <div className="text-red-500 flex justify-between mt-5">
256 |         <span onClick={() => setShowModel(true)} className="cursor-pointer">
257 |           Delete Account
258 |         </span>
259 |         <span onClick={handleSignOut} className="cursor-pointer">
260 |           Sign Out
261 |         </span>
262 |       </div>
263 |       {UpdateUserSuccess && (
264 |         <Alert color={"success"} className="mt-5">
265 |           {UpdateUserSuccess}
266 |         </Alert>
267 |       )}
268 |       {updateUserError && (
269 |         <Alert color={"failure"} className="mt-5">
270 |           {updateUserError}
271 |         </Alert>
272 |       )}
273 |       {error && (
274 |         <Alert color={"failure"} className="mt-5">
275 |           {error}
276 |         </Alert>
277 |       )}
278 |       <Modal
279 |         show={showModel}
280 |         onClose={() => setShowModel(false)}
281 |         popup
282 |         size={"md"}
283 |       >
284 |         <Modal.Header />
285 |         <Modal.Body>
286 |           <div className="text-center">
287 |             <HiOutlineExclamationCircle className="h-14 w-14 text-gray-400 dark:text-gray-200 mb-4 mx-auto" />
288 |             <h1 className="mb-5 text-lg text-gray-500 dark:text-gray-400">
289 |               Are You Sure. You want to delete Your Account{" "}
290 |             </h1>
291 |             <div className="flex justify-center gap-4">
292 |               <Button color={"failure"} onClick={handleDeleteUser}>
293 |                 Yes I am Sure
294 |               </Button>
295 |               <Button color={"gray"} onClick={() => setShowModel(false)}>
296 |                 No, Cancel
297 |               </Button>
298 |             </div>
299 |           </div>
300 |         </Modal.Body>
301 |       </Modal>
302 |     </div>
303 |   );
304 | }
305 | 


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