An Industrial internship report submitted to CUSAT In partial fulfilment of the requirements for the

award of Degree

BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE & ENGINEERING

Submitted by
Arjun V M (20220519)

Division of Computer Science & Engineering

COCHIN UNIVERSITY OF SCIENCE AND TECHNOLOGY

COCHIN UNIVERSITY COLLEGE OF ENGINEERING KUTTANADU
ALAPPUZHA - 688504

NOVEMBER 2023
 COCHIN UNIVERSITY OF SCIENCE AND TECHNOLOGY
COCHIN UNIVERSITY COLLEGE OF ENGINEERING KUTTANADU
Alappuzha - 688504

Division of Computer Science & Engineering

BONAFIDE CERTIFICATE

This is to certify that the industrial internship certified is a bonafide report of industrial internship
done by ARJUN V M (20220519) towards the partial fulfilment of the requirements of the degree
of B.Tech in Computer Science and Engineering of Cochin University of Science And
Technology.

Mrs. Aswathy V Shaji Dr. Preetha Mathew

Assistant Professor Head of Department
Division of CSE Division of CSE
 TABLE OF CONTENT

Chapter
Title Page No.
No.
1. CERTIFICATE 1
2. ABOUT THE COMPANY 2
3. INTERNSHIP GOALS 3
4. TECHNOLOGY USED 4
4.1 React.js 4
4.2 Express.js 6
4.3 NBM 7

4.4 HTML 8

4.5 JSX 8

4.6 CSS 8

4.7 Node.js 9

4.8 MongoDB 10

4.9 Postman 11

5. ABOUT THE PROJECT 12

6. PROJECT CODE 14
7. CONCLUSION 20
 MERN Stack Internship

CHAPTER 1

CERTIFICATE

DEPARTMENT OF CSE, CUCEK 1

 MERN Stack Internship

CHAPTER 2

ABOUT THE COMPANY

Established in 2016 by a group of seasoned IT professionals with firsthand experience in the hiring
process, Futura Lab stands as a prominent software development company. Recognizing the divide
between emerging talent and industry expectations, the founders set out to bridge this gap, laying the
foundation for a distinctive institution dedicated to honing skills and fostering industry-ready
professionals.

Futura Envision becoming a beacon of excellence in training and career development,

empowering individuals with the knowledge and practical experience to thrive in the dynamic IT
industry.

Futura is dedicated to providing cutting-edge technical knowledge meticulously crafted by

industry experts. Beyond imparting comprehensive knowledge, offers hands-on experiences that
empower individuals to master concepts effectively. They strive to create a learning environment
that mirrors real-world scenarios, preparing trainees not only with technical proficiency but also
instilling crucial workplace skills such as time management, adherence to standards, and effective
collaboration.

Futura Lab goes beyond conventional training companies by recognizing and addressing the
challenges faced by graduates entering the competitive IT landscape. Their commitment to
simulating a genuine IT working environment ensures that trainees not only grasp the intricacies of
their field but also cultivate essential soft skills. By instilling values of punctuality, deadline
adherence, and respectful collaboration, Futura Lab stands as a catalyst in transforming novices into
adept professionals, poised to make meaningful contributions to the IT industry.

DEPARTMENT OF CSE, CUCEK 2

 MERN Stack Internship

CHAPTER 3

INTERNSHIP GOALS

During my internship at Futura Labs in the role of a MERN Full Stack Developer, my goals are
tailored to offer a comprehensive learning journey and hands-on experience with state-of-the-art
technologies. Futura Labs envisions interns immersing themselves in the end-to-end development
process, honing proficiency in MongoDB, Express.js, React.js, and Node.js – collectively known as
the MERN stack. The primary aim is to cultivate a profound understanding of modern web
application development, emphasizing the practical application of Full Stack technologies within
real-world projects. Throughout my internship, I will collaborate closely with seasoned developers,
actively contributing to ongoing projects, and, on occasion, taking ownership of specific
components. The overarching objective is to foster a dynamic learning environment, where I not
only enhance my technical skills but also cultivate a problem-solving mind-set, effective team
communication, and a grasp of industry best practices. By the conclusion of the internship, I aim to
present a portfolio showcasing my contributions to live projects, showcasing my growth as a MERN
Full Stack Developer and readiness for future roles in the field. I am eager to embrace Futura Labs'
commitment to providing a supportive and challenging internship experience, aligning seamlessly
with the company's dedication to innovation and excellence in software development.

DEPARTMENT OF CSE, CUCEK 3

 MERN Stack Internship

CHAPTER 4

TECHNOLOGY USED

4.1 ReactJs

ReactJS is a JavaScript toolkit for creating reusable, visually appealing, fast, and flexible visual
components. It is an open source, front-end library that works specifically with the application
overview. Developed and managed by Facebook, and later used in popular programs such as
WhatsApp and Instagram.

The main goal of ReactJS is to create User Interfaces (UI) which increases the speed of the
application. Uses a visual DOM (JavaScript object) to speed up the process. In JavaScript, the visual
DOM is faster than the normal DOM. ReactJS can be applied to client and server, as well as other
components. It uses component and data patterns to improve readability while also helping with app
optimization.

ReactJS is best known for its high performance. This feature sets us apart from other segments
in the market today. This is because it controls the visual DOM. DOM is a cross-platform computer
programming API for HTML, XML, and XHTML. DOM contains only internal memory. As a
result, we did not write directly to DOM when creating the component. Instead, we are creating real-
time components that will be converted to DOM, resulting in smoother and faster performance.

React Syntax

1. JSX (JavaScript XML):

React uses a syntax extension called JSX, which allows you to write HTML elements and
components in your JavaScript code. JSX makes it easy to describe what the UI should look like.

Example:

import React from 'react';

const MyComponent = () => {
return (
<div> <h1>Hello, React!</h1> </div> );}
ReactDOM.render(<MyComponent />, document.getElementById('root'));

DEPARTMENT OF CSE, CUCEK 4

 MERN Stack Internship

2. Components:

React applications are built using components. Components can be either class components or
functional components.

 Functional Component:

import React from 'react';

const MyFunctionalComponent = () => {
return <p>This is a functional component.</p>;}

 Class Component:

import React, { Component } from 'react';

class MyClassComponent extends Component {
render() {return <p>This is a class component.</p>; }}

3. Props:

Components can receive data through props (short for properties). Props are passed from a parent
component to a child component.

// Parent component
const ParentComponent = () => {
const message = 'Hello from parent!';
return <ChildComponent greeting={message} />;}
// Child component
const ChildComponent = (props) => { return <p>{props.greeting}</p>;}

4. State:

State is used to manage data that can change over time within a component. Class components
have state, while functional components can use the useState hook to manage state.

Example:

import React, { useState } from 'react';

const Counter = () => {const [count, setCount] = useState(0);
const increment = () => {setCount(count + 1);}
return ( <div><p>Count: {count}</p>
<button onClick={increment}>Increment</button></div>);}

DEPARTMENT OF CSE, CUCEK 5

 MERN Stack Internship

5. Lifecycle Methods (Class Components):

Class components have lifecycle methods that you can use to perform actions at different points
in the life of a component.

Example:

import React, { Component } from 'react';

class MyComponent extends Component {
componentDidMount() {
console.log('Component did mount');}
componentWillUnmount() {
console.log('Component will unmount');}
render() {
return <p>Hello, React!</p>;}
}

4.2 Express
Express.js is a fast, unopinionated, and minimalist web framework for Node.js. It provides a set of
features for web and mobile application development, including routing, middleware support, and a
template engine.

Basic Syntax:

1. Installation:

To use Express.js, you first need to install it using npm (Node Package Manager):

npm install express

2. Hello World Example:

Creating a simple Express server involves creating an instance of the express application,
defining routes, and starting the server.

const express = require('express');

const app = express();const port = 3000;
app.get('/', (req, res) => {res.send('Hello, World!');});app.listen(port, () => {
console.log(`Server is listening on port ${port}`);});

DEPARTMENT OF CSE, CUCEK 6

 MERN Stack Internship

3. Routing:

Express allows you to define routes for handling different HTTP methods and URL patterns.

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

res.send('Get a list of users');});
app.post('/users', (req, res) => {
res.send('Create a new user');});

4. Middleware:

Middleware functions are functions that have access to the request, response, and the next
function in the application's request-response cycle. They can modify the request or response,
end the request-response cycle, or call the next middleware in the stack.

const logger = (req, res, next) => {

console.log(`Request received at: ${new Date()}`);
next();};
app.use(logger);
In this example, the logger middleware logs the timestamp of each incoming request.

Express.js is versatile and can be extended with various middleware and plugins to suit the
needs of your application. It's widely used in the Node.js ecosystem for building web servers
and RESTful APIs.

4.3 NPM

NPM serves two primary purposes: first, it is an online repository for open-source Node.js projects;
second, it is a command-line interface for interacting with that repository, aiding in package
installation, version control, and dependency management. Npm hosts numerous Node.js modules
and apps, with updates occurring regularly. In addition to facilitating simple downloads, npm
manages versioning, allowing you to specify an exact package version or request a version higher or
lower than what you need.

Frequently, you may find that a library is only compatible with a major release of another
library, or a bug in the most recent release is causing issues. Specifying an explicit library version
helps maintain consistency across the team, ensuring everyone is using the same version until the
package is updated. Versioning is valuable in various situations, and npm adheres to the semantic
versioning (semver) standard.

DEPARTMENT OF CSE, CUCEK 7

 MERN Stack Internship

4.4 HTML:

The acronym for Hypertext Markup Language (HTML) is Hypertext Markup Language.
HTML is a markup language that specifies how a document will be displayed on a computer screen.
HTML pages can include audio, moving visuals, lists, real data, and JavaScript documents, and they
can be created as simple text or complex multimedia. HTML pages are shown by web browsers,
which are applications that can traverse a network and display a variety of data. The most
extensively used web publication format is HTML. It allows the author to include not just text, but
also text titles, lists, and tables, as well as still images, video, and audio in their writing. The
student's PC can be used to retrieve information. HTML web pages can also be used to enter data
and as the front end of a commercial transaction.

4.5 JSX:

React understands that rendering logic is closely tied to other UI logic like event handling,
state changes over time, and data preparation for display. Rather than artificially splitting
technology by putting markup and code in different files, React separates concerns through loosely
linked pieces called "components" that include both. We'll go back to components later, but if
you're still afraid to utilize JavaScript for markup, this lecture could change your mind. Although
React does not require the usage of JSX, most people find it handy as a visual assistance when
working with UI in JavaScript code. React may now provide more detailed error and warning
messages.

4.6 CSS:

HTML is used to display a document that has been created using the tag language. Cascading Style
Sheets (CSS) allow you to change the design of multiple web pages at once, saving you time and
effort. External style sheets are layered on top of one another. CSS style sheet files are used to
define the layouts, textures, and adjustments in how different devices and screen sizes display
content on websites. The style description is typically stored in external CSS files.

DEPARTMENT OF CSE, CUCEK 8

 MERN Stack Internship

4.7 Node.js

Node.js is a runtime environment that allows JavaScript to be executed server-side, enabling the
development of scalable and high-performance web applications. It uses an event-driven, non-
blocking I/O model, making it efficient for handling concurrent operations.

Basic Syntax:

1. Module Import:

Node.js uses modules to organize code. You can import modules using the require keyword.
const fs = require('fs');

2. HTTP Server:

Creating a simple HTTP server involves using the built-in http module.

const http = require('http');

const server = http.createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello, Node.js!');});
server.listen(3000, () => {
console.log('Server listening on port 3000');});

3. NPM (Node Package Manager):

NPM is the package manager for Node.js, facilitating the installation and management of third-
party packages.

npm init // initialize a new project

npm install packageName // install a package

4. Asynchronous Programming:

Node.js is designed for asynchronous operations, making use of callbacks or Promises.

const fs = require('fs');
fs.readFile('file.txt', 'utf8', (err, data) => {
if (err) throw err;
console.log(data);
});

DEPARTMENT OF CSE, CUCEK 9

 MERN Stack Internship

4.8 MongoDB:

MongoDB is an open-source document-oriented database that stores data using a flexible schema
and is built on a horizontal scale-out structure. Launched in 2007, MongoDB has gained a large and
diverse community of engineers worldwide.

Instead of traditional row and column tables found in SQL databases, MongoDB stores each item as
a document in BSON (Binary JSON), providing a dual representation of data. Applications can
interact with this data in the JSON format.

Basic Syntax:

1. Connecting to MongoDB:

To connect to a MongoDB database using the official Node.js driver, you typically use the
mongodb module.

const { MongoClient } = require('mongodb');

const uri = 'mongodb://localhost:27017';
const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });
client.connect(err => {if (err) throw err;
console.log('Connected to MongoDB');
client.close();});

2. Inserting Data:

Adding data to a MongoDB collection involves using the insertOne or insertMany methods

const db = client.db('mydatabase');
const collection = db.collection('mycollection');
const document = { name: 'John Doe', age: 30 };
collection.insertOne(document, (err, result) => { if (err) throw err;
console.log('Document inserted');});

3. Querying Data:

Retrieving data from a MongoDB collection is done using the find method.
const query = { name: 'John Doe' };
collection.find(query).toArray((err, result) => {
if (err) throw err;console.log(result);});

DEPARTMENT OF CSE, CUCEK 10

 MERN Stack Internship

4.9 Postman:

Postman is one of the most widely used software testing tools for API testing. It provides a user-
friendly platform for developers to create, test, share, and document APIs. As a stand-alone API
testing platform, Postman facilitates the creation, testing, design, modification, and documentation
of APIs through a straightforward GUI.

Postman eliminates the need for developers to write HTTP client network code for testing
purposes. Instead, it allows the creation of test groups, enabling seamless interaction with APIs. The
tool integrates a comprehensive set of functionalities, capable of executing GET, POST, PUT, and
PATCH HTTP requests. Additionally, Postman can automatically generate code snippets for
various programming languages like JavaScript and Python, streamlining the API development
process.

DEPARTMENT OF CSE, CUCEK 11

 MERN Stack Internship

CHAPTER 5

ABOUT THE PROJECT

The MERN To-Do List is a dynamic and user-friendly task management application developed
using the MERN stack (MongoDB, Express.js, React, Node.js). This project aims to streamline
the process of organizing and managing tasks with a focus on simplicity and efficiency.
The application allows users to add tasks with details such as task name, start date, and end
date. Users can easily edit tasks to update information as needed and delete tasks that are no
longer relevant. The intuitive user interface ensures a smooth user experience, with quick and easy
navigation for adding, editing, and deleting tasks. Tasks in the MERN To-Do List can be
associated with start and end dates, providing a clear timeline for each task. The project supports
CRUD operations, allowing users to Create, Read, Update, and Delete tasks seamlessly.
The frontend is developed using React, ensuring a responsive and interactive user
interface. The backend, powered by Node.js and Express.js, handles data processing and server-
side operations. MongoDB is employed as the database to store and retrieve task information
efficiently.
To get started, users can visit the application website directly without the need for sign-up
or sign-in. Tasks can be added with relevant details such as task name, start date, and end date.
Users can edit tasks as needed, mark them as completed when finished, and delete tasks that are
no longer relevant or necessary.

DEPARTMENT OF CSE, CUCEK 12

 MERN Stack Internship

DEPARTMENT OF CSE, CUCEK 13

 MERN Stack Internship

CHAPTER 6

PROJECT CODE
App.js
import { Route, Routes } from "react-router-dom";
import "./App.css";
import Home from "./Home";
import ReadUser from "./ReadUser";
import UpdateUser from "./UpdateUser";

function App() {
return (
<div>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/readuser/:id" element={<ReadUser />} />
<Route path="/updateuser/:id" element={<UpdateUser />} />
</Routes>
</div>
);
}
export default App;

Home.jsx

import axios from "axios";

import React, { useEffect, useState } from "react";
import { NavLink } from "react-router-dom";

const Home = () => {

const [inputUser, setInputUser] = useState({
name: "",
email: "",
password: "",
});

const handleChnage = (event) => {

setInputUser({
...inputUser,
[event.target.name]: event.target.value,
});
};

const handleSubmit = async (event) => {

event.preventDefault();
// console.log(inputUser);
const res = await axios.post("http://localhost:5000/createuser", inputUser);

console.log(res);
fetchAllUser();

DEPARTMENT OF CSE, CUCEK 14

 MERN Stack Internship

};

// data fetching all

const [userData, setUserData] = useState([]);
const fetchAllUser = async () => {
const res = await axios.get("http://localhost:5000/readalluser");
console.log(res);
setUserData(res.data);
};
useEffect(() => {
fetchAllUser();
}, []);

const handleDelete = async (id) => {

const res = await axios.delete(`http://localhost:5000/delete/${id}`);
if (res.status === 200) {
fetchAllUser();
}
};
return (
<div className="w-2/3 mx-auto mt-5">
{/* creating form */}
<form onSubmit={handleSubmit}>
<h1>TO-DO LIST</h1>
<div className="">
<label className=" text-sm text-gray-500 ">Task</label>
<input
type="text"
name="name"
className="block py-2.5 px-3 w-full text-sm text-gray-900 bg-transparent border-2
border-gray-300"
placeholder="Enter name"
required
value={inputUser.name}
onChange={handleChnage}
/>
</div>
<div className="">
<label className=" text-sm text-gray-500 ">Start Date</label>
<input
type="Date"
name="email"
className="block py-2.5 px-3 w-full text-sm text-gray-900 bg-transparent border-2
border-gray-300"
placeholder="Enter email "
required
value={inputUser.email}
onChange={handleChnage}
/>
</div>
<div className="">
<label className=" text-sm text-gray-500 ">End Date</label>
<input

DEPARTMENT OF CSE, CUCEK 15

 MERN Stack Internship

type="Date"
name="password"
className="block py-2.5 px-3 w-full text-sm text-gray-900 bg-transparent border-2
border-gray-300"
placeholder="Enter Password "
required
value={inputUser.password}
onChange={handleChnage}
/>
</div>

<div className="flex justify-center my-4">

<button type="submit" className="px-4 py-2 bg-yellow-400 rounded-sm">
Add Task
</button>
</div>
</form>

<div className="relative overflow-x-auto shadow-md">

<table className="w-full text-lg text-center text-gray-500 ">
<thead className="text-[17px] text-gray-700 uppercase bg-gray-500">
<tr>
<th scope="col" className="px-6 py-3">
SN.
</th>
<th scope="col" className="px-6 py-3">
Task
</th>
<th scope="col" className="px-6 py-3">
Start Date
</th>
<th scope="col" className="px-6 py-3">
End Date
</th>
<th scope="col" className="px-6 py-3">
Actions
</th>
</tr>
</thead>
<tbody>
{userData.map((item, i) => (
<tr className="border-b bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
<th
scope="row"
className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-
white"
>
{i + 1}
</th>
<th
scope="row"
className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-
white >
{item?.name}

DEPARTMENT OF CSE, CUCEK 16

 MERN Stack Internship

</th>
<td className="px-6 py-4"> {item?.email}</td>
<td className="px-6 py-4"> {item?.password}</td>
<td className="px-6 py-4">
<div className="flex gap-x-4 justify-center">
<NavLink
to={`/readuser/${item._id}`}
className="font-medium text-green-600 dark:text-blue-500 hover:underline"
>
Read
</NavLink>
<NavLink
to={`/updateuser/${item._id}`}
className="font-medium text-yellow-400 dark:text-blue-500 hover:underline"
>
Edit
</NavLink>
<button
onClick={() => handleDelete(item._id)}
className="font-medium text-red-500 hover:underline"
>
Delete
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
};

export default Home;

Server.js
const express = require("express");
const { default: mongoose } = require("mongoose");
const app = express();
const PORT = 5000;
const cors = require("cors");

app.use(cors());
app.use(express.json());
// db connection
mongoose
.connect("mongodb+srv://adithyaraj232003:adith123@cluster0.ghqpolm.mongodb.net/")
.then(() => {
console.log("db connection succesfully");
})
.catch((error) => {
console.log(error);

DEPARTMENT OF CSE, CUCEK 17

 MERN Stack Internship

});

//user schema
const userSchema = new mongoose.Schema(
{
name: {
type: String,
required: true,
},
email: {
type: String,
required: true,
},
password: {
type: String,
required: true,
},
},
{ timestamps: true }
);

const User = mongoose.model("User", userSchema);

// create user
app.post("/createuser", async (req, res) => {
try {
const bodyData = req.body;
const user = new User(bodyData);
const userData = await user.save();
res.send(userData);
} catch (error) {
res.send(error);
}
});
// read all user

app.get("/readalluser", async (req, res) => {

try {
const userData = await User.find({});
res.send(userData);
} catch (error) {
res.send(error);
}
});
app.get("/read/:id", async (req, res) => {
try {
const id = req.params.id;
const user = await User.findById({ _id: id });
res.send(user);
} catch (error) {
res.send(error);
}
});

DEPARTMENT OF CSE, CUCEK 18

 MERN Stack Internship

// update user

app.put("/updateuser/:id", async (req, res) => {

try {
const id = req.params.id;
const user = await User.findByIdAndUpdate({ _id: id }, req.body, {
new: true,
});
res.send(user);
} catch (error) {
res.send(error);
}
});

app.delete("/delete/:id", async (req, res) => {

try {
const id = req.params.id;
const user = await User.findByIdAndDelete({ _id: id });
res.send(user);
} catch (error) {
res.send(error);
}
});

app.listen(PORT, () => {
console.log(`server ise running on ...${PORT}`);
});

DEPARTMENT OF CSE, CUCEK 19

 MERN Stack Internship

CHAPTER 7

COCLUSION
Concluding my MERN Full Stack Developer internship at Futura Labs has been a rewarding journey
into the world of web development. Working on diverse projects has allowed me to apply theoretical
knowledge, refine skills, and gain hands-on experience. The challenges were stimulating,
contributing significantly to my professional growth. The immersive work not only honed my
technical abilities but also provided a comprehensive understanding of the MERN stack.

A standout aspect was the emphasis on teamwork at Futura Labs. Collaborating with seasoned
developers in a team-oriented environment fostered camaraderie and showcased the power of
effective collaboration in achieving project goals. This experience has shaped my perspective on the
importance of teamwork in a professional setting.

Effective communication played a pivotal role in navigating project complexities. Regular

interactions with team members facilitated a seamless flow of ideas, and constructive feedback
proved invaluable in refining my work. This aspect enhanced my communication skills and
highlighted its significance in ensuring the success of a collaborative work environment.

In summary, my internship at Futura Labs has been transformative, combining technical growth with
the development of essential soft skills. The challenges have instilled confidence in my abilities, and
the lessons learned will undoubtedly shape my future endeavours in web development.

DEPARTMENT OF CSE, CUCEK 20