DEPARTMENT OF

COMPUTER SCIENCE & ENGINEERING

Experiment 1
Student Name: Yubin UID: 22BCS16626
Branch: BE CSE Section/Group: IOT-636(B)
Semester: 6th Date of Performance:13-01-25
Subject Name: AP LAB-II Subject Code: 22CSP-351

1. Aim:
Full Stack Development (MERN).The primary aim of this experiment is to provide
students or developers with an understanding of full-stack development involving
MongoDB, Node.js, React, and Express.
• Problem 1.1.1: Give understanding of Mongodb, Nodejs, React, Express.
• Problem 1.1.2: Create a Frontend design of Login/Signup pages and create a backend of it.
Problem Breakdown.
• Problem 1.1.3: Test the Backend API Using Postman.

2. Objective:
• Learn MERN Stack Basics: Understand the key components of the MERN stack
(MongoDB, Express, React, Node.js) and their integration.
• Frontend and Backend Development: Design Login/Signup pages in React and build
secure RESTful APIs using Node.js, Express, and MongoDB.
• Testing with Postman: Validate backend APIs for functionality and error handling.

• Develop and Run a Full-Stack Application: Connect the frontend and backend, deploy the
app, and test the complete workflow.
DEPARTMENT OF
COMPUTER SCIENCE & ENGINEERING

3. Implementation/Code:

BACKEND (Node.js and + Express)

// Install dependencies
npm init -y
npm install express body-parser cors

// Import required modules

const express = require("express"); // Express for creating server and routing
const bodyParser = require("body-parser"); // Middleware to parse incoming request
bodies
const cors = require("cors"); // Middleware to enable Cross-Origin Resource Sharing
(CORS)

// Initialize the Express application

const app = express();

// Define the port on which the server will run

const PORT = 5000;

// Middleware Configuration

// Parse incoming JSON request bodies

app.use(bodyParser.json());

// Enable CORS to allow requests from different origins (useful for frontend-backend
communication)
app.use(cors());

// Mock Database
// In a real-world application, replace this with an actual database such as MongoDB or
//MySQL
let users = [];

// API Endpoints

/**
* @route POST /signup
* @description Handle user signup by storing email and password
* @access Public
*/
app.post("/signup", (req, res) => {
const { email, password } = req.body; // Extract email and password from the request
body

// Validate that both email and password are provided

DEPARTMENT OF
COMPUTER SCIENCE & ENGINEERING
if (!email || !password) {
return res
.status(400)
.json({ message: "Email and Password are required" });
}

// Check if the user already exists in the mock database

const userExists = users.find((user) => user.email === email);
if (userExists) {
return res.status(400).json({ message: "User already exists" });
}

// If the user doesn't exist, add them to the mock database

users.push({ email, password });

// Respond with a success message

res.status(201).json({ message: "User created successfully" });
});

// Start the Server

app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});

➢ FRONTEND(React)
npx create-react-app client //Create React App
cd client
npm install axios

import React, { useState } from "react";

const App = () => {

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [message, setMessage] = useState("");

const handleSignup = async (e) => {

e.preventDefault();

try {
const response = await fetch("http://localhost:5000/signup", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ email, password }),
DEPARTMENT OF
COMPUTER SCIENCE & ENGINEERING
});

const data = await response.json();

if (response.ok) {
setMessage(data.message);
} else {
setMessage(data.message);
}
} catch (error) {
setMessage("An error occurred. Please try again.");
}
};

return (
<div style={styles.container}>
<div style={styles.box}>
<h2 style={styles.heading}>SIGNUP</h2>
<form onSubmit={handleSignup} style={styles.form}>
<input
type="email"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
style={styles.input}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
style={styles.input}
/>
<button type="submit" style={styles.button}>
Signup
</button>
</form>
{message && <p style={styles.successMessage}>{message}</p>}
</div>
</div>
);
};

const styles = {
container: {
display: "flex",
justifyContent: "center",
alignItems: "center",
DEPARTMENT OF
COMPUTER SCIENCE & ENGINEERING
height: "100vh",
background: "linear-gradient(to right, #4facfe, #00f2fe)",
},
box: {
background: "white",
padding: "20px 40px",
borderRadius: "10px",
boxShadow: "0 4px 10px rgba(0, 0, 0, 0.1)",
textAlign: "center",
width: "300px",
},
heading: {
marginBottom: "20px",
color: "#333",
},
form: {
display: "flex",
flexDirection: "column",
},
input: {
marginBottom: "15px",
padding: "10px",
border: "1px solid #ccc",
borderRadius: "5px",
fontSize: "16px",
},

button: {
background: "#00c6ff",
border: "none",
color: "white",
padding: "10px",
fontSize: "16px",
borderRadius: "5px",
cursor: "pointer",
},
successMessage: {
color: "green",
marginTop: "10px",
},
};

export default App;

DEPARTMENT OF
COMPUTER SCIENCE & ENGINEERING

4. Output

5. Learning Outcome

• Developed a deeper understanding of the MERN stack and its components.

• Gained practical experience in designing and implementing a full-stack application.
• Learnt to test and validate APIs using Postman.
• Understood the development workflow, including connecting frontend and backend
services.