Welcome to backend course
you have to download vs code and postman
1)open vs code type
open terminal
#)npm init -y
#)npm install express
#npm i nodemon
then package.json appears
1)index.js 2) node modulus 3) pakage.json 4)pakage-lock.json
1)index.js from NODE TO Express
# this is for express //Express
import express from "express";
const app=express()
const port=8000
app.get("/",(req,res)=>{
res.send("hello")
})
app.get("/about",(req,res)=>{
res.send("hello")
})
app.get("/contact",(req,res)=>{
res.send("hello")
})
app.listen(port,()=>{
console.log('server started at ${port}');
})
# this is for node.js // for NODE
// import http from "http"
// const port=8000
// const server=http.createServer((req,res)=>{
// if(req.url == "/"){
// res.end("hello this is my 1st server")
// }
// else if(req.url== "/about"){
// res.end("welcome to about page")
// }
// else if(req.url== "/contact"){
// res.end("welcome to contact page")
// }
// else{
// res.end("404 not found")
// }
// })
// server.listen(port,()=>{
// console.log("server is started");
// })
2)package.json
{
"name": "ultimate-backend-cource",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start":"node index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "module",
"description": "",
"dependencies": {
"express":"4.21.2"
}
}
#npm run dev or #npm run start #npm install nodemon
1)pakage.json after nodemon installation
{
"name": "ultimate-backend-cource",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start":"nodemon index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "module",
"description": "",
"dependencies": {
"express":"4.21.2",
"nodemon": "3.1.9"
}
}
2) methods that you should know
3) request , response , params
req(Request): Represents the HTTP request, containing details like headers, query parameters, body, and request method.res(Response): Represents the HTTP response sent back to the client, containing status codes, headers, and response data.params(Parameters): Represents route parameters in a URL, used to capture dynamic values.
const express = require('express'); //From express
const app = express();
app.use(express.json()); // Middleware to parse JSON body
// GET request with route parameters
app.get('/users/:id', (req, res) => {
const userId = req.params.id; // Extract route parameter
res.send(`User ID: ${userId}`);
});
// POST request with body data
app.post('/users', (req, res) => {
const { name, email } = req.body; // Extract data from request body
res.status(201).json({ message: 'User created', name, email });
});
// Start the server
app.listen(3000, () => console.log('Server running on port 3000'));
4) Install Thunder client Extension
5)index.js
import express from "express";
const app=express()
const port=8000
app.use(express.json())
app.get("/",(req,res)=>{
res.send("<h1>Krish</h1>")
res.json({name: "Krish",description: "Hello i am backend developer"})
})
app.get("/about",(req,res)=>{
res.send("hello")
})
app.get("/contact",(req,res)=>{
res.send("contact page")
})
app.post("/workers",(req,res)=>{
let body=req.body
console.log(body);
res.send("worker page")
})
app.listen(port,()=>{
console.log('server started at ${port}');
})
6) examples with Params
import express from "express";
const app=express()
const port=8000
let users=
[
{
"id": 1,
"name": "John Doe",
"email": "john.doe@example.com",
"position": "Software Engineer",
"salary": 75000
},
{
"id": 2,
"name": "Jane Smith",
"email": "jane.smith@example.com",
"position": "Project Manager",
"salary": 90000
},
{
"id": 3,
"name": "Robert Brown",
"email": "robert.brown@example.com",
"position": "Data Analyst",
"salary": 68000
},
{
"id": 4,
"name": "Emily Johnson",
"email": "emily.johnson@example.com",
"position": "UI/UX Designer",
"salary": 72000
},
{
"id": 5,
"name": "Michael Lee",
"email": "michael.lee@example.com",
"position": "DevOps Engineer",
"salary": 85000
}
]
app.get("/user", (req,res)=>{
res.json(users)
})
app.get("/user/:id", (req,res)=>{
let id=req.params.id
users.find((user)=>(user.id))
console.log(id);
res.json(users)
})
//New User
app.get("/user", (req,res)=>{
let id=req.params.id
let newuser=users.find((user)=>(user.id==id))
if(newuser){
res.json(newuser)
}else{
res.status(404).json({message: "user not found"})
}
})
app.listen(port,()=>{
console.log('server started at ${port}');
})
//existing user
const express = require('express');
const apps = express();
// users data
const user = [
{ id: 1, name: "John Doe", email: "john.doe@example.com" },
{ id: 2, name: "Jane Smith", email: "jane.smith@example.com" },
{ id: 3, name: "Robert Brown", email: "robert.brown@example.com" }
];
// GET user by ID
app.get("/user/:id", (req, res) => {
let id = parseInt(req.params.id); // Convert id to number
let existingUser = users.find((user) => user.id === id);
if (existingUser) {
res.json(existingUser);
} else {
res.status(404).json({ message: "User not found" });
}
});
// Start the server
app.listen(3000, () => console.log("Server running on port 3000"));
7)request.query
req.query is used in Express.js to extract query parameters from the URL
const express = require('express');
const app = express();
// GET request with query parameters
app.get("/search", (req, res) => {
let keyword = req.query.keyword; // Extract 'keyword' from query params
let category = req.query.category; // Extract 'category' from query params
if (keyword) {
res.json({ message: `Searching for '${keyword}' in category '${category || "All"}'` });
} else {
res.status(400).json({ message: "Please provide a search keyword" });
}
});
// Start the server
app.listen(3000, () => console.log("Server running on port 3000"));
8)request .params
request.params is an object in web frameworks like Express.js (Node.js) that contains route parameters from the URL. It is used to capture dynamic values passed in the URL path.
Uses
-
Extracting Route Parameters
- Used to retrieve dynamic values from a URL path.
- Example:
GET /users/:id→ Extractidfrom the request.
-
Handling Dynamic Routes
- Useful for building RESTful APIs where data is fetched using parameters.
-
Customizing API Responses
- You can use
request.paramsto return specific content based on the user input.
const express = require('express');
const app = express();
app.get('/users/:id', (req, res) => {
res.send(`User ID is: ${req.params.id}`);
});
app.listen(3000, () => console.log('Server running on port 3000'));
9)Connect Backend with frontend
1)Client side
(Front-End Development)
The client-side, also known as the front-end, is where all user interactions occur. This includes everything that users see and interact with on a website, such as buttons, forms, animations, and dynamic content. It runs directly in the web browser and does not require a continuous connection to the server once loaded. Technologies like HTML, CSS, and JavaScript are used to build client-side applications. JavaScript frameworks and libraries such as React, Angular, and Vue.js help developers create complex and interactive user interfaces.
A common example of a client-side operation is form validation, where JavaScript checks whether a user has entered the correct format before submitting the form. This helps improve user experience by providing immediate feedback without waiting for a response from the server. However, client-side processing is less secure since users can manipulate the code directly in their browser.
2)Server side
(Back-End Development)
The server-side, also known as the back-end, is responsible for handling requests, processing data, and managing databases. Unlike the client-side, which runs in the user’s browser, the server-side runs on a remote server. It executes tasks such as authenticating users, storing and retrieving data from databases, and processing business logic. Popular server-side programming languages include Python, PHP, Node.js, Java, and Ruby, along with databases like MySQL, PostgreSQL, and MongoDB.
For example, when a user logs into a website, the server-side verifies the username and password by checking a database. If the credentials are correct, the server sends back a response allowing the user to access their account. This ensures data security, as sensitive information is stored and processed securely on the server rather than on the client’s device.
10)RESTful API(Application Program Interface) : A RESTful API (Representational State Transfer API) is a web service that follows the principles of REST architecture, allowing communication between clients and servers over the internet. It uses HTTP methods such as GET, POST, PUT, DELETE to perform operations on resources, making it widely used for building scalable and efficient web applications. RESTful APIs work with structured data formats like JSON (JavaScript Object Notation) and XML, though JSON is the most common due to its simplicity and ease of use.
Conclusion
A RESTful API is an essential part of modern web development, enabling smooth communication between clients and servers. It is widely used for web applications, mobile apps, and third-party integrations due to its simplicity, scalability, and flexibility.
11)
Cross-Origin Resource Sharing (CORS) in Express.js
Cross-Origin Resource Sharing (CORS) is a security feature implemented by web browsers that restricts web pages from making requests to a different domain than the one that served the web page. By default, browsers enforce the Same-Origin Policy, which prevents JavaScript from making requests across different origins. CORS allows developers to bypass this restriction by explicitly allowing specific domains, methods, and headers in API responses.
12)npm install cors
What is Middleware in Express.js?
Middleware in Express.js refers to functions that execute between the request and response cycle. These functions have access to the request (req) object, response (res) object, and the next middleware function (next) in the application's request-response lifecycle. Middleware can modify the request, process data, authenticate users, handle errors, and much more before sending a response to the client.
13)npm i nodemon 14)npm install axios
15)create folder
create 1)backend and 2)frontend folder
in backend install in terminal 1)npm init -y 2)npm i nodemon
node modulus
create index.js
import express from "express"
import cors from "cors"
let app=express()
app.use(cors({
"origin":"http://localhost:8000"
}))
app.use(express.json())
const port =8000
app.get("/",(req,res)=>{
res.json({name:"krishna",age:18})
})
app.post("/",(req,res)=>{
console.log(req.body);
res.send({success:true})
})
app.listen(port,()=>{
console.log("server is started")
})
pakage.lock.json ,
pakage.json
{
"name": "backend",
"version": "1.0.0",
"description": "",
"license": "ISC",
"author": "",
"type": "module",
"main": "index.js",
"scripts": {
"dev": "nodemon index.js"
},
"dependencies": {
"cors": "^2.8.5",
"express": "^4.21.2",
"nodemon": "^3.1.9"
}
}
2)open frontend folder
npm install vite@latest
project name any
react , JavaScript
cd ..
npm i
npm run dev or start
src
app.jsx
import React from 'react'
import axios from 'axios'
function App() {
let [username,setusername]=usestate(null)
let [age,setAge]=usestate(null)
let [city,setCity]=usestate(null)
async function getRes(){
// const res=await fetch("http://localhost:8000/")
// let data=await res.json()
// data.then((e)=>{
// console.log(e);
// })
// .catch((e)=>{
// console.log(e);
// })
//axios.get("http://localhost:8000/")
axios.post("http://localhost:8000/",{
username,
age,
city
})
.then((e)=>{
console.log(e.data.name);
})
.catch((e)=>{
console.log(e)
})
}
// return (
// <div>
// <button onclick={()=>getRes()}>send</button>
// </div>
// )
return (
<div>
<input type="text" placeholder='username' value={username} onChange={(e)=>setusername(e.target.value)}/>
<input type="text" placeholder='age' value={age} onChange={(e)=>setAge(e.target.value)}/>
<input type="text" placeholder='city'value={city} onChange={(e)=>setCity(e.target.value)}/>
<button onClick={()=>getRes()}>send</button>
</div>
)
}
export default App
index.css
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: green;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: violet;
background-color: black;
}
a:hover {
color: gray;
}
button {
background-color: green;
}
}
16)middleware status code and http headers
1)
// middleware,status code and HTTP Headers
//Middlewares
//-Middleware runs before the route handler
//-Middleware must call next() to continue to the next function
//-if Middleware does not call next(),the request will Hang.
//-there are some built-in,custom,thirdparty midddlewares etc.
//app.use(cors()) //-----------> Third Party Middleware
//app.use(XPathExpression.json()) //----> build-in middlewares
//app.use((req,resizeBy,next)=>{
// console.log("custom middleware");
// next()
//})
2)Status code run this in html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTTP Status Codes</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
table {
width: 100%;
border-collapse: collapse;
background: #fff;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
th {
background-color: #007BFF;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>HTTP Status Codes and Their Meanings</h2>
<table>
<tr>
<th>Status Code</th>
<th>Meaning</th>
<th>Example Scenario</th>
</tr>
<tr>
<td>200 OK</td>
<td>Request successful</td>
<td>Successfully processed a request</td>
</tr>
<tr>
<td>201 Created</td>
<td>Resource created</td>
<td>A new user is registered</td>
</tr>
<tr>
<td>204 No Content</td>
<td>Request successful, no data returned</td>
<td>A DELETE request was successful</td>
</tr>
<tr>
<td>400 Bad Request</td>
<td>Client error</td>
<td>Invalid input data in a form</td>
</tr>
<tr>
<td>401 Unauthorized</td>
<td>Authentication required</td>
<td>Accessing a protected route without a token</td>
</tr>
<tr>
<td>403 Forbidden</td>
<td>Access denied</td>
<td>User does not have permission</td>
</tr>
<tr>
<td>404 Not Found</td>
<td>Resource not found</td>
<td>Invalid API endpoint</td>
</tr>
<tr>
<td>500 Internal Server Error</td>
<td>Server crash or issue</td>
<td>Unexpected error in backend logic</td>
</tr>
</table>
</body>
</html>
3)Headers
What Are Headers in HTTP?
In HTTP, headers are key-value pairs that provide additional information about a request or response. They are sent between the client (browser) and server in both requests and responses.
Used to send extra information from the client to the server.
Examples:
- Authentication details
- Content type
- User-Agent details
GET /api/users HTTP/1.1
Host: example.com
Authorization: Bearer <token>
User-Agent: Mozilla/5.0
Content-Type: application/json
Why Are Headers Important?
✅ Security (e.g., CORS, Authentication)
✅ Performance Optimization (e.g., Caching)
✅ Content Management (e.g., JSON, HTML, XML formats)
*)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTTP Headers & Express.js Code</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
table {
width: 100%;
border-collapse: collapse;
background: #fff;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
th {
background-color: #007BFF;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
pre {
background: #272822;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
white-space: pre-wrap;
font-size: 14px;
}
</style>
</head>
<body>
<h2>Request Headers</h2>
<table>
<tr>
<th>Header</th>
<th>Meaning</th>
<th>Example</th>
</tr>
<tr>
<td>Authorization</td>
<td>Auth credentials</td>
<td>Bearer <token></td>
</tr>
<tr>
<td>User-Agent</td>
<td>Browser info</td>
<td>Mozilla/5.0</td>
</tr>
<tr>
<td>Content-Type</td>
<td>Request body format</td>
<td>application/json</td>
</tr>
</table>
<h2>Response Headers</h2>
<table>
<tr>
<th>Header</th>
<th>Meaning</th>
<th>Example</th>
</tr>
<tr>
<td>Content-Type</td>
<td>Response format</td>
<td>application/json</td>
</tr>
<tr>
<td>Cache-Control</td>
<td>Caching rules</td>
<td>no-cache</td>
</tr>
<tr>
<td>Set-Cookie</td>
<td>Store session</td>
<td>sessionId=abcd1234</td>
</tr>
</table>
<h2>Express.js Code</h2>
<pre>
app.use((req, res, next) => {
res.setHeader("Content-Type", "application/json");
res.setHeader("X-Powered-By", "Express");
next();
});
app.get("/", (req, res) => {
console.log(req.headers); // Logs all request headers
res.send("Headers received!");
});
</pre>
</body>
</html>
4)Headers index.js
import express from "express"
import cors from "cors"
let app=express()
app.use(express.json())
let password="24abcd24"
app.use((req,res,next)=>{
if(req.body.pass==password){
res.send("password does not match")
}
next()
})
const port = 8000
app.get("/",(req,res)=>{
console.log(req.headers);
res.set("x-username","krish")
res.removeHeader
res.json({name:"ayush",age:21})
})
app.post("/",(req,res)=>{
console.log(req.body);
//res.send({success:true})
res.status(200).send({success:true})
})
app.listen(port,()=>{
console.log("server is started...");
})
package.json
{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "module",
"devDependencies": {
"nodemon": "^3.1.9"
}
}
17)introduction to MongoDB
1)What is a Database?
A database is a structured collection of data that is stored, managed, and retrieved efficiently. It allows users to store, organize, and manipulate data for various applications.
🔹 Why Do We Need Databases?
✅ To store large amounts of data efficiently
✅ To retrieve data quickly when needed
✅ To manage data relationships (e.g., users and orders in an e-commerce site)
✅ To ensure data security and prevent unauthorized access
🔹 Types of Databases
There are two main types of databases:
1️⃣ Relational Databases (SQL-based)
- Data is stored in tables with rows & columns
- Uses Structured Query Language (SQL) for data management
- Examples: MySQL, PostgreSQL, SQLite, SQL Server
2️⃣ NoSQL Databases (Non-Relational)
- Stores data in key-value, document, graph, or column formats
- Flexible schema (no predefined structure)
- Best for big data and real-time applications
- Examples: MongoDB, Firebase, Cassandra, Redis
🔹 How Databases Work in Web Apps?
🔹 A user requests data from the website
🔹 The backend server processes the request
🔹 The server queries the database
🔹 The database returns the required data
🔹 The server sends the data to the user’s browser
Example:
📌 E-commerce Website → Stores products, users, orders in a database
📌 Social Media App → Stores posts, comments, likes
const mongoose = require("mongoose");
// Connect to MongoDB
mongoose.connect("mongodb://localhost:27017/mydatabase", {
useNewUrlParser: true,
useUnifiedTopology: true
});
// Define Schema
const userSchema = new mongoose.Schema({
name: String,
email: String
});
// Create Model
const User = mongoose.model("User", userSchema);
// Insert Data
const newUser = new User({ name: "John", email: "john@email.com" });
newUser.save().then(() => console.log("User saved!"));
2)create MongoBackend or other folder
install or create accoust in mongodb atlas
create in atlas a folder then add cluster with free and password username and
3. Connect to your MongoDB deployment.
Paste your connection string into the Command Palette. copy that
open vs code
connect mongogb to vscode through mongoURL
npm init -y
npm i modemon
npm i express
npm i mongoose
index.js
1)package.json
{
"name": "mongobackend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "module",
"dependencies": {
"express": "^4.21.2",
"mongoose": "^8.12.1",
"nodemon": "^3.1.9"
}
}
2)index.js to connect mongodb to vs code add new cluster and database access from url and network access and prev delete ip address create new ip address
import express from "express"
import mongoose from "mongoose"
const app=express()
const port=6000
const mongoURL="mongodb+srv://Username:Password@cluster0.jgpj2.mongodb.net/username"
const connectDb=async ()=>{
try{
await mongoose.connect(mongoURL)
console.log("Db Connected");
}catch (error) {
console.log("database error :",error);
}
}
app.get("/",(req,res)=>{
res.send("hello world")
})
app.listen(port,()=>{
connectDb()
console.log(`Server is started at ${port}`);
})
3)cluster browse collection
4)create models folder user.model.js
import mongoose from "mongoose"
const userSchema=new mongoose.Schema({
name:{
type:String,
required:true
},
age:{
type:Number,
required:true
},
email:{
type:String,
required:true,
unique:true
},
userName:{
type:String,
requred:true,
unique:true
}
},{timestamps:true})
const User = mongoose.model("User",userSchema)
export default User
5)index.js updated with express data transfer in mongodb atlas
import express from "express"
import mongoose from "mongoose"
import User from "./models/user.model.js"
const app=express()
const port=6000
const mongoURL="mongodb+srv://Username:password@cluster0.jgpj2.mongodb.net/Username"
app.use(express.json())
const connectDb=async ()=>{
try{
await mongoose.connect(mongoURL)
console.log("Db Connected");
}catch (error) {
console.log("database error :",error);
}
}
app.get("/",(req,res)=>{
res.send("hello world")
})
app.post("/create",async (req,res)=>{
try{
let {name,age,email,username}=req.body
const newuser=await User.create()({
name,
age,
email,
username
})
res.status(201).json({messege:"User Created"})
}catch (error){
res.status(400).json({messege:error})
}
})
app.listen(port,()=>{
connectDb()
console.log(`Server is started at ${port}`);
})
6)const Mongo URL should be save so add mongobackend folder create .env file and add you mongo url remove const
MONGODB_URL="mongodb+srv://Username:password*@cluster0.jgpj2.mongodb.net/username"
corrected index.js
import express from 'express';
import mongoose from "mongoose"
import dotenv from "dotenv"
dotenv.config()
import User from "./models/user.model.js"
const app=express() // Corrected: Initialize express here
const port=6000
// const app = "express" // Removed: This is incorrect. app should be the express instance.
app.use(express.json())
const connectDb=async ()=>{
try{
await mongoose.connect(process.env.MONGODB_URL)
console.log("Db Connected");
}catch (error) {
console.log("database error :",error);
}
}
app.get("/",(req,res)=>{
res.send("hello world")
})
app.post("/create",async (req,res)=>{
try{
let {name,age,email,username}=req.body
const newuser=await User.create({ // Corrected: Use create({}) and pass the object
name,
age,
email,
username
})
return res.status(201).json({message:"User Created"}) // Corrected: "messege" -> "message"
}catch (error){
console.error(error); // Add error logging
res.status(400).json({message:error.message}) // Corrected: "messege" -> "message" and send error message
}
})
app.get("/read",async (req,res)=>{
try{
const users=await User.find()
return res.status(200).json(users)
}catch(error){
console.error(error); // Add error logging
return res.status(400).json({message:"user not found"}) // Corrected: "messege" -> "message"
}
})
app.get("/read/:userName",async (req,res)=>{
try{
const users=await User.findOne({username:req.params.userName}) // Corrected: Changed userName to username to match schema.
return res.status(200).json(users)
} catch (error){
console.error(error); // Add error logging
return res.status(400).json({message:"user not found"}) // Corrected: "messege" -> "message"
}
})
app.put("/update/:id",async (req,res)=>{
try{
let {name,age}=req.body
let id=req.params.id
let user=await User.findByIdAndUpdate(id,{name,age},{new:true})
return res.status(200).json(user)
}catch (error){
console.error(error); // Add error logging
return res.status(400).json({message:"user not found"}) // Corrected: "messege" -> "message"
}
})
// Removed duplicate route for /update/:id
// app.put("/update/:id",async (req,res)=>{
// try{
// let {name,age}=req.body
// let user=await User.findByIdAndUpdate(id,{name,age},{new:true})
// return res.status(200).json({messege:"user updated"})
// }catch (error){
// return res.status(400).json({messege:"user not found"})
// }
// })
app.delete("/delete",async (req,res)=>{
try {
let {userName}=req.body // Expect username from body for delete
let user=await User.deleteOne({username: userName}) // Corrected: userName to username
return res.status(200).json({message: "User deleted successfully"}); // return a meaningful success message
} catch (error){
console.error(error); // Add error logging
return res.status(400).json({message:"user not found or deletion failed"}) // Corrected: "messege" -> "message"
}
})
app.listen(port,()=>{
connectDb()
console.log(`Server is started at ${port}`);
})
small corrected
import express from 'express';
import mongoose from "mongoose"
import dotenv from "dotenv"
dotenv.config()
import User from "./models/user.model.js"
//const app=express()
const port=6000
const app = "express"
app.use(express.json())
const connectDb=async ()=>{
try{
await mongoose.connect(process.env.MONGODB_URL)
console.log("Db Connected");
}catch (error) {
console.log("database error :",error);
}
}
app.get("/",(req,res)=>{
res.send("hello world")
})
app.post("/create",async (req,res)=>{
try{
let {name,age,email,username}=req.body
const newuser=await User.create()({
name,
age,
email,
username
})
return res.status(201).json({messege:"User Created"})
}catch (error){
res.status(400).json({messege:error})
}
})
app.get("/read",async (req,res)=>{
try{
const users=await User.find()
return res.status(200).json(users)
}catch(error){
return res.status(400).json({messege:"user not found"})
}
})
app.get("/read/:userName",async (req,res)=>{
try{
const users=await User.findOne({userName:req.params.userName})
return res.status(200).json(users)
} catch (error){
return res.status(400).json({messege:"user not found"})
}
})
app.put("/update/:id",async (req,res)=>{
try{
let {name,age}=req.body
let id=req.params.id
let user=await User.findByIdAndUpdate(id,{name,age},{new:true})
return res.status(200).json(user)
}catch (error){
return res.status(400).json({messege:"user not found"})
}
})
app.put("/update/:id",async (req,res)=>{
try{
let {name,age}=req.body
let user=await User.findByIdAndUpdate(id,{name,age},{new:true})
return res.status(200).json({messege:"user updated"})
}catch (error){
return res.status(400).json({messege:"user not found"})
}
})
app.delete("/delete",async (req,res)=>{
try {
let {name,age}=req.body
let user=await User.deleteOne({userName})
return res.status(200).json(user)
} catch (error){
return res.status(400).json({messege:"user not found"})
}
})
app.listen(port,()=>{
connectDb()
console.log(`Server is started at ${port}`);
})
7) create in mongobackend folder 3 folder 1)config 2)models 3)node modulus
in config db .js
import mongoose from "mongoose";
const connectDb=async ()=>{
try{
await mongoos.connect(process.env.MONGODB_URL)
console.log("Db Connected");
}catch (error){
console.log("database error:",error);
}
}
export default connectDb
18)User Authentication with image upload login and sign up
1)Authentication
- Authentication is the process of verifying the identity of a user or system.
- It ensures that the user is who they claim to be.
- Common authentication methods include passwords, OTPs (One-Time Passwords), biometrics, and multi-factor authentication (MFA).
- Example: When you log into a website using your username and password, the system checks if your credentials are correct.
2)Authorization
- Authorization determines what an authenticated user is allowed to do.
- It defines access levels and permissions for resources.
- Authorization happens after authentication.
- Example: After logging in, a regular user might have access to their profile, but an admin can access user management settings.
--------------------------------------------------BEGINS----------------------------------------------
3) project : Log in ,Sign Up, Log Out Project with Full Stack Development 2 folder frontend,backend
Authentication folder
in Authentication folder
make 2 folder
a)back-end
npm init -y
1)pakage.json install these pakage in backend
{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "module",
"dependencies": {
"bcryptjs": "^3.0.2",
"cloudinary": "^2.6.0",
"cookie": "^1.0.2",
"cors": "^2.8.5",
"dotenv": "^16.4.7",
"express": "^4.21.2",
"jsonwebtoken": "^9.0.2",
"mongoose": "^8.12.1",
"multer": "^1.4.5-lts.2",
"nodemon": "^3.1.9",
"parser": "^0.1.4"
}
}
2)Backend
1)config folder
in config 3 file
1)clodinary.js
import {v2 as cloudinary} from "cloudinary"
import { raw } from "express"
import fs from "fs"
import dotenv from "dotenv"
dotenv.config()
cloudinary.config({
cloud_name: process.env.CLOUDUNARY_CLOUD_NAME,
api_key: process.env.COUDINARY_API_KEY,
api_secret: process.env.CLUDINARY_API_SECRET,
})
const uploadImage=async(filePath)=>{
try{
if(!filePath){
return null
}
let result=await cloudinary.uploader.upload(filePath)
console.log(result);
fs.unlinkSync(filePath)
return result.secure_url
}catch(error){
fs.unlinkSync(filePath)
console.log(error);
}
}
export default uploadImage
2)db.js
import mongoose from "mongoose";
const connectDB=async()=>{
try{
await mongoose.connect(process.env.MONGODB_URL)
console.log("DB connected")
}catch(error){
console.log("DB not connected",error);
}
}
export default connectDB
3)token.js
import jwt from "jsonwebtoken"
const generateToken= async(id)=>{
let token=jwt.sign({id},process.env.JWT_SECRET,{expiresIn:"10d"})
return token
}
export default generateToken
2)controllers folder
1)auth.controllers.js
import User from "../models/user.model.js"
import uploadOnCloudinary from "../config/Cludinary.js"
import generateToken from "../config/token.js"
import bcrypt from "bcryptjs"
export const signUp=async(req,res)=>{
try{
const {firstName,lastName,email,password,userName}=req.body
if(!firstName || !lastName || !email || !password || !userName){
return res.status(400).json({message:"Send all details"})
}
let profileImage;
if(req.file){
profileImage=await uploadOnCloudinary(req.file.path)
}
let existUser=await User.findOne({email})
if(existUser){
return res.status(400).json({message:"User already exist"})
}
const hassedPassword=await bcrypt.hash(password,10)
const user=await User.create({
firstName,
lastName,
email,
password:hassedPassword,
userName,
profileImage
})
let token;
try {
token=generateToken(user._id)
} catch (error){
console.log(error)
}
res.cookie("token",token,{
httpOnly:true,
secure:process.env.NODE_ENVIRONMENT == "production",
sameSite:"strict",
maxAge:7*24*60*60*1000
})
return res.status(201).json({user:{
firstName,
lastName,
email,
userName,
profileImage
}})
}catch(error){
return res.status(500).json(error)
}
}
export const login = async (req,res)=>{
try{
const {email,password}=req.body
let existUser=await User.findOne({email})
if(!existUser){
return res.status(400).json({message:"user does not exist"})
}
let match=await bcrypt.compare(password,existUser.password)
if(!match){
return res.status(400).json({message:"Incorrect Password"})
}
let token;
try {
token=generateToken(existUser._id)
} catch (error){
console.log(error)
}
res.cookie("token",token,{
httpOnly:true,
secure:process.env.NODE_ENVIRONMENT == "production",
sameSite:"strict",
maxAge:7*24*60*60*1000
})
return res.status(200).json({user:{
firstName:existUser.firstName,
lastName:existUser.lastName,
email:existUser.email,
userName:existUser.userName
}})
}catch(error){
return res.status(500).json(error)
}
}
export const logout=async (req,res)=>{
try{
res.clearCookie("token")
return res.status(200).json({message:"Logout successfully"})
}catch(error){
return res.status(500).json(error)
}
}
export const getUserData=async (req,res)=>{
try{
let userId=req.userId
if(!userId){
return res.status(400).json({messege:"user id is not found"})
}
let user=await User.findById(userId)
if(!user){
return res.status(400).json({messege:"user not found"})
}
return res.status(200).json(user)
}catch(error){
return res.status(500).json({messege:error})
}
}
3)Middlewares
in Middlewares 2 file
1)CheckAuth.js
import { jwt } from "jsonwebtoken"
export const checkAuth=(req,res,next)=>{
try{
let token=req.cookies.token
if(!token){
return res.status(401).json({messege:"user is not authenticated"})
}
let decoded=jwt.verify(token,process.env.JWT_SECRET)
req.userId=decoded.id
next()
}catch(error){
return res.status(500).json({messege:"internal server error"})
}
}
2)Multer.js= npm i multer
import multer from "multer"
const storage=multer.diskStorage({
destination:(req,file,cb)=>{
cb(null,"./public")
},
filename:(req,file,cb)=>{
console.log(file);
cb(null,file.originalname)
}
})
export const upload=multer({storage})
4)models folder
user.model.js
import mongoose from "mongoose";
const userSchema=new mongoose.Schema({
firstName:{
type:String,
required:true,
},
lastName:{
type:String,
required:true,
},
userName:{
type:String,
required:true,
unique:true
},
email:{
type:String,
required:true,
unique:true
},
password:{
type:String,
required:true,
},
profileImage:{
type:String,
required:flase,
},
},{timestamps:true})
const User =mongoose.model("User",userSchema)
export default User
5)node modulus
6)public for adding accounts
7)route
auth.route.js
import express, {Router} from "express"
import { getUserData, login, logout, signUp } from "../controllers/auth.controllers.js"
import { checkAuth } from "../middlewares/checkAuth.js"
import { upload } from "../middlewares/multer.js"
const authRouter = express(Router())
authRouter.post("/signup",upload.single("profileImage"),signUp)
authRouter.post("/login",login)
authRouter.post("/logout",logout)
authRouter.get("/getuserdata",checkAuth,getUserData)
export default authRouter
8).env
this is main file for your project password do not show anyone this names are connected automatically you can save all then= npm run dev
PORT=8000
MONGODB_URL="mongodb+srv://Username:password@cluster0.jgpj2.mongodb.net/Authentication"
JWT_SECRET="JWT password" #vit mongodb atlas
NODE_ENVIRONMENT="devlopement"
CLOUDUNARY_CLOUD_NAME="" # please visit cloudnary website to get all
COUDINARY_API_KEY="" # please visit cloudnary website to get all
CLUDINARY_API_SECRET="" # please visit cloudnary website to get all
9)gitignore
10index.js
import express from "express"
import dotenv from "dotenv"
import connectDB from "./config/db.js"
import authRouter from "./route/auth.route.js"
import cookieParser from "cookie-parser"
import cors from "cors"
dotenv.config()
let app=express()
let port = process.env.PORT || 4000
app.use(express.json())
app.use(cors({
origin:"http://localhost:5173",
Credentials:true
}))
app.use(cookieParser)
app.use("/api",authRouter)
app.listen(port, () => {
connectDB()
console.log(`Server is started at ${port}`);
});
11)pakage-lock-json
12)pakage.json visit on 1st file of project
b)now create front-end folder
npm create vite@latest react JavaScript then install tailwind css in that frontend folder
npm install
npm install -D tailwindcss@3 postcss autoprefixer #dint work then add this
npx tailwindcss init -p #dint work then add this
npx tailwindcss init #congrats you install tailwind.config.js
1)node modulus with npm i
2)public vite.svg
3)src 3 folder
1)assets
2)context
Usercontext.jsx
import React, { createContext, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
export const dataContext=createContext()
function Usercontext({children}) {
let navigate=useNavigate()
let [userData,setuserData]=useState(null)
const serverUrl="http://localhost:8000"
const getUserdata=async()=>{
try {
let {data}=await axios.get(serverUrl + "/api/getuserdata",{
withCredentials:true
})
setuserData(data)
} catch (error) {
navigate("/login")
console.log(error);
}
}
const value={
serverUrl,userData,setuserData,getUserdata
}
useEffect(()=>{
getUserdata()
},[])
return (
<dataContext.Provider value={value}>
{children}
</dataContext.Provider>
)
}
export default Usercontext
3)pages 3 files
1)Home.jsx
import React from 'react'
import { dataContext } from '../context/Usercontext'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
function Home() {
let[userData,setUserData,getUserData,serverURL]=useContext(dataContext)
let navigate=useNavigate()
if(!userData){
navigate("/login")
}
const handleLogOut=async()=>{
try {
let data= await axios.post(serverURL + "/api/logout",{},{
withCredentials:true
})
setUserData(null)
} catch (error) {
console.log(error);
}
}
return (
<div className='w-full h-screen bg-[#0d1818] flex flex-col justify-center items-center gap-[20px]'>
<div className='w-[100px] h-[100px] rounded-full bg-white overflow-hidden relative: border-2 border-white'>
<img src={userData.profileImage} alt="" className='w-[100%] h-[100%]' />
</div>
<p className='text-white text-[20px]'>hey , <span className='text-[#0ce0e7] text-[25px] font-semibold'> {userData.firstName}</span> , welcome to ultimate backend Course</p>
<button className='bg-[#07c7e4] text-black px-[10px] py-[5px] rounded-lg' onClick={handleLogOut}>Log Out</button>
</div>
)
}
export default Home
2)login.jsx
import React, { useContext, useState } from 'react'
import { dataContext } from '../context/Usercontext'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
function login() {
let {serverUrl,userData,setUserData,getUserData}=useContext(dataContext)
let[email,setEmail]=useState(null)
let navigate =useNavigate()
let[password,setPassword]=useState(null)
const handleLogin=async()=>{
e.preventDefault()
try{
let {data}=await axios.post(serverUrl + "/api/login",{
email,password
},{withCredentials:true})
setUserData(data.user)
await getUserData()
if(userData){
navigate("/")
}
} catch (error){
alert(error.response.data.meseage)
}
}
return (
<div className='w-full h-[100vh] bg-black flex justify-center items-center '>
<div className='w-[90%] max-w-[500px] h-[500px] bg-[#141f1f] rounded flex flex-col justify-center items-center gap-[20px]'>
<h1 className='text-white text-[20px] font-semibold'>Login</h1>
<form className='w-[100%] flex flex-col items-center justify-center gap-[20px]' onSubmit={handleLogin}>
<input type="text" placeholder='email' className='w-[80%] h-[50%] bg-white outline-none border-none rounded-lg px-[10px] py-[5px]' value={Email} onChange={(e)=>setEmail(e.target.value)}/>
<input type="text" placeholder='password' className='w-[80%] h-[50%] bg-white outline-none border-none rounded-lg px-[10px] py-[5px]' value={password} onChange={(e)=>setPassword(e.target.value)}/>
<button className='bg-[#07c7e4] text-black px-[10px] py-[5px] rounded-lg'>Log in</button>
<p className='text-white cursor-pointer' onclick={()=>navigate("/login")}>Want to Create new account ? <span className='text-[#0ed3e1] '>Sign UP</span></p>
</form>
</div>
</div>
)
}
export default login
3)signUp.jsx
import React, { useRef } from 'react'
import profile from "../assets/profile.jpg"
import { dataContext } from '../context/Usercontext'
import axios from "axios"
import User from '../../../Backend/models/user.model'
function signup() {
let {serverUrl,userData,setUserData,getUserData}=useContext(dataContext)
let navigate=useNavigate()
let[firstName,setFirstName]=useState(null)
let[LastName,setLastName]=useState(null)
let[Username,setUserName]=useState(null)
let[email,setEmail]=useState(null)
let[password,setPassword]=useState(null)
let file=useRef(null)
const handleSignUP=async(e)=>{
e.preventDefault()
try{
let formdata=new FormData()
formdata.append("firstName",firstName)
formdata.append("lastName",lastName)
formdata.append("userName", UserName)
formdata.append("email", email)
formdata.append("password", password)
if(backendImage){
formdata.append("profileImage",backendImage)
}
let {data}=await axios.post(serverUrl + "/api/signup",formdata,{withCredentials:true,
headers:{"Content-type":"multipart/form-data"}
})
await getUserData()
setUserData(data)
navigate("/")
}catch(error){
console.log(data);
}
}
let [frontendImage,setFrontendImage]=useState(profile)
let [backendImage,setBackendImage]=useState(null)
function handleImage(e){
let file=e.target.files[0]
setBackendImage(file)
let image=URL.createObjectURL(file)
setFrontendImage(image)
}
return (
<div className='w-full h-[100vh] bg-black flex justify-center items-center '>
<div className='w-[90%] max-w-[500px] h-[500px] bg-[#141f1f] rounded flex flex-col justify-center items-center gap-[20px]'>
<h1 className='text-white text-[20px] font-semibold'>Sign Up</h1>
<form className='w-[100%] flex flex-col items-center justify-center gap-[20px]' onSubmit={handleSignUP}>
<input type="file" hidden ref={file} onChange={handleImage}/>
<div className='w-[100px] h-[100px] rounded-full bg-white overflow-hidden relative: border-2 border-white'>
<img src={frontendImage} alt="" className='w-[100%] h-[100%]' />
<div className='w-[100%] h-[100%] bg-black top-0 absolute opacity-0 hover:opacity-50 cursor-pointer flex justify-center items-center text-white font-semibold text-[20px]' onClick={()=>{file.current.click()}}>
+
</div>
</div>
<div className='w-[80%] h-[50px] flex justify-center items-center gap-[10px]'>
<input type="text" placeholder='first name' className='w-[50%] h-[100%] bg-white outline-none border-none rounded-lg px-[10px] py-[5px]' />
<input type="text" placeholder='last name' className='w-[50%] h-[100%] bg-white outline-none border-none rounded-lg px-[10px] py-[5px]' />
</div>
<input type="text" placeholder='firstName' className='w-[80%] h-[50%] bg-white outline-none border-none rounded-lg px-[10px] py-[5px]'value={firstName} onChange={(e)=>setFirstName(e.target.value)}/>
<input type="text" placeholder='lastName' className='w-[80%] h-[50%] bg-white outline-none border-none rounded-lg px-[10px] py-[5px]' value={lastName} onChange={(e)=>setLastName(e.target.value)}/>
<input type="text" placeholder='userName' className='w-[80%] h-[50%] bg-white outline-none border-none rounded-lg px-[10px] py-[5px]' value={UsertName} onChange={(e)=>setUserName(e.target.value)}/>
<input type="text" placeholder='email' className='w-[80%] h-[50%] bg-white outline-none border-none rounded-lg px-[10px] py-[5px]' value={Email} onChange={(e)=>setEmail(e.target.value)}/>
<input type="text" placeholder='password' className='w-[80%] h-[50%] bg-white outline-none border-none rounded-lg px-[10px] py-[5px]' value={password} onChange={(e)=>setPassword(e.target.value)}/>
<button className='bg-[#07c7e4] text-black px-[10px] py-[5px] rounded-lg'>SignUp</button>
<p className='text-white cursor-pointer' onclick={()=>navigate("/login")}>Already have an account ? <span className='text-[#0ed3e1] '>Login</span></p>
</form>
</div>
</div>
)
}
export default signup
App.css
App.jsx
import React, { useContext } from 'react'
import { Navigate, Route, Routes } from 'react-router-dom'
import signup from './pages/signup'
import login from './pages/login'
import Home from './pages/Home'
import { dataContext } from './context/Usercontext'
function App() {
let {userData,setUserData}=useContext(dataContext)
return (
<Routes>
<Route path='/signup' element={<signUp/>}/>
<Route path='/login' element={<Login/>}/>
<Route path='/' element={userData?<Home/>:<login/>}/>
</Routes>
)
}
export default App
index.css
@tailwind base; # if error occurs then this extension will help you
@tailwind components; # Tailwindcss InteliSence
@tailwind utilities;
main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { BrowserRouter } from 'react-router-dom'
import Usercontext from './context/Usercontext.jsx'
createRoot(document.getElementById('root')).render(
<BrowserRouter>
<Usercontext>
<App />
</Usercontext>
</BrowserRouter>
)
4)gitignore
5)islint.config.js
6)index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Log in,signUp,LogOut</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
7)pakage.lock.json
8)pakage.json
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@tailwindcss/vite": "^4.0.15",
"axios": "^1.8.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^7.4.0"
},
"devDependencies": {
"@eslint/js": "^9.21.0",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.21",
"eslint": "^9.21.0",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.19",
"globals": "^15.15.0",
"postcss": "^8.5.3",
"tailwindcss": "^3.4.17",
"vite": "^6.2.0"
}
}
9)README.md
10)Tailwind config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html*",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
11)vite.config.js
12)gitignore
------------------------------------------ENDS---------------------------------------------------
------------------------------------------START---------------------------------------------------
18)Video calling website
npm create vite@latest react javascript
npm i @zegocloud/uikit-prebuilt //this is for vedioCalling put in terminal
1)node modulus
2)public
3)src
a)assets
b)pages
1)Home.jsx
import React, {useState} from "react";
import { useNavigate } from "react-router-dom";
function Home(){
let navigate=useNavigate()
let[input,setInput]=useState("")
function handleJoin(){
navigate( `/room/${input}`)
}
return(
<div id='home'>
<input type='text' placeholder="enter room id" value={input} onChange={(e)=>setInput(e.target.value)}/>
<button onClick={handleJoin}>Join Now</button>
</div>
)
}
export default Home
2)VideoRoom.jsx
import {ZegoUIkitPrebuilt} from '@zegocloud/zego-ZegoUIkitPrebuilt';
import React from 'react'
import { useParams } from 'react-router-dom';
function VideoRoom() {
let{roomId}=useParams()
const mymeeting=async (element)=>{
const appID = "passwordId"; //please visit zegocloud.com and sign new project
const serverSecret = "Secretpassword"; //on console.zegocloud.com
const kitToken=ZegoUIkitPrebuilt.generatekitTokenForTest(appID,serverSecret,roomId,Date.now().toString(),"krishna")
const zp = ZegoUIkitPrebuilt.create(kitToken);
zp.joinRoom({
container: element,
sharedLinks:[
{
name:'copy link',
url:`http://localhost:5173/room/${roomId}`,
},
],
scenario:{
mode: ZegoUIkitPrebuilt.OneONoneCall,
},
})
}
return (
<div>
<div ref={mymeeting}/>
</div>
)
}
export default VideoRoom
4)App.jsx
import React from 'react'
import { Route, Routes } from 'react-router-dom'
import Home from './pages/Home'
import VideoRoom from './pages/videoRoom'
function App() {
return (
<Routes>
<Route path='/' element={<Home/>}/>
<Route path='/room/:roomId' element={<VideoRoom/>}/>
</Routes>
)
}
export default App
5)index.css style of video room
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
background: rgb(18, 24, 29);
display: flex;
align-items:center;
justify-cotent:center;
width:100%;
height:100vh;
}
#home{
width: 100%;
height: 100vh;
display: flex;
align-items:center;
justify-cotent:center;
flex-direction:column;
gap:20px;
}
input{
outline:none;
border:none;
padding: 10px 20px;
width: 400px;
border-radius:20px;
font-size: 20px;
}
button{
border:none;
padding:5px 10px;
background-color: aqua;
color: black;
border-radius:10px;
font-size:20px;
}
6)Main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import {BrowserRouter} from 'react-router-dom'
createRoot(document.getElementById('root')).render(
<StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>,
)
7)gitignore
8)eslint.config.js
9)index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vedio Calling by krishna patil Rajput</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
10)package.lock.json
11)Package.json
{
"name": "vediocalling",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@zegocloud/zego-uikit-prebuilt": "^2.14.1-beta",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^7.4.0"
},
"devDependencies": {
"@eslint/js": "^9.21.0",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.21.0",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.19",
"globals": "^15.15.0",
"vite": "^6.2.0"
}
}
12)README.md
13)vite.config.js
-----------------------------------------------Ends-------------------------------------------
-----------------------------------------------Starts-------------------------------------------
19)Make My Trip
1)Backend
in config
1)Cloudinary.js
import { v2 as cloudinary } from "cloudinary";
import fs from "fs";
import dotenv from "dotenv";
dotenv.config();
cloudinary.config({
cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
api_key: process.env.CLOUDINARY_API_KEY,
api_secret: process.env.CLOUDINARY_API_SECRET,
});
const uploadImage = async (filePath) => {
try {
// if (!filePath) {
// console.log("No file provided");
// return null;
// }
let result = await cloudinary.uploader.upload(filePath);
console.log(result);
fs.unlinkSync(filePath);
return result.secure_url;
} catch (error) {
if (filePath) {
fs.unlinkSync(filePath);
}
console.log("Error uploading image:", error);
return null;
}
};
export default uploadImage;
2) db .js
import mongoose from 'mongoose';
const MONGO_URI = process.env.MONGO_URI || 'mongodb://localhost:27017/MAKEMYTRIP_CLONE';
const connectDB = async () => {
try {
const conn = await mongoose.connect(MONGO_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
console.log(`✅ MongoDB connected at: ${conn.connection.host}`);
} catch (error) {
console.error(`❌ MongoDB connection failed: ${error.message}`);
process.exit(1);
}
};
export default connectDB;
3)token.js
import jwt from 'jsonwebtoken';
const JWT_SECRET = process.env.JWT_SECRET || 'DEFAULT_SECRET';
export const generateToken = (user) => {
return jwt.sign(
{ id: user._id, email: user.email, role: user.role },
JWT_SECRET,
{ expiresIn: '2h' }
);
};
export const verifyToken = (req, res, next) => {
const authHeader = req.headers.authorization;
if (!authHeader || !authHeader.startsWith('Bearer ')) {
return res.status(401).json({ message: 'Access denied. No token provided.' });
}
const token = authHeader.split(' ')[1];
try {
const decoded = jwt.verify(token, JWT_SECRET);
req.user = decoded;
next();
} catch (err) {
res.status(401).json({ message: 'Invalid or expired token.' });
}
};
export const isAdmin = (req, res, next) => {
if (req.user && req.user.role === 'admin') return next();
return res.status(403).json({ message: 'Access denied. Admins only.' });
};
2) controller file
1)authcontroller.js
import User from "../models/userModel.js";
import uploadOnCloudinary from "../config/Clodinary.js";
import { generateToken, verifyToken, isAdmin } from "../config/token.js";
import bcrypt from "bcryptjs"
export const signUp=async(req,res)=>{
try{
const {firstName,lastName,email,password,userName}=req.body
if(!firstName || !lastName || !email || !password || !userName){
return res.status(400).json({message:"Send all details"})
}
let profileImage;
if(req.file){
profileImage=await uploadOnCloudinary(req.file.path)
}
let existUser=await User.findOne({email})
if(existUser){
return res.status(400).json({message:"User already exist"})
}
const hassedPassword=await bcrypt.hash(password,10)
const user=await User.create({
firstName,
lastName,
email,
password:hassedPassword,
userName,
profileImage
})
let token;
try {
token=generateToken(user._id)
} catch (error){
console.log(error)
}
res.cookie("token",token,{
httpOnly:true,
secure:process.env.NODE_ENVIRONMENT == "production",
sameSite:"strict",
maxAge:7*24*60*60*1000
})
return res.status(201).json({user:{
firstName,
lastName,
email,
userName,
profileImage
}})
}catch(error){
return res.status(500).json(error)
}
}
export const login = async (req,res)=>{
try{
const {email,password}=req.body
let existUser=await User.findOne({email})
if(!existUser){
return res.status(400).json({message:"user does not exist"})
}
let match=await bcrypt.compare(password,existUser.password)
if(!match){
return res.status(400).json({message:"Incorrect Password"})
}
let token;
try {
token=generateToken(existUser._id)
} catch (error){
console.log(error)
}
res.cookie("token",token,{
httpOnly:true,
secure:process.env.NODE_ENVIRONMENT == "production",
sameSite:"strict",
maxAge:7*24*60*60*1000
})
return res.status(200).json({user:{
firstName:existUser.firstName,
lastName:existUser.lastName,
email:existUser.email,
userName:existUser.userName
}})
}catch(error){
return res.status(500).json(error)
}
}
export const logout=async (req,res)=>{
try{
res.clearCookie("token")
return res.status(200).json({message:"Logout successfully"})
}catch(error){
return res.status(500).json(error)
}
}
export const getUserData=async (req,res)=>{
try{
let userId=req.userId
if(!userId){
return res.status(400).json({messege:"user id is not found"})
}
let user=await User.findById(userId)
if(!user){
return res.status(400).json({messege:"user not found"})
}
return res.status(200).json(user)
}catch(error){
return res.status(500).json({messege:error})
}
}
2)BookingControllers.js
import Booking from '../models/Booking.js';
import Hotel from '../models/Hotel.js';
import mongoose from 'mongoose';
export const getUserBookings = async (req, res) => {
try {
const userId = req.params.userId;
const bookings = await Booking.find({ userId }).populate('hotelId');
res.status(200).json(bookings);
} catch (error) {
res.status(500).json({ message: 'Error fetching user bookings' });
}
};
export const createBooking = async (req, res) => {
try {
const { userId, hotelId, roomType, checkInDate, checkOutDate, guests } = req.body;
if (!userId || !hotelId || !roomType || !checkInDate || !checkOutDate || !guests) {
return res.status(400).json({ message: 'Missing required fields' });
}
const hotel = await Hotel.findById(hotelId);
if (!hotel) return res.status(404).json({ message: 'Hotel not found' });
const room = hotel.rooms.find(r => r.roomType === roomType);
if (!room || room.availableRooms <= 0) {
return res.status(400).json({ message: 'Selected room type not available' });
}
room.availableRooms -= 1;
await hotel.save();
const booking = new Booking({
userId,
hotelId,
roomType,
checkInDate,
checkOutDate,
guests,
});
const savedBooking = await booking.save();
res.status(201).json(savedBooking);
} catch (error) {
console.error('Booking error:', error);
res.status(500).json({ message: 'Server error' });
}
};
export const getAllBookings = async (req, res) => {
try {
const bookings = await Booking.find().populate('hotelId');
res.status(200).json(bookings);
} catch (error) {
res.status(500).json({ message: 'Error fetching bookings' });
}
};
export const getBookingById = async (req, res) => {
try {
const booking = await Booking.findById(req.params.id).populate('hotelId');
if (!booking) return res.status(404).json({ message: 'Booking not found' });
res.status(200).json(booking);
} catch (error) {
res.status(500).json({ message: 'Error fetching booking' });
}
};
export const cancelBooking = async (req, res) => {
try {
const booking = await Booking.findById(req.params.id);
if (!booking) return res.status(404).json({ message: 'Booking not found' });
const hotel = await Hotel.findById(booking.hotelId);
const room = hotel.rooms.find(r => r.roomType === booking.roomType);
if (room) room.availableRooms += 1;
await hotel.save();
await booking.remove();
res.status(200).json({ message: 'Booking cancelled successfully' });
} catch (error) {
res.status(500).json({ message: 'Error cancelling booking' });
}
};
3)FlightControllers.js
import Flight from "../models/Flight.js";
export const getAllFlights = async (req, res) => {
try {
const flights = await Flight.find();
res.status(200).json(flights);
} catch (error) {
res.status(500).json({ message: "Failed to fetch flights", error });
}
};
export const getFlightById = async (req, res) => {
try {
const flight = await Flight.findById(req.params.id);
if (!flight) return res.status(404).json({ message: "Flight not found" });
res.status(200).json(flight);
} catch (error) {
res.status(500).json({ message: "Failed to fetch flight", error });
}
};
export const createFlight = async (req, res) => {
try {
const flight = new Flight(req.body);
await flight.save();
res.status(201).json({ message: "Flight created successfully", flight });
} catch (error) {
res.status(400).json({ message: "Failed to create flight", error });
}
};
export const updateFlight = async (req, res) => {
try {
const updatedFlight = await Flight.findByIdAndUpdate(req.params.id, req.body, { new: true });
if (!updatedFlight) return res.status(404).json({ message: "Flight not found" });
res.status(200).json({ message: "Flight updated", flight: updatedFlight });
} catch (error) {
res.status(400).json({ message: "Failed to update flight", error });
}
};
export const deleteFlight = async (req, res) => {
try {
const deletedFlight = await Flight.findByIdAndDelete(req.params.id);
if (!deletedFlight) return res.status(404).json({ message: "Flight not found" });
res.status(200).json({ message: "Flight deleted successfully" });
} catch (error) {
res.status(500).json({ message: "Failed to delete flight", error });
}
};
export const searchFlights = async (req, res) => {
try {
const { from, to, date } = req.query;
const query = {};
if (from) query.from = new RegExp(from, "i");
if (to) query.to = new RegExp(to, "i");
if (date) query.date = date;
const flights = await Flight.find(query);
res.status(200).json(flights);
} catch (error) {
res.status(500).json({ message: "Failed to search flights", error });
}
};
4)HotelControllers.js
import Hotel from '../models/Hotel.js';
export const getAllHotels = async (req, res) => {
try {
const hotels = await Hotel.find();
res.status(200).json(hotels);
} catch (err) {
res.status(500).json({ message: err.message });
}
};
export const getHotelById = async (req, res) => {
try {
const hotel = await Hotel.findById(req.params.id);
if (!hotel) return res.status(404).json({ message: 'Hotel not found' });
res.status(200).json(hotel);
} catch (err) {
res.status(500).json({ message: err.message });
}
};
export const createHotel = async (req, res) => {
const { name, city, description, pricePerNight, imageUrl, rating } = req.body;
const newHotel = new Hotel({
name,
city,
description,
pricePerNight,
imageUrl,
rating,
});
try {
const savedHotel = await newHotel.save();
res.status(201).json(savedHotel);
} catch (err) {
res.status(400).json({ message: err.message });
}
};
export const updateHotel = async (req, res) => {
try {
const updatedHotel = await Hotel.findByIdAndUpdate(req.params.id, req.body, {
new: true,
});
if (!updatedHotel) return res.status(404).json({ message: 'Hotel not found' });
res.status(200).json(updatedHotel);
} catch (err) {
res.status(400).json({ message: err.message });
}
};
export const deleteHotel = async (req, res) => {
try {
const deletedHotel = await Hotel.findByIdAndDelete(req.params.id);
if (!deletedHotel) return res.status(404).json({ message: 'Hotel not found' });
res.status(200).json({ message: 'Hotel deleted successfully' });
} catch (err) {
res.status(500).json({ message: err.message });
}
};
export const searchHotels = async (req, res) => {
const { city, minPrice, maxPrice, minRating } = req.query;
let query = {};
if (city) query.city = new RegExp(city, 'i');
if (minPrice || maxPrice) {
query.pricePerNight = {};
if (minPrice) query.pricePerNight.$gte = Number(minPrice);
if (maxPrice) query.pricePerNight.$lte = Number(maxPrice);
}
if (minRating) query.rating = { $gte: Number(minRating) };
try {
const hotels = await Hotel.find(query);
res.status(200).json(hotels);
} catch (err) {
res.status(500).json({ message: err.message });
}
};
3)middleware file
1)check auth.js
import jwt from "jsonwebtoken";
import User from "../models/user.js";
export const checkAuth = async (req, res, next) => {
const token = req.headers.authorization?.split(" ")[1];
if (!token) return res.status(401).json({ message: "Unauthorized" });
try {
const decoded = jwt.verify(token, process.env.JWT_SECRET);
req.user = await User.findById(decoded.id).select("-password");
next();
} catch (err) {
return res.status(401).json({ message: "Invalid token" });
}
};
2)multer.js
import multer from "multer";
import path from "path";
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "uploads/");
},
filename: function (req, file, cb) {
const ext = path.extname(file.originalname);
cb(null, Date.now() + ext);
},
});
export const upload = multer({ storage });
3)rolecheck.js
export const isAdmin = (req, res, next) => {
if (req.user && req.user.role === "admin") {
next();
} else {
res.status(403).json({ message: "Access denied: Admins only" });
}
};
export default isAdmin;
4)models
1)booking.js
import mongoose from 'mongoose';
const bookingSchema = new mongoose.Schema({
user: {
type: mongoose.Schema.Types.ObjectId,
ref: 'User',
required: true,
},
type: {
type: String,
enum: ['flight', 'hotel'],
required: true,
},
flight: {
type: mongoose.Schema.Types.ObjectId,
ref: 'Flight',
default: null,
},
hotel: {
type: mongoose.Schema.Types.ObjectId,
ref: 'Hotel',
default: null,
},
roomType: {
type: String,
enum: ['Single', 'Double', 'Deluxe', 'Suite'],
},
guests: {
type: Number,
},
checkInDate: {
type: Date,
},
checkOutDate: {
type: Date,
},
bookingDate: {
type: Date,
default: Date.now,
},
status: {
type: String,
enum: ['confirmed', 'cancelled', 'pending'],
default: 'pending',
},
passengers: [{
name: String,
age: Number,
gender: String,
}],
totalPrice: {
type: Number,
required: true,
},
}, {
timestamps: true,
});
export default mongoose.model('Booking', bookingSchema);
2)Flight.js
import mongoose from 'mongoose';
const flightSchema = new mongoose.Schema({
flightNumber: {
type: String,
required: true,
unique: true,
},
airline: {
type: String,
required: true,
},
departureCity: {
type: String,
required: true,
},
arrivalCity: {
type: String,
required: true,
},
departureTime: {
type: Date,
required: true,
},
arrivalTime: {
type: Date,
required: true,
},
duration: {
type: String,
},
classType: {
type: String,
enum: ['Economy', 'Business', 'First Class'],
default: 'Economy',
},
price: {
type: Number,
required: true,
},
availableSeats: {
type: Number,
required: true,
},
totalSeats: {
type: Number,
required: true,
},
status: {
type: String,
enum: ['active', 'cancelled'],
default: 'active',
},
}, {
timestamps: true,
});
export default mongoose.model('Flight', flightSchema);
3)hotel.js
import mongoose from 'mongoose';
const hotelSchema = new mongoose.Schema({
name: {
type: String,
required: true,
},
city: {
type: String,
required: true,
},
address: {
type: String,
required: true,
},
images: [
{
type: String,
}
],
description: {
type: String,
},
amenities: [
{
type: String,
}
],
rooms: [
{
roomType: {
type: String,
enum: ['Single', 'Double', 'Deluxe', 'Suite'],
required: true,
},
pricePerNight: {
type: Number,
required: true,
},
availableRooms: {
type: Number,
required: true,
},
totalRooms: {
type: Number,
required: true,
}
}
],
pricePerNight: {
type: Number,
required: false,
},
rating: {
type: Number,
min: 0,
max: 5,
default: 3,
},
status: {
type: String,
enum: ['active', 'inactive'],
default: 'active',
},
}, {
timestamps: true,
});
hotelSchema.pre('save', function(next) {
if (this.rooms && this.rooms.length > 0) {
this.pricePerNight = this.rooms[0].pricePerNight;
}
next();
});
const Hotel = mongoose.model('Hotel', hotelSchema);
export default Hotel;
4)user.js
import mongoose from 'mongoose';
import bcrypt from 'bcryptjs';
const userSchema = new mongoose.Schema({
name: {
type: String,
required: [true, 'Please enter your name'],
trim: true,
},
email: {
type: String,
required: [true, 'Please enter your email'],
unique: true,
lowercase: true,
trim: true,
},
password: {
type: String,
required: [true, 'Please enter your password'],
minlength: 6,
},
phone: {
type: String,
default: '',
},
role: {
type: String,
enum: ['user', 'admin'],
default: 'user',
},
bookings: [
{
type: mongoose.Schema.Types.ObjectId,
ref: 'Booking',
}
],
}, {
timestamps: true,
});
userSchema.pre('save', async function (next) {
if (!this.isModified('password')) return next();
const salt = await bcrypt.genSalt(10);
this.password = await bcrypt.hash(this.password, salt);
next();
});
userSchema.methods.matchPassword = async function (enteredPassword) {
return await bcrypt.compare(enteredPassword, this.password);
};
const User = mongoose.models.User || mongoose.model('User', userSchema);
export default User;
5)usermodel.js
import mongoose from "mongoose";
const userSchema=new mongoose.Schema({
firstName:{
type:String,
required:true,
},
lastName:{
type:String,
required:true,
},
userName:{
type:String,
required:true,
unique:true
},
email:{
type:String,
required:true,
unique:true
},
password:{
type:String,
required:true,
},
profileImage:{
type:String,
required:false,
},
},{timestamps:true})
const User =mongoose.model("User",userSchema)
export default User
6)nodemodulus
7)pages
1)searchFights.jsx
import React, { useState, useEffect } from 'react';
import api from '../services/api';
import { Spinner, Alert, Card, Button, Form, Row, Col } from 'react-bootstrap';
const Flights = () => {
const [flights, setFlights] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
const [filters, setFilters] = useState({
from: '',
to: '',
date: '',
maxPrice: '',
});
const fetchFlights = async () => {
try {
setLoading(true);
const res = await api.get('/api/flights', { params: filters });
setFlights(res.data);
} catch (err) {
setError('Error fetching flights.');
} finally {
setLoading(false);
}
};
useEffect(() => {
fetchFlights();
}, []);
const handleChange = (e) => {
setFilters({ ...filters, [e.target.name]: e.target.value });
};
const handleSearch = () => {
fetchFlights();
};
return (
<div className="container my-5">
<h2 className="mb-4">
Search Flights</h2>
Search Flights</h2> <Form className="mb-4">
<Row>
<Col md={3}>
<Form.Control
placeholder="From"
name="from"
value={filters.from}
onChange={handleChange}
/>
</Col>
<Col md={3}>
<Form.Control
placeholder="To"
name="to"
value={filters.to}
onChange={handleChange}
/>
</Col>
<Col md={3}>
<Form.Control
type="date"
name="date"
value={filters.date}
onChange={handleChange}
/>
</Col>
<Col md={2}>
<Form.Control
type="number"
placeholder="Max Price"
name="maxPrice"
value={filters.maxPrice}
onChange={handleChange}
/>
</Col>
<Col md={1}>
<Button onClick={handleSearch}>Search</Button>
</Col>
</Row>
</Form>
{loading ? (
<Spinner animation="border" />
) : error ? (
<Alert variant="danger">{error}</Alert>
) : (
<Row>
{flights.map((flight) => (
<Col md={4} key={flight._id} className="mb-4">
<Card>
<Card.Body>
<Card.Title>{flight.airline}</Card.Title>
<Card.Text>
{flight.from} → {flight.to}
<br />
Date: {flight.date}
<br />
Price: ₹{flight.price}
</Card.Text>
<Button variant="primary">Book Now</Button>
</Card.Body>
</Card>
</Col>
))}
</Row>
)}
</div>
);
};
export default Flights;
2)searchHotels.jsx
import React, { useState, useEffect } from 'react';
import api from '../services/api';
import { Spinner, Alert, Card, Button, Form, Row, Col } from 'react-bootstrap';
const Hotels = () => {
const [hotels, setHotels] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
const [filters, setFilters] = useState({
location: '',
date: '',
maxPrice: '',
});
const fetchHotels = async () => {
try {
setLoading(true);
const res = await api.get('/api/hotels', { params: filters });
setHotels(res.data);
} catch (err) {
setError('Error fetching hotels.');
} finally {
setLoading(false);
}
};
useEffect(() => {
fetchHotels();
}, []);
const handleChange = (e) => {
setFilters({ ...filters, [e.target.name]: e.target.value });
};
const handleSearch = () => {
fetchHotels();
};
return (
<div className="container my-5">
<h2 className="mb-4">
Search Hotels</h2>
Search Hotels</h2> <Form className="mb-4">
<Row>
<Col md={4}>
<Form.Control
placeholder="Location"
name="location"
value={filters.location}
onChange={handleChange}
/>
</Col>
<Col md={4}>
<Form.Control
type="date"
name="date"
value={filters.date}
onChange={handleChange}
/>
</Col>
<Col md={3}>
<Form.Control
type="number"
placeholder="Max Price"
name="maxPrice"
value={filters.maxPrice}
onChange={handleChange}
/>
</Col>
<Col md={1}>
<Button onClick={handleSearch}>Search</Button>
</Col>
</Row>
</Form>
{loading ? (
<Spinner animation="border" />
) : error ? (
<Alert variant="danger">{error}</Alert>
) : (
<Row>
{hotels.map((hotel) => (
<Col md={4} key={hotel._id} className="mb-4">
<Card>
<Card.Img variant="top" src={hotel.image || 'https://via.placeholder.com/400x200'} />
<Card.Body>
<Card.Title>{hotel.name}</Card.Title>
<Card.Text>
{hotel.location}
<br />
₹{hotel.price}/night
</Card.Text>
<Button variant="primary">Book Now</Button>
</Card.Body>
</Card>
</Col>
))}
</Row>
)}
</div>
);
};
export default Hotels;
8)Routes
1)authRoutes.js
import express, { Router } from "express";
// import authRouter from "./routes/authRouter.js";
import { getUserData, login, logout, signUp } from "../controllers/authControllers.js"
import { checkAuth } from "../Middlewares/CheckAuth.js"
import { upload } from "../Middlewares/Multer.js"
import { Routes } from "react-router-dom";
const authRouter = Router();
authRouter.post("/signup", upload.single("profileImage"), signUp);
authRouter.post("/login", login);
authRouter.post("/logout", logout);
authRouter.get("/getuserdata", checkAuth, getUserData);
export default authRouter;
// @desc Register new user
// @route POST /api/auth/register
// @access Public
// authRouter.post('/register', asyncHandler(async (req, res) => {
// const { name, email, password, phone } = req.body;
// // Check if user exists
// const userExists = await User.findOne({ email });
// if (userExists) {
// res.status(400);
// throw new Error('User already exists');
// }
// // Create user
// const user = await User.create({ name, email, password, phone });
// if (user) {
// res.status(201).json({
// _id: user._id,
// name: user.name,
// email: user.email,
// phone: user.phone,
// token: generateToken(user._id),
// });
// } else {
// res.status(400);
// throw new Error('Invalid user data');
// }
// }));
// // @desc Authenticate user and get token
// // @route POST /api/auth/login
// // @access Public
// router.post('/login', asyncHandler(async (req, res) => {
// const { email, password } = req.body;
// const user = await User.findOne({ email });
// if (user && (await user.matchPassword(password))) {
// res.json({
// _id: user._id,
// name: user.name,
// email: user.email,
// phone: user.phone,
// token: generateToken(user._id),
// });
// } else {
// res.status(401);
// throw new Error('Invalid email or password');
// }
// }));
// // @desc Get user profile
// // @route GET /api/auth/profile
// // @access Private
// router.get('/profile', protect, asyncHandler(async (req, res) => {
// const user = await User.findById(req.user._id).select('-password');
// if (user) {
// res.json(user);
// } else {
// res.status(404);
// throw new Error('User not found');
// }
// }));
// // Generate JWT token
// const generateToken = (id) => {
// return jwt.sign({ id }, process.env.JWT_SECRET, {
// expiresIn: '30d',
// });
// };
// module.exports = router;
2)BookingRoute.js
import express from "express";
import {
createBooking,
getUserBookings,
getBookingById,
cancelBooking,
getAllBookings,
} from "../controllers/BookingController.js";
import { checkAuth } from "../Middlewares/CheckAuth.js"
import { isAdmin } from "../middlewares/roleCheck.js";
const router = express.Router();
// ✅ User Routes
router.post("/", checkAuth, createBooking);
router.get("/my", checkAuth, getUserBookings);
router.get("/:id", checkAuth, getBookingById);
router.delete("/:id", checkAuth, cancelBooking);
// ✅ Admin Routes
router.get("/", checkAuth, isAdmin, getAllBookings);
export default router;
3)FlightRoute.js
import express from "express";
import {
getAllFlights,
getFlightById,
createFlight,
updateFlight,
deleteFlight,
searchFlights,
} from "../controllers/FlightControllers.js";
import { checkAuth } from "../Middlewares/CheckAuth.js";
import isAdmin from "../middlewares/roleCheck.js";
const router = express.Router();
router.get("/", getAllFlights);
router.get("/search", searchFlights);
router.get("/:id", getFlightById);
router.post("/", checkAuth, isAdmin, createFlight);
router.put("/:id", checkAuth, isAdmin, updateFlight);
router.delete("/:id", checkAuth, isAdmin, deleteFlight);
export default router;
4)HotelRoute.js
import express from "express";
import {
getAllHotels,
getHotelById,
searchHotels,
createHotel,
updateHotel,
deleteHotel,
} from "../controllers/hotelController.js";
import { checkAuth } from "../Middlewares/CheckAuth.js";
import { isAdmin } from "../middlewares/roleCheck.js";
const router = express.Router();
router.get("/", getAllHotels);
router.get("/search", searchHotels);
router.get("/:id", getHotelById);
router.post("/", checkAuth, isAdmin, createHotel);
router.put("/:id", checkAuth, isAdmin, updateHotel);
router.delete("/:id", checkAuth, isAdmin, deleteHotel);
export default router;
9).env
PORT=5000
MONGO_URI=mongodb://localhost:5000/MAKEMYTRIP_CLONE
JWT_SECRET=FIND BY OWN
NODE_ENVIRONMENT="devlopement"
CLOUDUNARY_CLOUD_NAME="FIND BY OWN"
COUDINARY_API_KEY="FIND BY OWN"
CLUDINARY_API_SECRET="FIND BY OWN"
10)pakage.json
{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "nodemon server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "module",
"dependencies": {
"axios": "^1.8.4",
"bcryptjs": "^3.0.2",
"cloudinary": "^2.6.0",
"cookie": "^1.0.2",
"cors": "^2.8.5",
"dotenv": "^16.5.0",
"express": "^5.1.0",
"jsonwebtoken": "^9.0.2",
"mongoose": "^8.13.2",
"multer": "^1.4.5-lts.2",
"parser": "^0.1.4",
"react-router-dom": "^7.5.0"
},
"devDependencies": {
"nodemon": "^3.1.10"
}
}
11)server.js
import express from "express";
import dotenv from "dotenv";
import cors from "cors";
import connectDB from "./config/db.js";
import authRouter from "./Routes/authRoutes.js";
import flightRoutes from "./Routes/FlightRoute.js";
import hotelRoutes from "./Routes/HotelRoute.js";
import bookingRoutes from "./Routes/BookingRoute.js";
dotenv.config();
const app = express();
const PORT = process.env.PORT || 5000;
app.use(cors());
app.use(express.json());
app.use("/api/auth", authRouter);
app.use("/api/flights", flightRoutes);
app.use("/api/hotels", hotelRoutes);
app.use("/api/bookings", bookingRoutes);
app.get("/", (req, res) => {
res.send("🌐 Make My Trip Clone Backend is Running!");
});
connectDB().then(() => {
app.listen(PORT, () => {
console.log(`🚀 Server started at http://localhost:${PORT}`);
});
});
2)Frontend
npm create vite@latest
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
folder name
public
in src
assets then
Components
1)Header.jsx
const Header = () => (
<header className="header">
<div className="logo">MakeMyTrip</div>
<nav>
<a href="#">Flights</a>
<a href="#">Hotels</a>
<a href="#">Holidays</a>
<a href="#">Offers</a>
</nav>
</header>
);
export default Header;
2)BookingAPP.jsx
import React, { useState } from 'react';
import Flight from './Flight';
import Hotel from './Hotel';
export default function BookingApp() {
const [tab, setTab] = useState("flight");
return (
<div className="min-h-screen bg-gradient-to-br from-sky-200 to-blue-400 flex flex-col items-center p-8">
<div className="flex gap-4 mb-6">
<button
className={`px-6 py-2 rounded-full ${tab === "flight" ? "bg-blue-600 text-white" : "bg-white text-black"}`}
onClick={() => setTab("flight")}
>
Flight
</button>
<button
className={`px-6 py-2 rounded-full ${tab === "hotel" ? "bg-blue-600 text-white" : "bg-white text-black"}`}
onClick={() => setTab("hotel")}
>
Hotel
</button>
</div>
{tab === "flight" ? <Flight /> : <Hotel />}
</div>
);
}
3)FlightAPP.jsx
import React, { useState, useEffect } from 'react';
export default function Flight() {
const [flightTime] = useState(new Date("2025-05-01T15:00:00"));
const [timeLeft, setTimeLeft] = useState("");
useEffect(() => {
const timer = setInterval(() => {
const now = new Date();
const diff = flightTime - now;
if (diff > 0) {
const hours = Math.floor(diff / (1000 * 60 * 60));
const minutes = Math.floor((diff / (1000 * 60)) % 60);
setTimeLeft(`${hours}h ${minutes}m left`);
} else {
setTimeLeft("Flight departed");
}
}, 1000);
return () => clearInterval(timer);
}, [flightTime]);
return (
<div className="bg-white p-6 rounded-xl shadow-md w-full max-w-md">
<h2 className="text-xl font-semibold mb-4">Flight Booking</h2>
<p>🛫 From: Bangalore</p>
<p>🛬 To: Delhi</p>
<p>⏰ Departure: May 1st, 2025, 3:00 PM</p>
<p className="text-blue-600 font-bold mt-2">{timeLeft}</p>
<button className="mt-4 px-4 py-2 bg-blue-600 text-white rounded">Book Flight</button>
</div>
);
}
4)HotelApp.jsx
import React, { useState, useEffect } from 'react';
export default function Hotel() {
const [checkInTime] = useState(new Date("2025-05-01T12:00:00"));
const [timeLeft, setTimeLeft] = useState("");
useEffect(() => {
const timer = setInterval(() => {
const now = new Date();
const diff = checkInTime - now;
if (diff > 0) {
const hours = Math.floor(diff / (1000 * 60 * 60));
const minutes = Math.floor((diff / (1000 * 60)) % 60);
setTimeLeft(`${hours}h ${minutes}m until check-in`);
} else {
setTimeLeft("Checked in or check-in time passed");
}
}, 1000);
return () => clearInterval(timer);
}, [checkInTime]);
return (
<div className="bg-white p-6 rounded-xl shadow-md w-full max-w-md">
<h2 className="text-xl font-semibold mb-4">Hotel Booking</h2>
<div className="flex flex-col gap-4">
<div className="border rounded p-4">
<h3 className="font-bold">The Leela Palace</h3>
<p>🏨 2 Guests, 1 Room</p>
<p>🕑 Check-in: May 1st, 2025, 12:00 PM</p>
<p className="text-green-600 font-bold">{timeLeft}</p>
<p>💰 ₹6,000/night</p>
<button className="mt-2 px-4 py-2 bg-blue-600 text-white rounded">Book Now</button>
</div>
<div className="border rounded p-4">
<h3 className="font-bold">Taj Hotel</h3>
<p>🏨 2 Guests, 1 Room</p>
<p>🕑 Check-in: May 1st, 2025, 12:00 PM</p>
<p className="text-green-600 font-bold">{timeLeft}</p>
<p>💰 ₹5,000/night</p>
<button className="mt-2 px-4 py-2 bg-blue-600 text-white rounded">Book Now</button>
</div>
</div>
</div>
);
}
5)Home.jsx
import React, { useContext, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import { dataContext } from '../context/Usercontext';
function Home() {
const [userData, setUserData, getUserData, serverURL] = useContext(dataContext);
const navigate = useNavigate();
useEffect(() => {
if (!userData) {
navigate("/login");
}
}, [userData, navigate]);
const handleLogOut = async () => {
try {
await axios.post(`${serverURL}/api/logout`, {}, { withCredentials: true });
setUserData(null);
} catch (error) {
console.error("Logout failed:", error);
}
};
if (!userData) return null;
return (
<div className='w-full h-screen bg-[#0d1818] flex flex-col justify-center items-center gap-6 px-4'>
<div className='w-[100px] h-[100px] rounded-full bg-white overflow-hidden border-2 border-white'>
<img src={userData.profileImage} alt="Profile" className='w-full h-full object-cover' />
</div>
<p className='text-white text-lg text-center'>
Hey, <span className='text-[#0ce0e7] text-2xl font-semibold'>{userData.firstName}</span>, welcome to the Ultimate Backend Course!
</p>
<button
onClick={handleLogOut}
className='bg-[#07c7e4] text-black px-4 py-2 rounded-lg hover:bg-[#0ce0e7] transition duration-200'
>
Log Out
</button>
</div>
);
}
export default Home;
6)results.jsx
const Results = ({ flights }) => (
<section className="results">
{flights.length > 0 && (
<div className="card">
<h3>Flight Results</h3>
<ul>
{flights.map((flight, i) => (
<li key={i}>
<strong>{flight.airline}</strong> - ₹{flight.price} - {flight.time}
</li>
))}
</ul>
</div>
)}
</section>
);
export default Results;
7)Login.jsx
import React, { useContext, useState } from 'react';
import { dataContext } from '../context/UserContext.jsx';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
function Login() {
const { serverUrl, setUserData, getUserData } = useContext(dataContext);
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const navigate = useNavigate();
const handleLogin = async (e) => {
e.preventDefault();
try {
const { data } = await axios.post(`${serverUrl}/api/login`, {
email,
password
}, { withCredentials: true });
setUserData(data.user);
await getUserData();
navigate("/");
} catch (error) {
alert(error?.response?.data?.message || "Login failed");
console.error("Login error:", error);
}
};
return (
<div className='w-full h-screen bg-black flex justify-center items-center'>
<div className='w-[90%] max-w-[500px] h-[500px] bg-[#141f1f] rounded flex flex-col justify-center items-center gap-6 px-4'>
<h1 className='text-white text-xl font-semibold'>Login</h1>
<form
className='w-full flex flex-col items-center justify-center gap-5'
onSubmit={handleLogin}
>
<input
type="email"
placeholder="Email"
className='w-[80%] bg-white rounded-lg px-4 py-2 outline-none'
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<input
type="password"
placeholder="Password"
className='w-[80%] bg-white rounded-lg px-4 py-2 outline-none'
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<button type="submit" className='bg-[#07c7e4] text-black px-6 py-2 rounded-lg hover:bg-[#0ce0e7] transition'>
Log in
</button>
</form>
<p className='text-white'>
Want to create a new account?{' '}
<span
className='text-[#0ed3e1] underline cursor-pointer'
onClick={() => navigate("/signup")}
>
Sign Up
</span>
</p>
</div>
</div>
);
}
export default Login;
8)SignUp.jsx
import React, { useContext, useRef, useState } from 'react';
import { dataContext } from '../context/UserContext.jsx';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import profile from '../assets/profile.jpg';
function Signup() {
const { serverUrl, setUserData, getUserData } = useContext(dataContext);
const navigate = useNavigate();
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [userName, setUserName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [frontendImage, setFrontendImage] = useState(profile);
const [backendImage, setBackendImage] = useState(null);
const fileRef = useRef(null);
const handleImage = (e) => {
const file = e.target.files[0];
setBackendImage(file);
const image = URL.createObjectURL(file);
setFrontendImage(image);
};
const handleSignup = async (e) => {
e.preventDefault();
try {
const formData = new FormData();
formData.append('firstName', firstName);
formData.append('lastName', lastName);
formData.append('userName', userName);
formData.append('email', email);
formData.append('password', password);
if (backendImage) {
formData.append('profileImage', backendImage);
}
const { data } = await axios.post(`${serverUrl}/api/signup`, formData, {
withCredentials: true,
headers: { 'Content-Type': 'multipart/form-data' },
});
await getUserData();
setUserData(data);
navigate('/');
} catch (error) {
console.error(error?.response?.data || "Signup failed");
alert(error?.response?.data?.message || "Signup failed");
}
};
return (
<div className='w-full h-screen bg-black flex justify-center items-center'>
<div className='w-[90%] max-w-[500px] h-fit py-6 bg-[#141f1f] rounded flex flex-col justify-center items-center gap-6'>
<h1 className='text-white text-xl font-semibold'>Sign Up</h1>
<form
className='w-full flex flex-col items-center justify-center gap-5'
onSubmit={handleSignup}
>
<input type='file' hidden ref={fileRef} onChange={handleImage} />
<div className='w-[100px] h-[100px] rounded-full bg-white overflow-hidden relative border-2 border-white'>
<img src={frontendImage} alt='Profile Preview' className='w-full h-full object-cover' />
<div
className='w-full h-full bg-black top-0 left-0 absolute opacity-0 hover:opacity-50 cursor-pointer flex justify-center items-center text-white font-semibold text-2xl'
onClick={() => fileRef.current.click()}
>
+
</div>
</div>
<div className='w-[80%] flex gap-3'>
<input
type='text'
placeholder='First Name'
className='w-1/2 bg-white rounded-lg px-4 py-2 outline-none'
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
required
/>
<input
type='text'
placeholder='Last Name'
className='w-1/2 bg-white rounded-lg px-4 py-2 outline-none'
value={lastName}
onChange={(e) => setLastName(e.target.value)}
required
/>
</div>
<input
type='text'
placeholder='Username'
className='w-[80%] bg-white rounded-lg px-4 py-2 outline-none'
value={userName}
onChange={(e) => setUserName(e.target.value)}
required
/>
<input
type='email'
placeholder='Email'
className='w-[80%] bg-white rounded-lg px-4 py-2 outline-none'
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<input
type='password'
placeholder='Password'
className='w-[80%] bg-white rounded-lg px-4 py-2 outline-none'
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<button type='submit' className='bg-[#07c7e4] text-black px-6 py-2 rounded-lg hover:bg-[#0ce0e7] transition'>
Sign Up
</button>
<p className='text-white'>
Already have an account?{' '}
<span
className='text-[#0ed3e1] underline cursor-pointer'
onClick={() => navigate('/login')}
>
Login
</span>
</p>
</form>
</div>
</div>
);
}
export default Signup;
9)SearchBox.jsx
import { useState } from 'react';
const SearchBox = ({ onSearch }) => {
const [from, setFrom] = useState('');
const [to, setTo] = useState('');
const [date, setDate] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
onSearch();
};
return (
<section className="search-box">
<h2>Search Flights</h2>
<form onSubmit={handleSubmit}>
<input type="text" placeholder="From" value={from} onChange={e => setFrom(e.target.value)} required />
<input type="text" placeholder="To" value={to} onChange={e => setTo(e.target.value)} required />
<input type="date" value={date} onChange={e => setDate(e.target.value)} required />
<button type="submit">Search</button>
</form>
</section>
);
};
export default SearchBox;
Context folder
1)AuthContext.jsx
import React, { createContext, useContext, useState, useEffect } from 'react';
const AuthContext = createContext();
export const useAuth = () => useContext(AuthContext);
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(() => {
const storedUser = localStorage.getItem("user");
return storedUser ? JSON.parse(storedUser) : null;
});
const [loading, setLoading] = useState(false);
const login = async (email, password) => {
setLoading(true);
// (replace with real API )
return new Promise((resolve) => {
setTimeout(() => {
const fakeUser = { name: "John Doe", email };
setUser(fakeUser);
localStorage.setItem("user", JSON.stringify(fakeUser));
setLoading(false);
resolve(fakeUser);
}, 1000);
});
};
const logout = () => {
setUser(null);
localStorage.removeItem("user");
};
const value = {
user,
login,
logout,
loading,
isAuthenticated: !!user
};
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};
2)UserContext.jsx
import React, { createContext, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
export const dataContext = createContext();
function Usercontext({ children }) {
const navigate = useNavigate();
const [userData, setUserData] = useState(null);
const serverUrl = "http://localhost:8000"; // Update this to your backend URL if deployed
const getUserData = async () => {
try {
const { data } = await axios.get(`${serverUrl}/api/getuserdata`, {
withCredentials: true,
});
setUserData(data);
} catch (error) {
console.error("Failed to fetch user data:", error);
navigate("/login");
}
};
useEffect(() => {
getUserData();
}, []);
const value = {
serverUrl,
userData,
setUserData,
getUserData
};
return (
<dataContext.Provider value={value}>
{children}
</dataContext.Provider>
);
}
export default Usercontext;
App.jsx
import React, { useContext } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import Signup from './pages/Signup';
import Login from './pages/Login';
import Home from './pages/Home';
import { dataContext } from './context/UserContext.jsx';
function App() {
const { userData } = useContext(dataContext);
return (
<Routes>
<Route path="/signup" element={<Signup />} />
<Route path="/login" element={<Login />} />
<Route path="/" element={userData ? <Home /> : <Navigate to="/login" replace />} />
</Routes>
);
}
export default App;
Index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App.jsx';
import './index.css';
import { AuthProvider } from './context/AuthContext.jsx';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<BrowserRouter>
<AuthProvider>
<App />
</AuthProvider>
</BrowserRouter>
</React.StrictMode>
);
.gitignore
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>MakeMyTrip Clone</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<header>
<div class="logo">MakeMyTrip</div>
<nav>
<a href="#" id="flightsTab">Flights</a>
<a href="#" id="hotelsTab">Hotels</a>
<a href="#">Holiday Packages</a>
<a href="#">Offers</a>
</nav>
</header>
<main>
<section class="search-box" id="flightBooking">
<h2>Book Flights</h2>
<form id="flightForm">
<input type="text" placeholder="From" required />
<input type="text" placeholder="To" required />
<input type="datetime-local" required />
<button type="submit">Search Flights</button>
</form>
<p id="flightTimeLeft"></p>
</section>
<section class="search-box" id="hotelBooking" style="display:none;">
<h2>Book Hotels</h2>
<form id="hotelForm">
<input type="text" placeholder="City or Hotel Name" required />
<input type="date" required />
<input type="number" placeholder="Guests" min="1" required />
<button type="submit">Search Hotels</button>
</form>
</section>
<section class="results" id="results"></section>
</main>
<script type="module" src="/main.jsx"></script>
</body>
</html>
pakage.json
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@tailwindcss/vite": "^4.0.15",
"axios": "^1.8.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^7.4.0"
},
"devDependencies": {
"@eslint/js": "^9.21.0",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.21",
"eslint": "^9.21.0",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.19",
"globals": "^15.15.0",
"postcss": "^8.5.3",
"tailwindcss": "^3.4.17",
"vite": "^6.2.0"
}
}
....................................END................................
....................................START.............................
20)Linked In Clone
1)backend
npm init -y
1)config
a)Cludinary.js
import { v2 as cloudinary } from 'cloudinary';
import fs from "fs"
const uploadOnCloudinary=async(filePath)=>{
cloudinary.config({
cloud_name:process.env.CLOUDINARY_CLOUD_NAME,
api_key:process.env.CLOUDINARY_API_KEY,
api_secret:process.env.CLOUDINARY_API_SECRET // Click 'View API Keys' above to copy your API secret
});
try {
if(!filePath){
return null
}
const uploadResult = await cloudinary.uploader.upload(filePath)
fs.unlinkSync(filePath)
return uploadResult.secure_url
} catch (error) {
fs.unlinkSync(filePath)
console.log(error);
}
}
export default uploadOnCloudinary
b)db.js
import mongoose from "mongoose";
const connectDb=async ()=>{
try{
mongoose.connect(process.env.MONGODB_URL)
} catch(error){
console.log("db error");
}
}
export default connectDb
c)token.js
import jwt from "jsonwebtoken"
const genToken=async(userId)=>{
try{
let token=await jwt.sign({userId},process.env.JWT_SECRET,{expiresIn:"10d"})
return token
}catch(error){
console.log(error)
}
}
export default genToken
2)Controllers folder
a)AuthController.js
import genToken from "../config/token.js"
import User from "../models/usermodel.js"
import bcrypt, { genSalt } from "bcryptjs"
export const signUp=async (req,res)=>{
try{
const {firstName,lastName,userName,email,password}=req.body
let existEmail=await User.findOne({email})
if(existEmail){
return res.status(400).json({message:"email alredy exist!"})
}
if(password.length<8){
return res.status(400).json({message:"Password must be atleast 8 characters!"})
}
let hassedpassword=await bcrypt.hash(password,10)
const user=await User.create({
firstName,
lastName,
userName,
email,
password:hassedpassword
})
let token=await genToken(user._id)
res.cookie("token",token,{
httpOnly:true,
maxAgea:10*24*60*60*1000,
sameSite:"strict",
secure:process.env.NODE_ENVIRONMENT==="production"
})
return res.status(201).json(user)
}catch(error){
console.log(error);
return res.status(500).json({message:"signUp error"})
}
}
export const login=async (req,res)=>{
try {
const {email,password}=req.body
let user=await User.findOne({email})
if(!user){
return res.status(400).json({message:"user does not exist!"})
}
const isMatch=await bcrypt.compare(password,user.password)
if(!isMatch){
return res.status(400).json({message:"inccorect password"})
}
let token=await genToken(user._id)
res.cookie("token",token,{
httpOnly:true,
maxAgea:10*24*60*60*1000,
sameSite:"strict",
secure:process.env.NODE_ENVIRONMENT==="production"
})
return res.status(200).json(user)
} catch (error) {
console.log(error);
return res.status(500).json({message:"Login error"})
}
}
export const logOut=async (req,res)=>{
try {
res.clearcookie("token")
return res.status(200).json({message:"log out successfully"})
} catch (error) {
console.log(error);
return res.status(500).json({message:"Logout error"})
}
}
b)UserController.js
import User from "../models/usermodel.js"
export const getCurrentUser=async (req,res)=>{
try {
let id=req.userId
const user=await User.findById(req.userId).select("-password")
if(!user){
return res.status(400).json({message:"user does not found"})
}
return res.status(200).json(user)
} catch (error) {
console.log(error);
return res.status(400).json({message:"get current user error"})
}
}
3)Middlewares folder
a)isAuth.js
import jwt from "jsonwebtoken"
const isAuth=async (req,res,next)=>{
try {
let {token}=req.cookies
if(!token){
return res.status(400).json({message:"user doesn't have token"})
}
let verifyToken=jwt.verify(token,process.env.JWT_SECRET)
if(!verifyToken){
return res.status(400).json({message:"user doesn't have valid token"})
}
req.userId=verifyToken.userId
next()
} catch (error) {
return res.status(500).json({message:"is auth error"})
}
}
export default isAuth
b)Multer.js
import multer from "multer"
const upload=multer({storage})
let storage=multer.diskStorage({
destination:(req,file,cb)=>{
cb(null,"./public")
},
filename:(req,file,cb)=>{
cb(null,file.originalname)
}
})
export default upload
4)Models folder
a)userModel.js
import mongoose, { Collection } from "mongoose";
const userSchema=new mongoose.Schema({
firstName:{
type:String,
required:true,
},
lastName:{
type:String,
required:true,
},
userName:{
type:String,
required:true,
unique:true
},
email:{
type:String,
required:true,
unique:true
},
password:{
type:String,
required:true,
},
profileImage:{
type:String,
default:"",
},
coverImage:{
type:String,
default:"",
},
headline:{
type:String,
default:"",
},
Skills:[ {type:string}],
education:[
{
College:{type:String},
degree:{type:String},
feildOfStudy:{type:String}
}
],
location:{
type:String
},
gender:{
type:String,
enum:["male","female","other"]
},
experience:[
{
title:{type:String},
company:{type:String},
description:{type:String}
}
],
connection:[
{type:mongoose.Schema.Types.ObjectId,
ref:"User"
}
]
},{timestamps:true})
const User =mongoose.model("User",userSchema)
export default User
5)node_modulus
6)public folder
7)Rotes folder
a)AuthRoutes.js
import express from "express"
import { login, logOut, signUp } from "../controllers/authControllers.js"
let authRouter=express.Router()
authRouter.post("./signup",signUp)
authRouter.post("./login",login)
authRouter.post("./logout",logOut)
export default authRouter
b)UserRoute.js
import express from "express"
import { getCurrentUser } from "../controllers/UserController.js"
import isAuth from "../middlewares/isauth.js"
let userRouter=express.Router()
userRouter.get("/currentuser",isAuth,getCurrentUser)
export default userRouter
8).env
PORT=8000
MONGODB_URL="mongodb+srv://Linkedinproject:password@cluster0.dwdwdss.mongodb.net/pro.."
JWT_SECRET="You are going to find and paste in this "
NODE_ENVIRONMENT="development"
CLOUDINARY_CLOUD_NAME='Krishna Patil Rajput'
CLOUDINARY_API_KEY='Your API Key'
CLOUDINARY_API_SECRET='Your API Secret'
9)index.js
import express from "express";
import dotenv from "dotenv"
import connectDb from "./config/db.js";
import authRouter from "./Routes/authRoutes.js";
import cookieparser from "cookie-parser"
import cors from "cors"
import userRouter from "./Routes/UserRoute.js";
dotenv.config()
let app=express()
app.use(express.json())
app.use(cookieparser())
app.use(cors({
origin:"http://localhost:5173",
credentials:true
}))
let port=process.env.PORT || 5000
app.use("/api/auth",authRouter)
app.use("/api/user",userRouter)
app.listen(port,()=>{
connectDb()
console.log("server started")
})
10)pakage_lock.json
11)package.json
{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "nodemon index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "module",
"dependencies": {
"bcryptjs": "^3.0.2",
"cloudinary": "^2.6.0",
"cookie": "^1.0.2",
"cors": "^2.8.5",
"dotenv": "^16.4.7",
"express": "^5.1.0",
"jsonwebtoken": "^9.0.2",
"mongoose": "^8.13.2",
"multer": "^1.4.5-lts.2",
"nodemon": "^3.1.9",
"parser": "^0.1.4"
}
}
2)Frontend
npm install vite@latest
1)node_modulus
2)public
3) in SRC folder
a)assets folder
b)Component folder
1)EditProfile.jsx
import React, { useContext, useState } from 'react'
import { GiSplitCross } from "react-icons/gi";
import { userDataContext } from '../context/userContext';
import dp from "../assets/dp.webp"
import { CiCirclePlus, CiCamera } from "react-icons/ci";
function EditProfile() {
const { edit, setEdit, userData, setUserData } = useContext(userDataContext);
const [firstName, setFirstName] = useState(userData.firstName || "");
const [lastName, setLastName] = useState(userData.lastName || "");
const [userName, setUserName] = useState(userData.userName || "");
const [headline, setHeadline] = useState(userData.headline || "");
const [location, setLocation] = useState(userData.location || "");
const [gender, setGender] = useState(userData.gender || "");
const [skills, setSkills] = useState(userData.skills || []);
const [education, setEducation] = useState(userData.Education || []);
const [newSkill, setNewSkill] = useState("");
const [newEducation, setNewEducation] = useState({
College: "",
degree: "",
feildOfStudy: ""
});
function addSkill(e) {
e.preventDefault();
if (newSkill && !skills.includes(newSkill)) {
setSkills([...skills, newSkill]);
}
setNewSkill("");
}
function removeSkill(skill) {
if (skills.includes(skill)) {
setSkills(skills.filter((s) => s !== skill));
}
}
function addEducation(e) {
e.preventDefault();
if (
newEducation.College &&
newEducation.degree &&
newEducation.feildOfStudy
) {
setEducation([...education, newEducation]);
setNewEducation({ College: "", degree: "", feildOfStudy: "" });
}
}
function removeEducation(index) {
setEducation(education.filter((_, i) => i !== index));
}
return (
<div className='w-full h-[100vh] fixed top-0 z-[100] flex justify-center items-center'>
<div className='w-full h-full bg-black opacity-[0.5] absolute'></div>
<div className='w-[90%] max-w-[400px] h-[600px] bg-white relative overflow-auto z-[200] shadow-lg rounded-lg p-[10px]'>
<div className='absolute top-[20px] right-[20px] cursor-pointer' onClick={() => setEdit(false)}>
<GiSplitCross className='w-[25px] h-[25px] text-gray-800 font-bold' />
</div>
<div className='w-full h-[150px] bg-gray-500 rounded-lg mt-[40px] relative overflow-hidden'>
<img src="" alt="" className='w-full h-full object-cover' />
<CiCamera className='absolute right-[20px] top-[60px] w-[25px] h-[25px] text-white cursor-pointer' />
</div>
<div className='w-[80px] h-[80px] rounded-full overflow-hidden absolute top-[150px] ml-[20px]'>
<img src={dp} alt="" className='w-full h-full object-cover' />
</div>
<div className='w-[20px] h-[10px] bg-[#17c1ff] absolute top-[200px] left-[90px] rounded-full flex justify-center items-center cursor-pointer'>
<CiCirclePlus className='text-white' />
</div>
<div className='w-full flex flex-col items-center justify-center gap-[20px] mt-[50px]'>
<input type="text" placeholder="First Name" className='input' value={firstName} onChange={(e) => setFirstName(e.target.value)} />
<input type="text" placeholder="Last Name" className='input' value={lastName} onChange={(e) => setLastName(e.target.value)} />
<input type="text" placeholder="Username" className='input' value={userName} onChange={(e) => setUserName(e.target.value)} />
<input type="text" placeholder="Headline" className='input' value={headline} onChange={(e) => setHeadline(e.target.value)} />
<input type="text" placeholder="Location" className='input' value={location} onChange={(e) => setLocation(e.target.value)} />
<input type="text" placeholder="Gender (male/female/other)" className='input' value={gender} onChange={(e) => setGender(e.target.value)} />
{/* Skills Section */}
<div className='section'>
<h1 className='section-title'>Skills</h1>
{skills.length > 0 && skills.map((skill, index) => (
<div key={index} className='tag'>
<span>{skill}</span>
<GiSplitCross className='icon' onClick={() => removeSkill(skill)} />
</div>
))}
<div className='flex flex-col gap-[10px] items-start'>
<input
type="text"
placeholder="Add new skill"
value={newSkill}
onChange={(e) => setNewSkill(e.target.value)}
className='input-sm'
/>
<button className='btn-add' onClick={addSkill}>Add</button>
</div>
</div>
{/* Education Section */}
<div className='section'>
<h1 className='section-title'>Education</h1>
{education.length > 0 && education.map((edu, index) => (
<div key={index} className='tag flex-col items-start'>
<div>College: {edu.College}</div>
<div>Degree: {edu.degree}</div>
<div>Field of Study: {edu.feildOfStudy}</div>
<GiSplitCross className='icon self-end' onClick={() => removeEducation(index)} />
</div>
))}
<input type="text" placeholder="College" value={newEducation.College} onChange={(e) => setNewEducation({ ...newEducation, College: e.target.value })} className='input-sm' />
<input type="text" placeholder="Degree" value={newEducation.degree} onChange={(e) => setNewEducation({ ...newEducation, degree: e.target.value })} className='input-sm' />
<input type="text" placeholder="Field of Study" value={newEducation.feildOfStudy} onChange={(e) => setNewEducation({ ...newEducation, feildOfStudy: e.target.value })} className='input-sm' />
<button className='btn-add' onClick={addEducation}>Add</button>
</div>
</div>
</div>
</div>
)
}
export default EditProfile;
2)Nav.jsx
import React, { useContext, useState } from 'react'
import logo2 from '../assets/logo2.png'
import { FaSearch } from "react-icons/fa";
import { FaHome } from "react-icons/fa";
import { FaUser } from "react-icons/fa";
import { IoNotifications } from "react-icons/io5";
import dp from "../assets/dp.webp"
import { userDataContext } from '../context/userContext';
import { authDataContext } from '../context/authContext';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
function Nav() {
let [activeSearch,setActiveSearch]=useState(false)
let {userData,setuserData}=useContext(userDataContext)
let [showPopup,setShowPopup]=useState(false)
let navigate=useNavigate()
let {serverUrl}=useContext(authDataContext)
const handleSignOut=async ()=>{
try {
let result=await axios.get(serverUrl+"/api/auth/logout",{withCredentials:true})
setuserData(null)
navigate("/login")
console.log(result);
} catch (error) {
console.log(error);
}
}
return (
<div className='w-full h-[80px] bg-[white] fixed top-0 shadow-lg flex justify-between md:justify-around items-center px-[10px]'>
<div className='flex justify-center items-center gap-[10px]'>
<div onclick={()=>{
setActiveSearch(false)
}}>
<img src={logo2}alt="" className='w-[50px]'/>
</div>
{!activeSearch && <div><FaSearch className='w-[23px] h-[23px] text-gray-600-lg:hidden' onclick={()=>setActiveSearch(true)}/></div>}
<form className={`w-[190px] lg:w-[350px] h-[40px] bg-[#f0efe7] lg:flex items-center gap-[10px] px-[10px] py-[5px] rounded-md ${activeSearch?"hidden":"flex"}`}>
<div><FaSearch className='w-[23px] h-[23px] text-gray-600'/></div>
<input type="text" className='w-[80%] h-full bg-transparent outline-none border-0' placeholder='search users...'/>
</form>
</div>
<div className='flex justify-center items-center gap-[20px] relative'>
{showPopup && <div className='w-[300px] min-h-[300px] bg-white shadow-lg absolute top-[75px] rounded-lg flex flex-col items-center p-[20px] gap-[20px]'>
<div className='w-[70px] h-[70px] rounded-full overflow-hidden'>
<img src={dp} alt="" className='w-full h-full'/>
</div>
<div className='text-[19px] font-semibold text-gray-700'>{`${userData.firstName} ${userData.lastName}`}</div>
<button className='w-[100%] h-[40px] rounded-full border-2 border-[#2dc0ff] text-[#2dc0ff]'>View Profile</button>
<div className='w-full h-[23px] text-gray-700'></div>
<div className='flex w-full items-center justify-start text-gray-600 gap-[10px]'>
<FaUser className='w-[23px] h-[23px] text-gray-600'/>
<div>My Networks</div>
</div>
<button className='w-[100%] h-[40px] rounded-full border-2 border-[#ec4545] text-[#ec4545]' onclick={handleSignOut}>Sign Out</button>
</div>
}
<div className='lg:flex flex-col items-center justify-center text-gray-600 hidden'>
<FaHome className='w-[23px] h-[23px] text-gray-600'/>
<div>Home</div>
</div>
<div className='md:flex flex-col items-center justify-center text-gray-600 hidden'>
<FaUser className='w-[23px] h-[23px] text-gray-600'/>
<div>My Network</div>
</div>
<div className='flex flex-col items-center justify-center text-gray-600'>
<IoNotifications className='w-[23px] h-[23px] text-gray-600'/>
<div className='hidden md:block'>Notifications</div>
</div>
<div>
<div className='w-[50px] h-[50px] rounded-full overflow-hidden cursor-pointer' onclick={()=>setShowPopup(prev=>!prev)}>
<img src={dp} alt="" className='w-full h-full'/>
</div>
</div>
</div>
</div>
)
}
export default Nav
c)context folder
1)authContext.jsx
import React from 'react'
export const authDataContext = createContext()
function authContext({ children }) {
const serverUrl = "http://localhost:8000"
let value = {
serverUrl
}
return (
<div>
<authDataContext.provider value={value}>
{children}
</authDataContext.provider>
</div>
)
}
export default authContext
2)userContext.jsx
import React, { use, useContext, useEffect } from 'react'
export const userDataContext=createContext()
function UserContext({children}) {
let[userData,setUserData]=useState([])
let [serverUrl]=useContext(authDataContext)
const getCurrentUser=async ()=>{
try{
let result =await axios.get(serverUrl+"/api/user/currentuser",
{withCredentials:true})
setUserData(result.data)
}catch(error){
console.log(error);
}
}
useEffect(()=>{
getCurrentUser()
},[])
const value={
userData,setUserData
}
return (
<div>
<userDataContext.Provider value={value}>
{children}
</userDataContext.Provider>
</div>
)
}
export default UserContext
c)pages folder
1)Home.jsx
import React, { useContext, useState } from 'react'
import Nav from '../components/Nav'
import dp from "../assets/dp.webp"
import { CiCirclePlus } from "react-icons/ci";
import { CiCamera } from "react-icons/ci";
import { userDataContext } from '../context/userContext';
import { FaPencilAlt } from "react-icons/fa";
import EditProfile from '../components/EditProfile';
function Home() {
let {userData,setUserData,edit,setEdit}=useContext(userDataContext)
return (
<div className='w-full min-h-[100vh] bg-[#f0efe7] pt-[80px] flex items-center justify-center gap-[20px] px-[20px] flex-col lg:flex-row'>
{edit && <EditProfile /> }
<Nav />
<div className='w-full lg:w-[25%] min-h-[200px] bg-[white] shadow-lg rounded-lg p-[10px] relative '>
<div className='w-[100%] h-[100%] bg-gray-400 rounded overflow-hidden flex items-center justify-center relative cursor-pointer' onClick={()=>setEdit(true)}>
<img src="" alt="" className='w-full' />
<CiCamera className='absolute right-[20px] top-[20px] w-[25px] h-[25px] text-[white] cursor-pointer'/>
</div>
<div className='w-[70px] h-[70px] rounded-full overflow-hidden items-center justify-center absolute top-[65px] left-[35px] cursor-pointer' onClick={()=>setEdit(true)}>
<img src={dp} alt="" className=' h-full' />
<div className='w-[20px] h-[10px] bg-[#17c1ff] absolute top-[105px] left-[90px] rounded-full flex justify-center items-center'>
<CiCirclePlus className='text-white'/>
</div>
<div className='mt-[30px] pl-[20px] text-[19px] font-semibold text-gray-700'>
<div>{`${userData.firstName} ${userData.lastName}`}</div>
<div className='text-[19px] font-semibold text-gray-700'>{userData.headline || ""}</div>
<div className='text-[16px] text-gray-500'>{userData.location}</div>
</div>
<button className='w-[100%] h-[40px] my-[20px] rounded-full border-2 border-[#2dc0ff] text-[#2dc0ff] flex items-center justify-center gap-[10px]' onClick={()=>setEdit(true)}>Edit Profile <FaPencilAlt /></button>
</div>
</div>
<div className='w-full lg:w-[50%] min-h-[200px] bg-[white] shadow-lg'>
</div>
<div className='w-full lg:w-[25%] min-h-[200px] bg-[white] shadow-lg'>
</div>
</div>
)
}
export default Home
2)login.jsx
import React, { useContext, useState } from 'react';
import logo from "../assets/logo.png";
import { FiEye, FiEyeOff } from "react-icons/fi";
import { useNavigate } from "react-router-dom";
import { authDataContext } from '../context/authContext';
import axios from "axios";
function Login() {
const [show, setShow] = useState(false);
const { serverUrl } = useContext(authDataContext);
const navigate = useNavigate();
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [loading,setLoading]=useState(false)
const [err,setErr]=useState("")
const handleSignIn = async (e) => {
e.preventDefault(); // Prevent form reload
setLoading(true)
try {
const result = await axios.post(serverUrl + "api/auth/login", {
email,
password,
}, { withCredentials: true });
setUserData(result.data)
navigate("/")
setErr("")
setLoading(False)
setEmail("")
setPassword("")
} catch (error) {
setErr(error.respone.data.message)
setLoading(false)
}
};
return (
<div className='w-full h-screen bg-white flex flex-col items-center justify-start'>
{/* Logo section */}
<div className='p-8 lg:p-9 w-full h-28 flex flex-col items-center justify-center'>
<img
src={logo}
alt="Logo"
className='w-24 h-auto drop-shadow-lg hover:drop-shadow-2xl hover:scale-110 transition-all duration-300 ease-in-out'
/>
<h2 className="text-blue-600 text-lg font-semibold mt-2">Welcome to MyApp</h2>
</div>
{/* Form section */}
<form
className='w-[90%] max-w-[400px] h-[600px] md:shadow-xl flex flex-col justify-center gap-5 p-4 rounded-xl border border-blue-100'
onSubmit={handleSignIn}
>
<h1 className='text-gray-800 text-3xl font-semibold text-center'>Sign In</h1>
<input
type="email"
placeholder="Email"
required
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full h-12 border-2 border-gray-300 rounded-md text-gray-800 text-lg px-3 focus:outline-blue-500"
/>
{/* Password input with toggle */}
<div className='relative w-full'>
<input
type={show ? 'text' : 'password'}
placeholder='Password'
required
value={password}
onChange={(e) => setPassword(e.target.value)}
className='w-full h-12 border-2 border-gray-300 rounded-md text-gray-800 text-lg px-3 pr-10 focus:outline-blue-500'
/>
<span
className='absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-600 cursor-pointer'
onClick={() => setShow(!show)}
>
{show ? <FiEyeOff size={20} /> : <FiEye size={20} />}
</span>
</div>
{err && <p className='text-center text-red-500'>{err}</p>}
<button
type="submit"
className='w-[100%] h-[50px] rounded-full bg-[#24b2ff] mt-[40px] text-white' disabled={loading}>
{loading?"loading...":"Sign In"}
</button>
<p className='text-center cursor-pointer' onClick={() => navigate("/signup")}>
Want to create a new account? <span className='text-[#2a9bd8]'>Sign Up</span>
</p>
</form>
</div>
);
}
export default Login
3)SignUp.jsx
import React, { useContext, useState } from 'react';
import logo from "../assets/logo.png";
import { FiEye, FiEyeOff } from "react-icons/fi";
import { useNavigate } from "react-router-dom";
import { authDataContext } from '../context/authContext';
import axios from "axios";
import { userDataContext } from '../context/userContext';
function SignUp() {
const [show, setShow] = useState(false);
const { serverUrl } = useContext(authDataContext);
const {userData,setUserData}=useContext(userDataContext)
const navigate = useNavigate();
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [username, setUsername] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [loading,setLoading]=useState(false)
const [err,setErr]=useState("")
const handleSignUp = async (e) => {
e.preventDefault(); // Prevent form reload
setLoading(true)
try {
const result = await axios.post(serverUrl + "api/auth/signup", {
firstName,
lastName,
username,
email,
password,
}, { withCredentials: true });
setUserData(result.data)
navigate("/")
setErr("")
setLoading(False)
setFirstName("")
setLastName("")
setEmail("")
setPassword("")
setUsername("")
} catch (error) {
setErr(error.respone.data.message)
setLoading(false)
}
};
return (
<div className='w-full h-screen bg-white flex flex-col items-center justify-start'>
{/* Logo section */}
<div className='p-8 lg:p-9 w-full h-28 flex flex-col items-center justify-center'>
<img
src={logo}
alt="Logo"
className='w-24 h-auto drop-shadow-lg hover:drop-shadow-2xl hover:scale-110 transition-all duration-300 ease-in-out'
/>
<h2 className="text-blue-600 text-lg font-semibold mt-2">Welcome to MyApp</h2>
</div>
{/* Form section */}
<form
className='w-[90%] max-w-[400px] h-[600px] md:shadow-xl flex flex-col justify-center gap-5 p-4 rounded-xl border border-blue-100'
onSubmit={handleSignUp}
>
<h1 className='text-gray-800 text-3xl font-semibold text-center'>Sign Up</h1>
<input
type="text"
placeholder="First Name"
required
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
className="w-full h-12 border-2 border-gray-300 rounded-md text-gray-800 text-lg px-3 focus:outline-blue-500"
/>
<input
type="text"
placeholder="Last Name"
required
value={lastName}
onChange={(e) => setLastName(e.target.value)}
className="w-full h-12 border-2 border-gray-300 rounded-md text-gray-800 text-lg px-3 focus:outline-blue-500"
/>
<input
type="text"
placeholder="Username"
required
value={username}
onChange={(e) => setUsername(e.target.value)}
className="w-full h-12 border-2 border-gray-300 rounded-md text-gray-800 text-lg px-3 focus:outline-blue-500"
/>
<input
type="email"
placeholder="Email"
required
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full h-12 border-2 border-gray-300 rounded-md text-gray-800 text-lg px-3 focus:outline-blue-500"
/>
{/* Password input with toggle */}
<div className='relative w-full'>
<input
type={show ? 'text' : 'password'}
placeholder='Password'
required
value={password}
onChange={(e) => setPassword(e.target.value)}
className='w-full h-12 border-2 border-gray-300 rounded-md text-gray-800 text-lg px-3 pr-10 focus:outline-blue-500'
/>
<span
className='absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-600 cursor-pointer'
onClick={() => setShow(!show)}
>
{show ? <FiEyeOff size={20} /> : <FiEye size={20} />}
</span>
</div>
{err && <p className='text-center text-red-500'>{err}</p>}
<button
type="submit"
className='w-[100%] h-[50px] rounded-full bg-[#24b2ff] mt-[40px] text-white' disabled={loading}>
{loading?"loading...":"Sign Up"}
</button>
<p className='text-center cursor-pointer' onClick={() => navigate("/login")}>
Already have an account? <span className='text-[#2a9bd8]'>Sign In</span>
</p>
</form>
</div>
);
}
export default SignUp;
d)App.jsx
import React, { useContext } from 'react';
import { Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import SignUp from './pages/SignUp';
import Login from './pages/Login';
function App() {
let {userData}=useContext(userDataContext)
return (
<Routes>
<Route path='/' element={userData?<Home/>:<navigate to="/login"/>}/>
<Route path='/signup' element={userData?<Navigate to="/"/>:<SignUp/>}/>
<Route path='/login' element={<Login />} />
</Routes>
);
}
export default App;
E)index.css extention=post css language support
@tailwind base;
@tailwind components;
@tailwind utilities;
F)main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { BrowserRouter } from 'react-router-dom'
import authContext from './context/authContext.jsx'
import UserContext from './context/userContext.jsx'
createRoot(document.getElementById('root')).render(
<BrowserRouter>
<authContext>
<UserContext>
<App />
</UserContext>
</authContext>
</BrowserRouter>
)
g)gitignore
h)eslint.config.js
i)index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Linked In Clone</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
j)pakage.lock.json
k)pakage.json
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.8.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-icons": "^5.5.0",
"react-router-dom": "^7.5.0"
},
"devDependencies": {
"@eslint/js": "^9.21.0",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.21",
"eslint": "^9.21.0",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.19",
"globals": "^15.15.0",
"postcss": "^8.5.3",
"tailwindcss": "^3.4.17",
"vite": "^6.2.0"
}
}
l)post.config.css
M)Readme.md
N)tailwind.config.css
o)vite.config.js
....................................END.............................
21)Coming soon...
0 Comments
if you have any doubts. please let me know