INDUSTRIAL TRAINING REPORT

Industrial Training Report

Submitted in Partial fulfilment
of the Degree of
Bachelors of Computer Applications

Supervisor’s Name - Ms. Ankita Roy Submitted By-:

Student Name-Dev
Grover
Enrollment No: 120922091
SemV

Jagan Nath University

Bahadurgarh (NCR)
 (2022-25)
INDUSTRIAL TRAINING REPORT

Industrial Training Report

Submitted in Partial fulfilment
of the Degree of
Bachelors of Computer Applications

Supervisor’s Name - Ms. Ankita Roy Submitted By-:

Student Name-Dev
Grover
Enrollment No: 120922091
Sem V

Jagan Nath University

Bahadurgarh (NCR) (2022-25)
Certificate
 Acknowledgment

I would like to express my deepest appreciation to everyone who has supported

me throughout my MERN stack training and during the development of my
project.
First and foremost, my sincerest thanks go to Mr. Nitin Jha whose exceptional
guidance, expertise, and dedication were instrumental in helping me understand
and apply the complex concepts of the MERN stack. His unwavering support and
encouragement have been critical to my success in both the training and the
project development phases. His generosity and commitment to sharing
knowledge have been a constant source of inspiration and a valuable asset during
both the learning and project phases.
I am also deeply grateful to the creators and contributors of the tools, platforms,
and resources that played a key role in both my training and my project. The rich
array of documentation, tutorials, and forums available online has been an
indispensable resource, guiding me through the complexities of the MERN stack.
This acknowledgment is a token of my appreciation for the collective support I
have received, without which my training and project would not have been as
successful or enriching.

Name: Dev Grover

Enrol. No: 120922091
Course: BCA
 INDEX

S NO. TOPIC PAGE NO.

1. Hardware / Software 1
Requirements

2. Introduction 2

3. List of Practicals 3

4. Project Code 28

5. References 67
 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).

1
 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 architecture.

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.

2
 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]

let ar3 = []

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

// ar.shift();

3
// 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]

3.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');
}

4
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);
}

5
const st = {name:'aman',age:34,marks:88}
addStudent(st,disStudents)
// disStudents()

4.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);

5.reduce in array
let ar = [4, 5, 17, 6, 3]

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

// return prev+nxt
// })

6
// 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}`);
6.map function
let ar = [3,4,5,7,2,9];

const mult = (item)=>{

if(item%2!=0){
return item*2;
}else{
return item;

7
 }
}

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'
}

8
 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>

9
 <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>

10
 `
})
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 (
<>

11
 <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>
)

12
}
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>

13
 <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/>}/>

14
 <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>

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

16
(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)=>{

17
 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")

18
})
(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) {

19
 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()=>{

20
 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)
{

21
 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
}
}

22
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 = [];

23
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());
}

24
 } 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);

25
 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));

26
 return true;

} else {
return false;
}
};

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

27
 Travelling Website
Project Code

React Code :
1. App.js :-

import './App.css';
import Banner from './components/Banner';
import Home from './components/Home';
import Login from '../src/components/Login-signup/Login';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Aboutus from './components/about-us/Aboutus';
import Service from './components/services/Service';
import LoginPage from './components/Login-signup/LoginPage';
import ForgetPass from './components/Login-signup/ForgetPass';
import Bookservice from './components/service-booking/Bookservice';
function App() {
return (
<BrowserRouter>
<div className="App">
<Routes>
<Route path='/' element={<Home/>}/>
<Route path ='/aboutus' element={<Aboutus/>}/>
<Route path ='/services' element={<Service/>}/>
<Route path='/loginpage' element={<LoginPage/>}/>

28
 <Route path="/bookservice" element={<Bookservice/>} />
<Route path='/login' element={<Login/>}/>
<Route path='/forget' element={<ForgetPass/>}/>
</Routes>
</div>
</BrowserRouter>
);
}

export default App;

2. Home Page :-

29
NavBar :-
import React from 'react';
import logo from './Assets/logo-video.mp4';
import '../App.css';
import { Link, useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { logout } from './Userslice'; // Import the logout action

function Navbar() {
const navigate = useNavigate();
const dispatch = useDispatch();
const isLoggedIn = useSelector((state) => state.user.isLoggedIn);
const userName = useSelector((state) => state.user.name);
const handleLogout = () => {
dispatch(logout());
navigate('/');
};
return (
<>
{/* navbar code */}
<nav className="main-nav">
{/* Logo */}
<div className='logo'>
<div className='login-video'>
<video width="400px" height="120px" autoPlay loop muted>

30
 <source src={logo} type="video/mp4" />
</video>
<h1 className='img-h1'>Explora</h1>
</div>
</div>
{/* Main menu */}
<div className='main-menu'>
<ul>
<li>
<Link to='/'>Home</Link>
</li>
<li>
<Link to='/aboutus'>About</Link>
</li>
<li>
<Link to='/services'>Services</Link>
</li>
<li>
<a href='#'>Booking</a>
</li>
</ul>
</div>
<div className='login-signup'>
{isLoggedIn ? (
<>

31
 <span>Welcome, {userName}!</span>
<button className="btn btn-primary"
onClick={handleLogout}>Logout</button>
</>):
(
<>
<Link to='/login'>
<button className="btn btn-primary" type="button">Signup</button>
</Link>
<Link to='/loginpage'>
<button className="btn btn-primary" type="button">Login</button>
</Link>
</>
)}
</div>
</nav>
<section className='banner'>
{/* <img src={banner} ></img> */}
</section>
</>
);
}
export default Navbar

32
Front Content (Homec1.js):-
import React from 'react'
import '../App.css';
import './Home.css'
import video from './Assets/Home-video.mp4'
function Homec1() {
return (
<div className="home-container">
<div className="info-section">
<h1 className="info-title">Welcome to Explora</h1>
<p className="info-description">
Explore the world like never before. Discover new places, connect
with people, and enhance your travel experiences with our platform.
</p>
</div>
<div className="video-section">
<video width="100%" height="auto" autoPlay loop muted>
<source src={video} type="video/mp4" />
</video>
</div>
</div>
)
}

export default Homec1

33
Carousel (Homec2.js):-
import React from 'react'
import './Homec2.css'
import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css'
import bali from './Assets/bali.jpeg'
import top_exp from './Assets/top-exp.jpg'
import top_attract from './Assets/top-attract.jpg'
import bucket from './Assets/bucket-list.jpg'
import cult from './Assets/cultural.jpg'
import food from './Assets/food.jpg'
function Homec2() {

34
 const responsive = {
superLargeDesktop: {

breakpoint: { max: 4000, min: 3000 },

items: 5
},
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 4
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 2
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1
}
};

return (
<div className='container-homec2'>
<h1> More Adventereous Places</h1>
<h4>To visit....</h4>
<Carousel responsive={responsive}>

35
<div className='place-img'>
<img src={bali} height={'150px'} width={'300px'} alt='bali'/>
<h2 className='place-name'>Beauty</h2>
</div>
<div className='place-img'>
<img src={top_exp} height={'150px'} width={'300px'} alt='bali'/>
<h2 className='place-name'>Top experiences</h2>
</div>
<div className='place-img'>
<img src={top_attract} height={'150px'} width={'300px'} alt='bali'/>
<h2 className='place-name'>Top attractions</h2>
</div>
<div className='place-img'>
<img src={bucket} height={'150px'} width={'300px'} alt='bali'/>
<h2 className='place-name'>Bucket List</h2>
</div>
<div className='place-img'>
<img src={cult} height={'150px'} width={'300px'} alt='bali'/>
<h2 className='place-name'>cultural & Historic</h2>
</div>
<div className='place-img'>
<img src={food} height={'150px'} width={'300px'} alt='bali'/>
<h2 className='place-name'>Foods and Drinks</h2>
</div>

36
 </Carousel>
</div>
)
}

export default Homec2

Services (Homec3.js):-
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Link, useNavigate } from 'react-router-dom';

import './Homec3.css'
function Homec3() {
const navigate=useNavigate()
const [services, setServices] = useState([]);

useEffect(() => {
axios.get('http://localhost:8000/services')
.then(response => {

37
 const limitedServices = response.data.slice(0, 3);
setServices(limitedServices);
})
}, []);
const handleBookNow=(id)=>{
const token = localStorage.getItem('authorizeToken');
if (token) {
navigate(`/bookservice`,{state:{serviceId:id}});
}

}
return (
<div className='dream-trip-section'>
<h2>Dream Your Next Trip</h2>
<p>Explore our top services to plan your dream vacation</p>
<div className='dream-trip-grid'>
{services.map(service => (
<div className='dream-service-card' key={service.id}>
<img src={service.img} alt={service.title} />
<h3>{service.location}</h3>
<h3>{service.title}</h3>
<p>{service.description}</p>
<button className="book-button">Book Now</button>
</div>
))}

38
 </div>
<div className='more-services'>
<Link to='/services'>
<button className="btn btn-primary">More Services</button>
</Link>
</div>
</div>
);
}
export default Homec3;

Footer(Footer.js):-
import React from 'react';
import './Footer.css';
import { FaFacebookF, FaInstagram, FaTwitter, FaYoutube } from 'react-icons/fa';
import { Link } from 'react-router-dom';

39
function Footer() {
return (
<footer className="footer">
<div className="footer-container">
{/* Section 1: About Us */}
<div className="footer-section">
<h2>About Explora</h2>
<p>
Explora is your ultimate guide to adventure and discovery. We curate the
best destinations and experiences to satisfy your wanderlust.
</p>
</div>
{/* Section 2: Quick Links */}
<div className="footer-section">
<h2>Quick Links</h2>
<ul>
<li><Link to="/aboutus">About Us</Link></li>
<li><a href="/services">Services</a></li>
<li><a href="/destinations">Destinations</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</div>
{/* Section 3: Contact Info */}
<div className="footer-section">
<h2>Contact Us</h2>

40
 <p>Email: Explora@gmail.com</p>
<p>Phone: +91 9876543210</p>
<p>Location: 72 Maldives, Parathe wali gaali</p>
</div>
{/* Section 4: Social Media */}
<div className="footer-section"><h2>Follow Us</h2>
<div className="social-icons">
<a href="https://facebook.com"><FaFacebookF /></a>
<a href="https://instagram.com"><FaInstagram /></a>
<a href="https://twitter.com"><FaTwitter /></a>
<a href="https://youtube.com"><FaYoutube /></a>
</div>
</div>
</div>
<div className="footer-bottom">
<p>&copy; {new Date().getFullYear()} Explora. All rights reserved.</p>
</div>
</footer>
);
}
export default Footer;

41
Services:-

import React, { useEffect, useState } from 'react';

import axios from 'axios';
import './Services.css';
import { Link, useNavigate } from 'react-router-dom';

function Services() {
const [services, setServices] = useState([]);
const [records, setRecords] = useState([]);
const navigate=useNavigate()

42
 useEffect(() => {
const fetchServices = async () => {
const response = await axios.get('http://localhost:8000/services');
setServices(response.data);
setRecords(response.data);
};
fetchServices();
}, []);
const filter = (event) => {
const searchTerm=event.target.value.toLowerCase();
setRecords(services.filter(service =>
service.location.toLowerCase().includes(searchTerm)));
};
const handleBookNow=(id)=>{
const token = localStorage.getItem('authorizeToken');
if (token) {

navigate(`/bookservice`,{state:{serviceId:id}});
} else {

navigate('/loginpage');
}

43
}
return (
<div className="services-container">
<h2>Our Services</h2>
<br/>
<hr/>
<div className="search-bar">
<i class="fas fa-search"></i>
<input type="text" className="search-input" placeholder="Search by
location..." onChange={filter}
/>
</div>
<div className="service-grid">
{records.length > 0 ? (
records.map(service => (
<div className="service-card" key={service.id}>
<img src={service.image} alt={service.location} className="service-
image" />
<h3>{service.location}</h3>
<p>{service.description}</p>
<p className="service-price">{service.price}</p>
<button className="book-button"
onClick={()=>handleBookNow(service.id)} >Book Now</button>
</div>
))):
(

44
<p>No services found for the selected location.</p>
)}
</div>
<div>
<Link to='/'>
<button className="back-button">Back</button>
</Link>
</div>
</div>
);
}

export default Services;

Bookings:-

45
import React,{useEffect, useState } from 'react';
import { useParams, useNavigate, useLocation } from 'react-router-dom';
import axios from 'axios';
import './BookService.css';
function Bookservice() {
const location = useLocation();
const serviceId = location.state.serviceId;
const [service, setService] = useState(null);
const [ticketCount,setTicketCount] = useState(1);
const navigate = useNavigate();
console.log(serviceId);
useEffect(() => {

46
 const fetchServiceDetails = async () => {

const response = await axios.get(`http://localhost:8000/services/$

{serviceId}`);
console.log(response.data)
setService(response.data);
};
fetchServiceDetails();
},[serviceId]);

const increaseTicketCount = () => {

setTicketCount(prevCount => prevCount + 1);
};
const decreaseTicketCount = () => {
if (ticketCount > 1) {
setTicketCount(prevCount => prevCount - 1);
}
};

const handleConfirmPay = () => {

alert(`You have purchased ${ticketCount} ticket(s) for ${service.location} at $
{ticketCount*service.price} USD.`);
navigate('/services')
};

47
 const handleCancel = () => {
navigate('/services');
};

if (!service) {
return <p>Loading service details...</p>;
}

return (
<div className="booking-container">
<h2>Book Service: {service.location}</h2>
<div className="booking-details">
<img src={service.image} alt={service.location} className="booking-
image" />
<div className="booking-info">
<p>{service.description}</p>
<p className="booking-price">Price per ticket:{service.price}USD</p>
</div>
</div>

<div className="ticket-controls">
<button className="ticket-btn"
onClick={decreaseTicketCount}>-</button>
<span className="ticket-count">{ticketCount}</span>

48
 <button className="ticket-btn"
onClick={increaseTicketCount}>+</button>
</div>

<p className="total-price">Total: {ticketCount *service.price} USD</p>

<div className="booking-actions">
<button className="confirm-button"
onClick={handleConfirmPay}>Confirm Pay</button>
<button className="cancel-button"
onClick={handleCancel}>Cancel</button>
</div>
</div>
);
}

export default Bookservice;

Login (LoginPage.js):-

49
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import '../Login-signup/Login.css';
import logo from '../Assets/logo-video.mp4';
import backvideo from '../Assets/login-background1-video.mp4';
import axios from 'axios';
import { useDispatch } from 'react-redux';
import { login } from '../Userslice';

function LoginPage() {
const [email, setemail] = useState('');
const [pass, setpass] = useState('');
const [emailerror, setemailerror] = useState('');
const [passerror, setpasserror] = useState('');
const [submitted, setsubmitted] = useState(true);
const navigate = useNavigate();
const dispatch = useDispatch();

50
function emailValid(email) {
const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return regex.test(email);
}

function passValid(pass) {
return pass.length > 7;
}
const validateFields = () => {
let valid = true;
if (!emailValid(email)) {
setemailerror('Enter a valid email');
valid = false;
} else {
setemailerror('');
}
if (!passValid(pass)) {
setpasserror('Password must be at least 8 characters');
valid = false;
} else {
setpasserror('');
}
return valid;
};

51
 const handleClick = async () => {
setsubmitted(true);
if (validateFields()) {
try {
const response = await axios.post('http://localhost:8000/loginpage', { email,
pass });
if (response.status === 200 && response.data.status === 'Success') {
const token = response.data.token;
const userName = response.data.name;
localStorage.setItem('authorizeToken', token);
localStorage.setItem('userName', userName);

alert('Login Successful');
dispatch(login(userName));
navigate('/');
} else {
setemailerror('Invalid username or password');
}
} catch (error) {
console.error('Error logging in', error);
setemailerror('Error logging in. Please try again.');
}
}
};

52
 return (
<div>
<div className='top'>
<video className='background-video' autoPlay loop muted>
<source src={backvideo} type="video/mp4" />
</video>
<div className='container'>
<div className='header'>
<div className='login-video1'>
<video width="400px" height="120px" autoPlay loop muted>
<source src={logo} type="video/mp4" />
</video>
</div>
<h1 className='video-h1'>Explora</h1>
</div>
<Link to='/'>
<button className='btn1'><i class='bx bx-x'></i></button>
</Link>

<div className='inputs'>
<div className='input'>
<i class="fas fa-envelope"></i>
<input type='email' placeholder='Email id' onChange={(t) =>
setemail(t.target.value)} value={email} required />

53
 </div>
{submitted && <div className='login-error1'>{emailerror}</div>}
<div className='input'>
<i class='bx bxs-key'></i>
<input type='password' placeholder='Password' onChange={(t) =>
setpass(t.target.value)} value={pass} required />
</div>
{submitted && <div className='login-error1'>{passerror}</div>}
</div>
{submitted ? <div></div> : <div className='login-
error3'><p>OOPss..Invalid Username or Password.</p></div>}
<div className='forget-pass'>
<Link to='/forget'>
<span>Forget password?</span>
</Link>
</div>

<div className='submit-container'>
<Link to='/login'>
<button className='submit1 grey'>Sign Up</button>
</Link>
<button className='submit' onClick={handleClick}>Login</button>
<div className='back-home-btn'></div>
</div>
</div>
</div>

54
 </div>
);
}

export default LoginPage;

Signup:-

import React, { useState } from 'react';

import { Link, useNavigate } from 'react-router-dom';
import '../Login-signup/Login.css';
import logo from '../Assets/logo-video.mp4';
import backvideo from '../Assets/login-background1-video.mp4';
import axios from 'axios';

function Login() {
const [name, setname] = useState('');

55
const [email, setemail] = useState('');
const [pass, setpass] = useState('');
const [nameerror, setnameerror] = useState('');
const [emailerror, setemailerror] = useState('');
const [passerror, setpasserror] = useState('');
const [submitted, setSubmitted] = useState(false);
const navigate = useNavigate();

function emailvalid(email) {
const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return regex.test(email);
}

function passvalid(pass) {
return pass.length > 7;
}

function namevalid(name) {
return name.trim() !== '';
}

const validateFields = () => {

let valid = true;
if (!namevalid(name)) {
setnameerror('Name cannot be empty');

56
 valid = false;
} else {
setnameerror('');
}

if (!emailvalid(email)) {
setemailerror('Enter valid email');
valid = false;
} else {
setemailerror('');
}

if (!passvalid(pass)) {
setpasserror('Min 8 characters');
valid = false;
} else {
setpasserror('');
}

return valid;
};

const handleChange = (e) => {

const { name, value } = e.target;
if (name === 'name') {

57
 setname(value);
} else if (name === 'email') {
setemail(value);
} else if (name === 'pass') {
setpass(value);
}
};

const handleClick = async() => {

setSubmitted(true);
if (validateFields()) {
const data = { name, email, pass }
axios.post('http://localhost:8000/login', data)
navigate('/loginpage');
}
};

return (
<div className='top'>
<video className='background-video' autoPlay loop muted>
<source src={backvideo} type="video/mp4" />
</video>
<div className='container'>
<div className='header'>

58
 <div className='login-video1'>
<video width="400px" height="120px" autoPlay loop muted>
<source src={logo} type="video/mp4" />
</video>
</div>
<h1 className='video-h1'>Explora</h1>
</div>
<Link to='/'>
<button className='btn1'><i className='bx bx-x'></i></button>
</Link>

<div className='inputs'>
<div className='input'>
<i className="fas fa-user"></i>
<input type='text' name='name' placeholder='Name'
onChange={handleChange} value={name} required/>
</div>
{submitted && <div className='login-error1'>{nameerror}</div>}

<div className='input'>
<i className="fas fa-envelope"></i>
<input type='email' name='email' placeholder='Email id'
onChange={handleChange} value={email} required
/>
</div>
{submitted && <div className='login-error1'>{emailerror}</div>}

59
 <div className='input'>
<i className='bx bxs-key'></i>
<input type='password' name='pass' placeholder='Password'
onChange={handleChange} value={pass} required
/>
</div>
{submitted && <div className='login-error1'>{passerror}</div>}
</div>

<div className='submit-container'>
<button className='submit' onClick={handleClick}>Sign Up</button>
<Link to='/loginpage'>
<button className='submit1 grey'>Login</button>
</Link>
</div>
</div>
</div>
);
}
export default Login;

Redux :-
Store.js-

60
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.createRoot(document.getElementById('root')).
render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
)

UserSlice.js-
import { createSlice } from '@reduxjs/toolkit';
const userSlice = createSlice({
name: 'user',
initialState: {
name: localStorage.getItem('userName') || '',
isLoggedIn: !!localStorage.getItem('authorizeToken'),
},
reducers: {
login(state, action) {

61
 state.name = action.payload;
state.isLoggedIn = true;
},
logout(state) {
state.name = '';
state.isLoggedIn = false;
localStorage.removeItem('authorizeToken');
localStorage.removeItem('userName');
},
},
});

export const { login, logout } = userSlice.actions;

export default userSlice.reducer;

Node And Express Code:

1. Server (server.js):-
const express=require('express')
const cors=require('cors')
const jwt = require('jsonwebtoken');
const fs = require('fs');
const app=express()
app.use(cors())

62
app.use(express.json())
const {signup,login,forget} =require('./databse')
// app.get('/',(req,res)=>{
// console.log("runns")
// })
const SECRET_KEY = '72';
app.post('/login', async (req, res) => {
const data = req.body;
console.log(data);
signup(data); });
app.post('/loginpage', async (req, res) => {

const data = req.body;

const result = await login(data);
if (result) {
const token = jwt.sign({ email:result.email }, SECRET_KEY, { expiresIn:
'10s' });
res.status(200).json({ status: 'Success', name: result.name,token });
}
else{
res.json('Error')
}
});
app.post('/forget',async(req,res)=>{
const data=req.body

63
 const result= await forget(data)
console.log(result)
if(result){
res.status(200).json('Success')
}
else{
res.json('Error')
}
})
app.get('/services', (req, res) => {
fs.readFile('./servicedata.json', 'utf8', (err, data) => {
res.status(200).json(JSON.parse(data));
});
});
app.get('/services/:serviceId', (req, res) => {
const serviceId = req.params.serviceId;
// console.log(serviceId)
fs.readFile('./servicedata.json', 'utf8', (err, data) => {

const services = JSON.parse(data);

console.log(serviceId)
const service = services.find(item=>{
return item.id == serviceId
})
console.log(service)

64
 res.status(200).json(service);
})
});
app.listen(8000,()=>{
console.log('server on..')
})

2. database (databases.js):-
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("sucessss...")
return db
}
const db=getDb()
const signup = async (obj) => {
const collection = (await db).collection('users');
await collection.insertOne(obj);
}
const login=async(obj)=>{
const collection=(await db).collection('users')
const user = await collection.findOne({email:obj.email});

65
 console.log(user)
if (user) {
if (user.pass === obj.pass) {
return { name: user.name };
} else {
return false; }
} else {
return false;
}}
const forget=async(obj)=>{
const collection=(await db).collection('users')
const user1 = await collection.findOne({email:obj.email});
console.log(user1)
if (user1) {
const result = await collection.updateOne(
{ email:obj.email},
{ $set:{pass:obj.pass} });
return true;
}
else{
return false;}}
module.exports={signup,login,forget}

66
 References

 https://boxicons.com

 https://www.canva.com

 https://www.npmjs.com

 https://detailed.com

 https://www.educationcorner.com

 Book name-Pro Meri Stack

67