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.
