Mohit Code

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