Mohit Code

  1. Install Redux Toolkit and React-Redux: npm install @reduxjs/toolkit react-redux 2. Create a Redux Store: import { configureStore } from "@reduxjs/toolkit" ; import counterReducer from "./slices/counterSlice" ; // Import your slice export const store = configureStore ({   reducer : {     counter : counterReducer , // Add your reducers here   }, }); export default store ; 3. Create a Slice:  import { createSlice } from "@reduxjs/toolkit" ; const initialState = {   count : 0 , }; const counterSlice = createSlice ({   name : "counter" ,   initialState ,   reducers : {     increment : ( state ) => {       state . count += 1 ;     },     decrement : ( state ) => {       state . count -= 1 ;     },     incrementByAmount : ( state , action ) => {       state . count += action . payload ;  ...

server.js import express from "express" ; import mongoose from "mongoose" ; import bodyParser from "body-parser" ; import dotenv from 'dotenv' ; import router from "./routes/index.js" ; import cors from "cors" ; dotenv . config (); const app = express (); app . use ( cors ({     origin : '*' , })) app . use ( bodyParser . json ()); app . use ( express . static ( 'public' )); app . use ( '/media' , express . static ( 'media' )); mongoose . connect ( process . env . MONGO_URI , {     useNewUrlParser : true ,     useUnifiedTopology : true , }). then (() => {     console . log ( 'Connected to MongoDB' ); }). catch (( error ) => {     console . error ( 'MongoDB connection error:' , error ); }); app . use ( '/api' , router ); app . get ( '/' , ( req , res ) => {     res . send ( 'Hello, API!' ); }); const PORT = process . env . ...

index.html <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "style.css" >     < title >Document</ title > </ head > < body >     < div class = "ellipsis" >         < p class = "card-text" >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure, illum? Accusantium,             consequatur earum voluptatum doloremque necessitatibus odio, cupiditate aspernatur excepturi placeat rem             deleniti debitis, sed similique fugit. Ipsa, soluta dolore!</ p >     </ div > </ body > </ html > style.css .ellipsis p {     display: -webkit-box;     -webkit-box-orient : vertical ;...

 Register.jsx import React , { useState } from 'react' ; import { Link , useNavigate } from 'react-router-dom' ; export default function Register () {   const [ user , setUser ] = useState ({     name : "" ,     email : "" ,     password : ""   });   const navigate = useNavigate ();   const handleSubmit = ( e ) => {     e . preventDefault ();     const formData = {       name : user . name ,       email : user . email ,       password : user . password     };     localStorage . setItem ( "userData" , JSON . stringify ( formData ));     navigate ( "/login" );   }   return (     <>       < section className = 'container w-25' >         < div className = "card my-5" >           < div className = "card-header" > ...

import React, { useEffect, useState } from 'react' ; import Loader from "../../components/Loader" ; import { Link } from 'react-router-dom' ; export default function UserList () {     const [data, setData] = useState ([]);     const [search, setSearch] = useState ( "" );     const [filterData, setFilterData] = useState ([]);     useEffect (() => {         getData ();     }, []);     const getData = async () => {         try {             const response = await fetch ( "https://jsonplaceholder.typicode.com/users" );             const userData = await response. json ();             setData (userData);             setFilterData (userData);         } catch (error) {             console. log ...

  import React, { useState, useEffect } from 'react' ; const WindowWidthTracker = () => {   const [windowWidth, setWindowWidth] = useState (window.innerWidth);   useEffect (() => {     const handleResize = () => {       setWindowWidth (window.innerWidth);     };     window. addEventListener ( 'resize' , handleResize);     return () => {       window. removeEventListener ( 'resize' , handleResize);     };   }, []);   return (     < div >       < h1 >Current Window Width: {windowWidth}px</ h1 >     </ div >   ); }; export default WindowWidthTracker;

  import React, { useState } from 'react' ; function TodoList () {   const [tasks, setTasks] = useState ([]);   const [input, setInput] = useState ( '' );   const handleInputChange = ( event ) => {     setInput (event.target.value);   };   const addTask = () => {     console. log (input. trim ())     if (input. trim () !== '' ) {       setTasks ([ ... tasks, input]);       setInput ( '' );     }   };   const removeTask = ( index ) => {     const newTasks = tasks. filter (( _ , taskIndex ) => taskIndex !== index);     setTasks (newTasks);   };   return (     < div className = "text-container container" >       < h2 className = 'text-center my-5' >Todo List</ h2 >       < input         type = "text"         value...

Next.js Installation: npx create-next-app@latest your-app-name  <--- Backend Code Start Here ---> You Can Define environment variables:   Create a .env file in next.js project: And define environment variables as per your requirement: MONGO_URI = "your mongodb connection string" SECRET_ TOKEN = "your secret token" //must be in capital DOMAIN = "http://localhost:3000/" Connect Next.js to MongoDB: Install Mongoose npm i mongoose    In scr folder create a new folder dbConfig In dbConfig folder create a new file dbConfig.ts In dbConfig.ts file: import mongoose, { connection } from "mongoose" ; export async function connect () {     try {         mongoose. connect (process.env.MONGO_URI ! );         connection. on ( "connected" , () => {             console. log ( "Database Connected." );         });         connection. on (...