Hardware / Software Requirements

Hardware Requirements :-

1. Processor:

o A modern multi-core processor (e.g., Intel i5 or equivalent) is

recommended.

2. RAM:

o Minimum: 8 GB

3. Storage:

o At least 256 GB of free space.

Software Requirements :-

1. Operating System

o Windows 10/11, macOS, or a Linux distribution (e.g., Ubuntu,

Fedora).

2. Node.js

o Node.js (v14.x or higher recommended).

3. MongoDB

o MongoDB Community Edition (v4.x or higher) or use a cloud

service like MongoDB Atlas.

4. Text Editor/IDE

o Visual Studio Code (recommended for its extensive support for

JavaScript, Node.js, and React).
 Introduction

The MERN stack is a popular set of technologies for building modern web
applications, consisting of MongoDB, Express.js, React, and Node.js. Each
component plays a crucial role in the development process, allowing developers
to create dynamic, full-stack applications using a single language—JavaScript.

 MongoDB: A NoSQL database that stores data in a flexible, JSON-like

format, ideal for handling evolving data structures.

 Express.js: A lightweight Node.js framework that simplifies server-side

development by providing essential tools for managing routes, handling
requests, and integrating with databases.

 React: A powerful front-end JavaScript library for building user

interfaces, particularly single-page applications (SPAs), with a focus on
component- based architecture and efficient state management.

 Node.js: A server-side runtime environment that enables JavaScript to be

used for back-end development, known for its scalability and non-
blocking, event-driven.

The MERN stack is valued for its efficiency and the ability to use JavaScript
across both the front-end and back-end, streamlining the development
process. It's widely used for building everything from small projects to
large-scale applications, making it a versatile choice in modern web
development
 List of programs

1. Javascript :-

1. Array

Code-

var ar = [3,4,5,3,8,4,3]

// document.write(ar[4]); for(var i

= 0; i<ar.length; i++){

document.write(ar[i]+" ")

// 3 => 3

// 4 => 2

2. array

functions Code-

let ar = [1,2,3,4,5,6,7,8,9] let

ar2 = [3,40,3,2,4,9]
 3. Array

Code-

var ar = [3,4,5,3,8,4,3]

// document.write(ar[4]); for(var i

= 0; i<ar.length; i++){

document.write(ar[i]+" ")

// 3 => 3

// 4 => 2

4. array

functions Code-

let ar = [1,2,3,4,5,6,7,8,9] let

ar2 = [3,40,3,2,4,9]
let ar3 = []

// ar.pop(); //remove last element from array

// ar.shift();

// ar.unshift(80)

// const nar = ar.slice(4)

// const nar = ar.splice(3,4)

// const nar = ar.splice(4,1)

// const nar = ar.concat(ar2,[44,900])

// console.log(nar);

const getNum=(item)=>{

return item > 20

let index = ar2.findIndex(getNum)

console.log(index);

const arr =[3,6,7,2,4]

5. callback functions
// Passing a function as an argument in other function is called function callback.

const func1 = (callback)=>{

callback()

const func2 = ()=>{

console.log('calling inside otehr function');

let students = [

{name:'krishna',age:12,marks:50},

{name:'amit',age:32,marks:51}

let ar = [6,7]

ar.push(9) // add element last of array

ar.unshift(11)//
// console.log(ar);

const addStudent = (student,callback)=>{

setTimeout(()=>{

students.push(student);

console.log("Student added successfully");

callback();

},2000)

const disStudents =

()=>{ console.log("Updated student

list"); console.log(students);

const st = {name:'aman',age:34,marks:88}

addStudent(st,disStudents)

// disStudents()

6. filter array
let ar = [5,64,7,34,90,34];

function fl(item,index){

// if(item>50){

// return true;

// }else{

// return false;

// }

return item>50

let filterdAr = ar.filter(fl)

console.log(filterdAr);

7. reduce in array

let ar = [4, 5, 17, 6, 3]

// let total = ar.reduce((prev,nxt)=>{

// return prev+nxt

// })
// let total = ar.reduce((prev, nxt) => {

// return prev + nxt

// },10)

// console.log(total);

let m1 = 0;

let m2 = 0;

for (let index = 0; index < ar.length; index++) {

if(ar[index]>m1){

m2 = m1;

m1 = ar[index]

}else if(ar[index]>m2){

m2 = ar[index]

console.log(`max1 is ${m1} and second largest ${m2}`);

8. map function

let ar = [3,4,5,7,2,9];
const mult = (item)=>{ if(item

%2!=0){

return item*2;

}else{

return item;

const newAr1 = ar.map(mult);

console.log(newAr1);

const newAr =

ar.map((item)=>{ return item+10

})

console.log(newAr);

let students = [

{name:'Akash',age:23,marks:34},

{name:'Mohan',age:29,marks:39},

{name:'krishna',age:32,marks:67},
 {name:'Mohit',age:12,marks:76},

{name:'Alok',age:23,marks:30},

students =

students.map((item,index)=>{ if(item.marks

>= 50){

item.result = 'pass'

}else{

item.result = 'fail'

return item;

})

// console.log(students);

students.forEach((item,index)=>{

console.log(item.name);

})

7.todo example

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<input type="text" name="" id="todo">

<button type="button" onclick="btnClick()">Add Todo</button>

<div id="tDiv">

<div class="todo">

<p>Task1</p>

<button>delete</button>

</div>

</div>

<script>

let todos = []
function btnClick() {

let todoValue = document.getElementById('todo').value

todos.push(todoValue)

// console.log(todos);

disTodos();

document.getElementById('todo').value = ''

function disTodos() {

let div = document.getElementById('tDiv');

div.innerHTML = '';

let elemnt = ''

todos.forEach((item,index)=>{

elemnt += `

<div class="todo">

<p>${item}</p>

<button>delete</button>

</div>
 `

})

div.innerHTML = elemnt

</script>

</body>

</html>

2. React :-

1.login/signup example

import React, { useState } from 'react'

import Login from './Login'

import Signup from './Signup'

function Home1() {

const[islogin,setislogin]=useState('true')

const login=()=>{

setislogin=(false)

}
 const signup=()=>{

setislogin=(true)

return (

<>

<nav>

(islogin ?<Login/>:<Signup/>)</nav>

<div>

<button className='login' onClick={()=>login()}></button>

<button className='signup' onClick={()=>signup()}></button>

</div>

</>

export default Home1

2.props

import React, { useState } from 'react'

import Comp2 from './Comp2'

export default function Home() {

const[value,setvalue]=useState('');

return (

<div>

<Comp2 setvalue={setvalue}/>

<h1>your name is:{value}</h1>

</div>

import React, { useState } from 'react'

export default function Comp2(props)

{ const [value, setvalue] = useState('');

const handel= () => {

props.setvalue(value);

return (

<div>
 <input type='text' onChange={(t) => setvalue(t.target.value)} />

<button onClick={() => handel()}>submit</button>

</div>

3.Use State in react

import React,{useState} from 'react'

function Add(){

const[num1,setnum1]=useState('')

const[num2,setnum2]=useState('')

const[result,setresult]=useState('pending.......')

return(

<div>

<input type="text " value={num1}

onChange={(t)=>{setnum1(t.target.value)}}/><br></br>

<input type="text " value={num2}

onChange={(t)=>{setnum2(t.target.value)}}/><br></br>

<button
onClick={()=>setresult(parseInt(num1)+parseInt(num2))}>ADD</button>

<h1>Result: {result}</h1>
 </div>

export default Add

4.Router in react

(app.js)

import Home from './components/Home';

import { BrowserRouter, Route, Routes } from 'react-router-dom';

import Services from './components/Services';

import About from './components/About';

import Contact from './components/Contact';

function App()

{ return (

<div className="App">

<BrowserRouter>

<Routes>

<Route path='/' element={<Home/>}/>

<Route path='/services' element={<Services/>}/>

 <Route path='/about' element={<About/>}/>

<Route path='/contact' element={<Contact/>}/>

</Routes>

</BrowserRouter>

</div>

);

export default

App; (nav.js)

import React from 'react'

import { Link } from 'react-router-dom';

function Nav()

{ return (

<div>

<center>

<nav class="navbar navbar-expand-lg bg-body-tertiary">

<div class="container-fluid">
 <a class="navbar-brand" href="#">Navbar</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse"

data- bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
aria- label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarNav">

<ul class="navbar-nav">

<li class="nav-item">

<Link class="nav-link active" aria-current="page" to={'/'}>Home</Link>

</li>

<li class="nav-item">

<Link class="nav-link" to={'/services'}>Services</Link>

</li>

<li class="nav-item">

<Link class="nav-link" to={'/about'}>Abouts us</Link>

</li>

<li class="nav-item">

<Link class="nav-link " to={'/contact'}>Contact us</Link>

</li>

</ul>
 </div>

</div>

</nav>

</center>

</div>

3. Express :-

1.Todod using

express (server.js)

const express = require('express');

const cors = require('cors');

const { addtodo,getalltask, getTodos,deleteTodo,edittodo} = require('./service');

const app = express();

app.use(cors());

app.use(express.json());

app.post('/task', (req, res) =>

{ const data = req.body;

 const result=addtodo(data)

const updatetask=getalltask()

if(result){

res.json({status:1,msg:"task add",task:updatetask})

else{

res.json({status:0,msg:"task not add",task:updatetask})

});

app.get('/task',(req,res)=>{

const task=getalltask()

res.json(task)

})

app.delete('/task',(req,res)=>{

const data = req.body;

const result=deleteTodo(data)

const updatetask=getalltask()

if(result){

res.json({status:1,msg:"task deleted",task:updatetask})

}
 else{

res.json({status:0,msg:"task not deletd",task:updatetask})

})

app.put('/task', (req, res) =>

{ const data = req.body;

const result = edittodo(data);

const updatetask = getalltask();

if (result) {

res.json({ status: 1, msg: "Task updated", task: updatetask });

} else {

res.json({ status: 0, msg: "Task not updated", task: updatetask });

});

app.listen(8000,()=>{

console.log("chal gya")

})
(services.js)

const fs = require('fs');

const getTodos = () => {

const filedata = fs.readFileSync('data.json');

return JSON.parse(filedata);

};

const addtodo = (data) =>

{ const parsedata =

getTodos();

parsedata.push(data);

fs.writeFileSync('data.json', JSON.stringify(parsedata));

return true;

};

const getalltask=()=>{

const filedata = fs.readFileSync('data.json');

const parsedata=JSON.parse(filedata)

return parsedata

const deleteTodo = (data) => {

 let parsedata = getTodos();

const index = parsedata.findIndex(item => item.data === data.data &&

item.techName === data.techName)

if(index !== -1)

{ parsedata.splice(index,

1);

fs.writeFileSync('data.json', JSON.stringify(parsedata, null, 2));

return true;

}}

const edittodo = (data) =>

{ let parsedata =

getTodos();

const newindex = parsedata.findIndex(item => item.data === data &&

item.techName ===techName);

if (newindex !== -1) {

fs.writeFileSync('data.json', JSON.stringify(parsedata, null, 2));

return true;

};

module.exports={addtodo,getalltask,getTodos,deleteTodo,edittodo}
4. Mongodb :-

1.Different operation and example in mongodb

const {MongoClient}=require('mongodb')

const uri="mongodb://localhost:27017"

const con= new MongoClient(uri)

const getdb=async()=>{

const db=await con.db('test');

console.log("conection hogyaa bhai ab kaam kar")

return db;

const db =getdb();

const signupUser = async (userobje) => {

const collection = (await db).collection('user');

const existphone = await collection.findOne({ phoneno: userobje.phoneno

});

if (existphone)

{ return false;
 } else {

await collection.insertOne(userobje);

return true;

const loginUser=async(obj)=>{

const collection=(await db).collection('user')

const result=await collection.findOne({email:obj.email}) if(result)

if(result.password===obj.password)

return { success: true, name: result.name };

else{

return {success:false};

else{
return {success:false}; }

const fpassword = async (obj) => {

const collection = (await db).collection('user');

const result = await collection.findOne({ email: obj.email });

console.log(result);

if (result){0

const result1= await collection.updateOne(

{ email: obj.email },

{ $set: { password: obj.password } });

console.log(result1);

return true

else{

return false

const contactUser=async(obj)=>{

const collection=(await db).collection('user')

 const result=await collection.insertOne(obj)

console.log(result)

module.exports={signupUser,loginUser,fpassword,contactUser}

5. Nodejs :-

1. Backend for todo example

const http = require('http');

const { addtodo, deleteTodo, edittodo, getTodos } = require('./service');

http.createServer((req, res) =>

{ res.setHeader("Access-Control-Allow-Origin",

"*");

res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT,

DELETE");

res.setHeader("Access-Control-Allow-Headers", "Content-Type");

if (req.method === "OPTIONS") {

res.writeHead(200);

res.end();

return;
}

const bufferData = [];

req.on('data', (chunk) => {

bufferData.push(chunk);

});

req.on('end', () => {

if (bufferData.length > 0) {

const bufferStream = Buffer.concat(bufferData);

const data = JSON.parse(bufferStream.toString());

// console.log(data)

if (req.method === 'POST') {

if (data.data && data.TechName) {

edittodo(data);

res.writeHead(200);

res.end(JSON.stringify());

} else {

addtodo(data);
 res.writeHead(200);

res.end(JSON.stringify());

} else if (req.method === 'DELETE') {

deleteTodo(data);

res.writeHead(200);

res.end(JSON.stringify());

} else if (req.method === 'GET')

{ const todos = getTodos();

res.writeHead(200, { 'Content-Type': 'application/json' });

res.end(JSON.stringify(todos));

} else {

res.writeHead(400);

res.end(JSON.stringify({ message: 'No data received' }));

});

}).listen(8000, () => {

console.log('Server running on port 8000');

});

(service.js)

const fs = require('fs');

const getTodos = () => {

const filedata = fs.readFileSync('data.json');

return JSON.parse(filedata);

};

const addtodo = (data) =>

{ const parsedata =

getTodos();

parsedata.push(data);

fs.writeFileSync('data.json', JSON.stringify(parsedata, null, 2));

return true;

};

const deleteTodo = (data) =>

{ let parsedata = getTodos();

const index = parsedata.findIndex(item => item.data === data.data &&

item.techName === data.techName);
 if (index !== -1)

{ parsedata.splice(index,

1);

fs.writeFileSync('data.json', JSON.stringify(parsedata, null, 2));

return true;

return false;

};

const edittodo = (data) =>

{ let parsedata =

getTodos();

const index = parsedata.findIndex(item => item.data === data.oldData &&

item.techName === data.oldTechName);

if (index !==-1) {

parsedata[index] = { data: data.newData, techName: data.newTechName };

fs.writeFileSync('data.json', JSON.stringify(parsedata, null, 2));

return true;

} else {
 return false;

};

module.exports = { addtodo, deleteTodo, edittodo, getTodos };

 CHAT APP

Project Code

React Code :

1. App.js :-

import Home from "./pages/Home";

import Login from "./pages/Login";

import Register from "./pages/Register";

import "./style.scss";

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

import { useContext } from "react";

import { AuthContext } from "./context/AuthContext";

function App() {

const { currentUser } = useContext(AuthContext);

const ProtectedRoute = ({ children }) => {

if (!currentUser) {

return <Navigate to="/login" />;

}
 return children

};

return (

<BrowserRouter>

<Routes>

<Route path="/">

<Route

index

element={

<ProtectedRoute>

<Home />

</ProtectedRoute>

/>

<Route path="login" element={<Login />} />

<Route path="register" element={<Register />} />

</Route>

</Routes>
 </BrowserRouter>

);

export default App;

2. Home Page :-

 NavBar :-

import React, { useContext } from 'react'

import {signOut} from "firebase/auth"

import { auth } from '../firebase'

import { AuthContext } from '../context/AuthContext

const Navbar = () => {

const {currentUser} = useContext(AuthContext)

return (

<div className='navbar'>

<span className="logo">Lama Chat</span>

<div className="user">

<img src={currentUser.photoURL} alt="" />

<span>{currentUser.displayName}</span>

<button onClick={()=>signOut(auth)}>logout</button>

</div>

</div>

export default Navbar;

 Chats :-

import { doc, onSnapshot } from "firebase/firestore";

import React, { useContext, useEffect, useState } from "react";

import { AuthContext } from "../context/AuthContext";

import { ChatContext } from "../context/ChatContext";

import { db } from "../firebase";

const Chats = () => {

const [chats, setChats] = useState([]);

const { currentUser } = useContext(AuthContext);

const { dispatch } = useContext(ChatContext);

useEffect(() => {

const getChats = () => {

const unsub = onSnapshot(doc(db, "userChats", currentUser.uid), (doc) => {

setChats(doc.data());

});

return () => {

unsub();

};
 };

currentUser.uid && getChats();

}, [currentUser.uid]);

const handleSelect = (u) => {

dispatch({ type: "CHANGE_USER", payload: u });

};

return (

<div className="chats">

{Object.entries(chats)?.sort((a,b)=>b[1].date - a[1].date).map((chat) => (

<div

className="userChat"

key={chat[0]}

onClick={() => handleSelect(chat[1].userInfo)}

>

<img src={chat[1].userInfo.photoURL} alt="" />

<div className="userChatInfo">

<span>{chat[1].userInfo.displayName}</span>
 <p>{chat[1].lastMessage?.text}</p>

</div>

</div>

))}

</div>

);

};

export default Chats;

 Slidebar :-

import React from "react";

import Navbar from "./Navbar"

import Search from "./Search"

import Chats from "./Chats"

const Sidebar = () =>

{ return (

<div className="sidebar">

<Navbar />

<Search/>
 <Chats/>

</div>

);

};

export default Sidebar;

 Search:-

import React, { useContext, useState } from "react";

import {

collection,

query,

where,

getDocs,

setDoc,

doc,

updateDoc,

serverTimestamp,

getDoc,

} from "firebase/firestore";

import { db } from "../firebase";

import { AuthContext } from "../context/AuthContext";

const Search = () => {

const [username, setUsername] = useState("");

const [user, setUser] = useState(null);

const [err, setErr] = useState(false);

const { currentUser } = useContext(AuthContext);

const handleSearch = async () =>

{ const q = query(

collection(db, "users"),

where("displayName", "==", username)

);

try {

const querySnapshot = await getDocs(q);

querySnapshot.forEach((doc) => {

setUser(doc.data());

});

} catch (err) {
 setErr(true);

};

const handleKey = (e) => {

e.code === "Enter" && handleSearch();

};

const handleSelect = async () => {

//check whether the group(chats in firestore) exists, if not create

const combinedId =

currentUser.uid > user.uid

? currentUser.uid + user.uid

: user.uid + currentUser.uid;

try {

const res = await getDoc(doc(db, "chats", combinedId));

if (!res.exists()) {

//create a chat in chats collection

await setDoc(doc(db, "chats", combinedId), { messages: [] });

 //create user chats

await updateDoc(doc(db, "userChats", currentUser.uid),

{ [combinedId + ".userInfo"]: {

uid: user.uid,

displayName: user.displayName,

photoURL: user.photoURL,

},

[combinedId + ".date"]: serverTimestamp(),

});

await updateDoc(doc(db, "userChats", user.uid),

{ [combinedId + ".userInfo"]: {

uid: currentUser.uid,

displayName: currentUser.displayName,

photoURL: currentUser.photoURL,

},

[combinedId + ".date"]: serverTimestamp(),

});

}
 } catch (err) {}

setUser(null);

setUsername("")

};

return (

<div className="search">

<div className="searchForm">

<input

type="text"

placeholder="Find a user"

onKeyDown={handleKey}

onChange={(e) => setUsername(e.target.value)}

value={username}

/>

</div>

{err && <span>User not found!</span>}

{user && (

<div className="userChat" onClick={handleSelect}>

<img src={user.photoURL} alt="" />

 <div className="userChatInfo">

<span>{user.displayName}</span>

</div>

</div>

)}

</div>

);

};

export default Search;

 Message :-

import React, { useContext, useEffect, useRef } from "react";

import { AuthContext } from "../context/AuthContext";

import { ChatContext } from "../context/ChatContext";

const Message = ({ message }) => {

const { currentUser } = useContext(AuthContext);

const { data } = useContext(ChatContext);

const ref = useRef();

useEffect(() => {

ref.current?.scrollIntoView({ behavior: "smooth" });

}, [message]);

return (

<div

ref={ref}

className={`message ${message.senderId === currentUser.uid &&

"owner"}`}

>

<div className="messageInfo">

<img
 src={

message.senderId === currentUser.uid

? currentUser.photoURL

: data.user.photoURL

alt=""

/>

<span>just now</span>

</div>

<div className="messageContent">

<p>{message.text}</p>

{message.img && <img src={message.img} alt="" />}

</div>

</div>

);

};

export default Message;

 Input :-

import React, { useContext, useState } from "react";

import Img from "../img/img.png";

import Attach from "../img/attach.png";

import { AuthContext } from

"../context/AuthContext"; import { ChatContext } from

"../context/ChatContext"; import {

arrayUnion,

doc,

serverTimestamp,

Timestamp,

updateDoc,

} from "firebase/firestore";

import { db, storage } from "../firebase";

import { v4 as uuid } from "uuid";

import { getDownloadURL, ref, uploadBytesResumable } from "firebase/storage";

const Input = () => {

const [text, setText] = useState("");

const [img, setImg] = useState(null);

const { currentUser } = useContext(AuthContext);

 const { data } = useContext(ChatContext);

const handleSend = async () =>

{ if (img) {

const storageRef = ref(storage, uuid());

const uploadTask = uploadBytesResumable(storageRef, img);

uploadTask.on(

(error) => {

//TODO:Handle Error

},

() => {

getDownloadURL(uploadTask.snapshot.ref).then(async (downloadURL) =>

{

await updateDoc(doc(db, "chats", data.chatId),

{ messages: arrayUnion({

id: uuid(),

text,

senderId: currentUser.uid,
 date: Timestamp.now(),

img: downloadURL,

}),

});

});

);

} else {

await updateDoc(doc(db, "chats", data.chatId),

{ messages: arrayUnion({

id: uuid(),

text,

senderId: currentUser.uid,

date: Timestamp.now(),

}),

});

await updateDoc(doc(db, "userChats", currentUser.uid),

{ [data.chatId + ".lastMessage"]: {
 text,

},

[data.chatId + ".date"]: serverTimestamp(),

});

await updateDoc(doc(db, "userChats", data.user.uid),

{ [data.chatId + ".lastMessage"]: {

text,

},

[data.chatId + ".date"]: serverTimestamp(),

});

setText("");

setImg(null);

};

return (

<div className="input">

<input

type="text"

placeholder="Type something..."
 onChange={(e) =>

setText(e.target.value)} value={text}

/>

<div className="send">

<img src={Attach} alt="" />

<input

type="file"

style={{ display: "none" }}

id="file"

onChange={(e) => setImg(e.target.files[0])}

/>

<label htmlFor="file">

<img src={Img} alt="" />

</label>

<button onClick={handleSend}>Send</button>

</div>

</div>

);

};
export default Input;

 AuthContext :-

import { createContext, useEffect, useState } from "react";

import { auth } from "../firebase";

import { onAuthStateChanged } from "firebase/auth";

export const AuthContext = createContext();

export const AuthContextProvider = ({ children }) =>

{ const [currentUser, setCurrentUser] = useState({});

useEffect(() => {

const unsub = onAuthStateChanged(auth, (user) => {

setCurrentUser(user);

console.log(user);

});

return () => {

unsub();
 };

}, []);

return (

<AuthContext.Provider value={{ currentUser }}>

{children}

</AuthContext.Provider>

);

};

=> Home;-

import React from 'react'

import Sidebar from '../components/Sidebar'

import Chat from '../components/Chat'

const Home = () =>

{ return (

<div className='home'>

<div className="container">

<Sidebar/>
 <Chat/>

</div>

</div>

export default Home

3. Login :-

import React, { useState } from "react";

import { useNavigate, Link } from "react-router-dom";

import { signInWithEmailAndPassword } from "firebase/auth";

import { auth } from "../firebase";

const Login = () => {

const [err, setErr] = useState(false);

const navigate = useNavigate();

const handleSubmit = async (e) => {

e.preventDefault();

const email = e.target[0].value;

const password = e.target[1].value;

try {

await signInWithEmailAndPassword(auth, email, password);

navigate("/")

} catch (err) {

setErr(true);

};

return (

<div className="formContainer">

<div className="formWrapper">

<span className="logo">Lama Chat</span>

 <span className="title">Login</span>

<form onSubmit={handleSubmit}>

<input type="email" placeholder="email" />

<input type="password" placeholder="password" />

<button>Sign in</button>

{err && <span>Something went wrong</span>}

</form>

<p>You don't have an account? <Link to="/register">Register</Link></p>

</div>

</div>

);

};

export default Login;

4. SignUp :-
import React, { useState } from "react";

import Add from "../img/addAvatar.png";

import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";

import { auth, db, storage } from "../firebase";

import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";

import { doc, setDoc } from "firebase/firestore";

import { useNavigate, Link } from "react-router-dom";

const Register = () => {

const [err, setErr] = useState(false);

const [loading, setLoading] = useState(false);

const navigate = useNavigate();

const handleSubmit = async (e) =>

{ setLoading(true);

e.preventDefault();

const displayName = e.target[0].value;

const email = e.target[1].value;

const password = e.target[2].value;

const file = e.target[3].files[0];

try {

//Create user

const res = await createUserWithEmailAndPassword(auth, email, password);

//Create a unique image name

const date = new

Date().getTime();

const storageRef = ref(storage, `${displayName + date}`);

await uploadBytesResumable(storageRef, file).then(() =>

{ getDownloadURL(storageRef).then(async (downloadURL) => {

try {

//Update profile
 await updateProfile(res.user, {

displayName,

photoURL: downloadURL,

});

//create user on firestore

await setDoc(doc(db, "users", res.user.uid),

{ uid: res.user.uid,

displayName,

email,

photoURL: downloadURL,

});

//create empty user chats on firestore

await setDoc(doc(db, "userChats", res.user.uid), {});

navigate("/");

} catch (err) {

console.log(err);

setErr(true);

setLoading(false);

}
 });

});

} catch (err) {

setErr(true);

setLoading(false);

};

return (

<div className="formContainer">

<div className="formWrapper">

<span className="logo">Lama Chat</span>

<span className="title">Register</span>

<form onSubmit={handleSubmit}>

<input required type="text" placeholder="display name" />

<input required type="email" placeholder="email" />

<input required type="password" placeholder="password" />

<input required style={{ display: "none" }} type="file" id="file" />

<label htmlFor="file">

<img src={Add} alt="" />

 <span>Add an avatar</span>

</label>

<button disabled={loading}>Sign up</button>

{loading && "Uploading and compressing the image please wait..."}

{err && <span>Something went wrong</span>}

</form>

<p>

You do have an account? <Link to="/register">Login</Link>

</p>

</div>

</div>

);

};

export default Register;

FIREBASE:
1. Server :-

import { initializeApp } from "firebase/app";

import { getAuth } from "firebase/auth";

import { getStorage } from "firebase/storage";

import { getFirestore } from "firebase/firestore";

const firebaseConfig = {

apiKey: process.env.REACT_APP_FIREBASE_KEY,

authDomain: "chat-ab746.firebaseapp.com",

projectId: "chat-ab746",

storageBucket: "chat-ab746.appspot.com",

messagingSenderId: "901216368405",

appId: "1:901216368405:web:8ec942ee51611df5c49b1c",

};

// Initialize Firebase

export const app = initializeApp(firebaseConfig);

export const auth = getAuth();

export const storage = getStorage();

export const db = getFirestore()

OUTPUT:

Login Page of the Chat App.

MESSAGES SECTION IN THE

CHAT APP.

Sign up page of the chat app.