Scribd
Upload
36 views12 pages

JJ Synopsis

This document is a project report for a six-month industrial training on MERN Full Stack Development, detailing the development of a fully functional website using MERN technologies. It includes chapters on the introduction to the MERN stack, feasibility studies, methodology, and requirements for hardware and software. The report is submitted by Jatin Jarewal to Er. Surleen Kaur as part of the Bachelor of Technology program at Guru Nanak Dev University, Amritsar.

Uploaded by

Shantanu Mahajan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
36 views12 pages

JJ Synopsis

This document is a project report for a six-month industrial training on MERN Full Stack Development, detailing the development of a fully functional website using MERN technologies. It includes chapters on the introduction to the MERN stack, feasibility studies, methodology, and requirements for hardware and software. The report is submitted by Jatin Jarewal to Er. Surleen Kaur as part of the Bachelor of Technology program at Guru Nanak Dev University, Amritsar.

Uploaded by

Shantanu Mahajan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Guru Nanak Dev University , Amritsar

Six Month Industrial Training Project Report

First Synopsis
Eighth Semester , Bachelor of Technology , Computer Science and Engineering
Department of CET

MERN FULL STACK DEVELOPMENT


A Technical Project for making an fully functional website which have both
frontend and backend built using MERN Technologies.

SUBMITTED TO :-

Er. Surleen Kaur

SUBMITTED BY :-

Name : Jatin Jarewal

Roll No. : 17032100644


INDEX

Sr. No. TOPIC PAGE NO.


1. CHAPTER 1
INTRODUCTION
1.1 MERN Stack 1-3
1.2 HTML
1.3 CSS
1.4 JavaScript
1.5 ReactJS
1.6 MongoDB
1.7 NodeJS
2. CHAPTER 2
FEASIBILITY STUDY 4-5
2.1 Technical Feasibility
2.2 Operational Feasibility
2.3 Economic Feasibility
2.4 Schedule Feasibility

3. CHAPTER 3
METHODOLOGY 6-8
3.1 Front-end
3.2 Back-end
3.3 Database
3.4 Connectivity
4. CHAPTER 4 9
REQUIREMENTS
4.1 Hardware Requirements
4.2 Software Requirements

Bibliography
5. 10
Chapter : 1 - INTRODUCTION

1.1 MERN Stack

A stack is the mixture of technologies used to create Web applications. Any web application
will be made utilizing various technologies like (frameworks, libraries, databases).

The MERN stack is a JavaScript stack that is intended to make Application Development
process smoother.

1.2 HTML

HTML stands for HyperText Markup Language. It is used to design web pages using a
markup language. HTML is the combination of Hypertext and Markup language. Hypertext
defines the link between the web pages. A markup language is used to define the text
document within tag which defines the structure of web pages.

Elements and Tags

HTML uses predefined tags and elements which tell the browser how to properly display
the content. Remember to include closing tags. If omitted, the browser applies the effect of
the opening tag until the end of the page.
1.3 CSS

CSS (Cascading Style Sheets) is a stylesheet language used to design the


webpage to make it attractive. The reason for using this is to simplify the process
of making web pages presentable. It allows you to apply styles to web pages.
More importantly, it enables you to do this independent of the HTML that makes
up each web page. There are three types of CSS which are given below:
• Inline
• Internal or Embedded
• External

1.4 JavaScript

JavaScript is the world most popular lightweight, interpreted compiled programming


language. It is also known as scripting language for web pages. It is well-known for the
development of web pages, many non-browser environments also use it. JavaScript can be
used for Clientside developments as well as Server-side developments.

JavaScript can be added to your HTML file in two ways:

• Internal JS: We can add JavaScript directly to our HTML file by writing the code
inside the <script> tag. The <script> tag can either be placed inside the <head> or
the <body> tag according to the requirement.

• External JS: We can write JavaScript code in other file having an extension .js and
then link this file inside the <head> tag of the HTML file in which we want to add
this code.

1.5 ReactJS

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.
It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end library responsible
only for the view layer of the application.

React uses a declarative paradigm that makes it easier to reason about your application and
aims to be both efficient and flexible. It designs simple views for each state in your
application, and React will efficiently update and render just the right component when
your data changes. The declarative view makes your code more predictable and easier to
debug.

Features of React.js

Use JSX: It is faster than normal JavaScript as it performs optimizations while translating
to regular JavaScript. It makes it easier for us to create templates.

Virtual DOM: Virtual DOM exists which is like a lightweight copy of the actual DOM. So
for every object that exists in the original DOM, there is an object for that in React Virtual
DOM. It is exactly the same, but it does not have the power to directly change the layout of
the document. Manipulating DOM is slow, but manipulating Virtual DOM is fast as
nothing gets drawn on the screen.

One-way Data Binding: This feature gives you better control over your application.

Component: A Component is one of the core building blocks of React. In other words, we
can say that every application you will develop in React will be made up of pieces called
components. Components make the task of building UIs much easier. You can see a UI
broken down into multiple individual pieces called components and work on them
independently and merge them all in a parent component which will be your final UI.

Performance: React.js use JSX, which is faster compared to normal JavaScript and HTML.
Virtual DOM is a less time taking procedure to update webpages content.

1.6 MongoDB

MongoDB is an open-source, document-oriented, and one of the most popular NoSQL


database. NoSQL simply means a non-relational database i.e. there is no table-like
relational database structure instead there is a totally different mechanism for storing and
retrieving data. This format of storage is called BSON and is very much similar to JSON.

1.7 NodeJS

Node.js is an open-source and cross-platform runtime environment for executing


JavaScript code outside a browser. NodeJS is not a framework and it’s not a programming
language.
CHAPTER : 2 - FEASIBILITY STUDY

Feasibility study is made to see if the project/training on completion will serve the
purpose of the organization for the amount of work, effort and the time that spend on
it. Feasibility study lets the developer foresee the future of the project/training and the
usefulness. A feasibility study of a system proposal is according to its workability,
which is the impact on the organization, ability to meet their user needs and effective
use of resources. Thus when a new application is proposed it normally goes through a
feasibility study before it is approved for development.

• 2.1 - Technical Feasibility : Evaluating the technical feasibility is the trickiest


part of feasibility study. A number of issues have to be considered while doing a
technical analysis; understanding the different types of technologies involved in
the project. This project is technically feasible since all the required tools like
VSCode, JavaScript, ReactJS etc are easily available and handled.

• 2.2 - Operational Feasibility : The project/training is beneficial only if it can


be turned into information systems that will meet the operating requirements. The
operational feasibility asks if there are some major barriers to the implementation
i.e. if the project works properly when it is developed. It is simple to implement
and understand. It is free to operate on any system.
• 2.3 - Economic Feasibility: Economic feasibility attempts to weight the costs
of making the project against the benefits that would accrue from the project. A
simple economic analysis which gives the actual comparison of costs and benefits
are much meaningful in this case. This project/training includes the MERN Stack.
It is economically feasible since all the tools required (VSCode, Web Browser etc.)
are available free of cost.

• 2.4 - Schedule Feasibility : A project/training will fail if it takes too long to be


completed before it is useful. Schedule feasibility is a measure how reasonable the
project/training timetable is.
Chapter : 3 - METHODOLOGY

MERN Stack is a JavaScript Stack that is used for easier and faster deployment of full-stack
web applications.
MERN Stack comprises of 4 technologies namely: MongoDB, Express, React and Node.js.
It is designed to make the development process smoother and easier.

3.1 - Frontend (Client-Side or Web)

The Frontend is the user-facing part of the application that runs in a web browser. It is
responsible for displaying content, handling user interactions, and providing a seamless user
experience. It is built using:

 HTML– Defines the structure of web pages.

 CSS – Adds styling and design to web pages.

 JavaScript – Adds interactivity and dynamic behavior to the website.

 Frontend Frameworks/Libraries:

o React.js – A popular JavaScript library for building UI components.

o Angular – A TypeScript-based framework by Google.

o Vue.js – A lightweight JavaScript framework.

Role of the Frontend


 Displays data received from the backend.

 Sends user inputs (e.g., form data, button clicks) to the backend via API requests.

 Manages client-side state and user interactions.

3.2 - Backend (Server-Side)

The Backend is the brain of the application that processes requests from the frontend,
performs logic, and interacts with the database. It is developed using server-side
programming languages such as:

 Node.js (with Express.js framework) – Commonly used in MERN stack applications.

 Python (Django, Flask) – Used for web applications and APIs.

 Java (Spring Boot) – Enterprise-level backend development.

Role of the Backend

 Handles user authentication and authorization.

 Processes business logic and computations.

 Retrieves, stores, and updates data from the database.

 Sends appropriate responses back to the frontend.

3.3 - Database

A Database is responsible for storing and managing application data. It ensures data
persistence and retrieval when needed. Databases are categorized as:

 Relational Databases (SQL-based)

o Example: MySQL, PostgreSQL, Microsoft SQL Server.

o Data is stored in tables with predefined schemas.

 NoSQL Databases (Document-based, Key-Value Stores)

o Example: MongoDB, Firebase, Redis.

o More flexible, stores data in JSON-like format.

Role of the Database

 Stores user credentials, transaction details, product catalogs, etc.


 Ensures data integrity and security.

 Supports CRUD (Create, Read, Update, Delete) operations.

3.4 - Connectivity Between Frontend, Backend, and Database

The three components communicate with each other through APIs (Application
Programming Interfaces).

1. Frontend to Backend Communication:

o The frontend sends HTTP requests (GET, POST, PUT, DELETE) to the
backend using AJAX or Fetch API.

o Backend receives the request, processes it, and sends back a response (usually in
JSON format).

o Example: A login form sends user credentials to the backend API for validation.

2. Backend to Database Communication:

o The backend uses database drivers or ORM (Object Relational Mapping) tools
to interact with the database.

o Example: In a MERN stack project, Mongoose (ODM) is used to connect


Node.js (backend) with MongoDB.

3. Database to Backend to Frontend:

o Backend retrieves data from the database and sends it to the frontend.

o Example: When a user requests their expense records, the backend fetches data
from MongoDB and sends it as JSON to the frontend for display.
CHAPTER : 4 - REQUIREMENTS

HARDWARE REQUIREMENTS

• Laptop/Computer

• Minimum 4 GB RAM

• Processor 1.4 GHz 32/64-bit

• Hard Disk of size 6 GB or more

• Internet

SOFTWARE REQUIREMENTS

• Operating System (Windows/Linux/Mac)

• VSCode

• ReactJS

• NodeJS

• Web browser

END
CHAPTER : 4 - BIBLIOGRAPHY

Books :-

1. "MERN Stack Development with React, MongoDB, Express, and Node.js" –


by Shama Hoque
2. "Pro MERN Stack: Full Stack Web App Development with Mongo, Express,
React, and Node" – by Vasan Subramanian
3. "Mastering MERN Stack: Expert Full-Stack Web Development with
MongoDB, Express, React, and Node" – by Hugo Di Francesco

Articles :-

1. https://www.researchgate.net/publication/371459805_Introduction_to_MERN_Stack_
Comparison_with_Previous_Technologies
2. https://www.ijraset.com/research-paper/study-and-usage-of-mern-stack-for-web-
development
3. https://www.irjmets.com/uploadedfiles/paper/issue_11_november_2023/46315/final/
fin_irjmets1700210238.pdf
4. https://ijgst.com/admin/uploadss/3%20IJGSTAmir%20Khan%20Sk%20and%20J%20Jero
ne%20Gonsalvez.pdf

Paper and Documentations :-

1. Exploring MERN Stack and Tech Stacks: A Comparative Analysis -


https://www.irjet.net/archives/V10/i12/IRJET-V10I1258.pdf
2. MongoDB Documentation: https://www.mongodb.com/docs/
3. React.js Documentation : https://react.dev/
4. Node.js Documentation : https://nodejs.org/en/docs/

WEBSITES :-

1. www.geeksforgeeks.com
2. freecodecamp.org
3. MDN Web Docs
4. W3Schools Online Web Tutorials

You might also like