JJ Synopsis
JJ Synopsis
First Synopsis
Eighth Semester , Bachelor of Technology , Computer Science and Engineering
Department of CET
SUBMITTED TO :-
SUBMITTED BY :-
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
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.
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
1.4 JavaScript
• 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
1.7 NodeJS
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.
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.
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:
Frontend Frameworks/Libraries:
Sends user inputs (e.g., form data, button clicks) to the backend via API requests.
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:
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:
The three components communicate with each other through APIs (Application
Programming Interfaces).
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.
o The backend uses database drivers or ORM (Object Relational Mapping) tools
to interact with the database.
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
• Internet
SOFTWARE REQUIREMENTS
• VSCode
• ReactJS
• NodeJS
• Web browser
END
CHAPTER : 4 - BIBLIOGRAPHY
Books :-
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
WEBSITES :-
1. www.geeksforgeeks.com
2. freecodecamp.org
3. MDN Web Docs
4. W3Schools Online Web Tutorials