TROOP

WE USE MATERIAL UI FOR DESIGNING THE PAGE.WE GIVE THE PAGE A BACKGROUND IMAGE FOR THE BACKGROUND WE USED A MP4 LIVE WALLPAPER TRIED A NEW ONE.(DOWNLOADED FROM THE INTERNET ( live )) WE USE VARIOUS COMPONENTS OF MATERIAL UI FOR THIS PAGE. FOR THE BUTTONS, WE USE BUTTON GROUP IN SUCH  A WAY THAT THE UI CHANGES WHEN CLICKED ON THE BUTTONS. TEXT FIELD IS USED FOR THE INPUTS AND WE USED A PASSWORD ICON THAT DISPLAYS THE REAL INPUT WHEN CLICKED ON IT (EYE ICON). WE USE REACT HOOK USESTATE TO CHANGE THE SIGNIN AND SIGNUP UI WHEN CLICKED ON THE BUTTONS. AUTH.JSX import React , { useState } from "react" ; import Box from "@mui/material/Box" ; import IconButton from "@mui/material/IconButton" ; import Button from "@mui/material/Button" ; import ButtonGroup from "@mui/material/ButtonGroup" ; import InputAdornment from "@mui/material/InputAdornment" ; import TextField from "@mui/material/TextField" ; import...

 CREATED A NAV BAR AND LANDING PAGE'S CONTENT. LANDINGPAGE.JSX import React from "react" ; import "../App.css" ; import { Link } from "react-router-dom" ; export default function LandingPage () {   return (     <>       < div className = "landingContainer" >         < nav >           < div className = "navHeader" >             < h2 > Logo and title </ h2 >           </ div >           < div className = "navLinks" >             < a > Register </ a >             < a > Login </ a >           </ div >         </ nav >         < div className = "menu" >           < div >   ...

 WE WILL START WITH CREATING A VITE PROJECT, WITH THE PROJECT NAME FRONTEND.,BY THE COMMAND : npm create vite@latest INSIDE WHICH, WE HAVE A SRC FOLDER. IN WHICH WE WILL CREATE SEVERAL OTHER FOLDERS LIKE CONTEXT, PAGES,UTILS. WE WILL INSTALL REACT-ROUTER-DOM BY THE COMMAND npm i react-router-dom WE WILL BEGIN WITH CREATING THE LANDING PAGE.

 HERE, WE USE SOCKET.IO FOR OUR LIVE INTERACTION (CHATS) . WE CREATE THREE PROPERTIES NAMELY, MESSAGES, CONNECTIONS,TIMEONLINE. THESE THREE ARE USED TO STORE DATA. MESSAGES TO STORE THE MESSAGES SENT BY THE USERS, CONNECTIONS TO STORE THE NUMBER OF CONNECTIONS (SOCKETS) AND TIME ONLINE DENOTES THE TIME SPENT ONLINE BY THE USER. AS WE KNOW FROM THE PREVIOUS POST, IN SOCKET. IO WE USE TWO OF THE IMPORTANT FUNCTIONS SOCKET.ON ( TO RECEIVE) AND SOCKET.EMIT ( TO EMIT). WE CREATE A NEW FILE, IN CONTROLLERS FOLDER CALLED SOCKETCONTROLLER. IN SOCKETCONTROLLER.JS const { Server } = require ( "socket.io" ); let messages = {}; let connections = {}; let timeOnline = {}; module . exports . SocketConnection = ( server ) => {   const io = new Server ( server , {     cors : {       origin : "*" , // TO SOLVE CORS ERROR       methods : [ "GET" , "POST" ],       credentials : true ,   ...

 WE WILL BE USING SOCKET.IO FOR LIVE CHAT.  SOCKET.IO OFFICIAL TUTORIAL WE WILL START WITH  1.  PROJECT INITIALIZATION , const express = require ( "express" ); const { createServer } = require ( "node:http" );   const app = express ();   const server = createServer ( app );   const PORT = process . env . PORT || 3000 ;   server . listen ( PORT , () => {     console . log ( `app listening to ${ PORT } ` );   }); 2. SERVING HTML const express = require ( "express" ); const { createServer } = require ( "node:http" ); const { join } = require ( "node:path" );   const app = express ();   const server = createServer ( app ); CREATES A NEW HTTP SERVER AND TELLS IT TO USE THE EXPRESS APP TO HANDLE INCOMING HTTP REQUESTS.   app . get ( "/" , ( req , res ) => {     res . sendFile ( join ( __dirname , "index.html" ));   }); INDEX.HTML < html > < head ...