1.

1 INTRODUCTION

MERN is a popular acronym for a full-stack web development technology stack that includes
MongoDB, Express.js, React.js, and Node.js. This combination of technologies is used to create
robust, scalable, and efficient web applications.

MongoDB is a NoSQL database that provides high performance, scalability, and flexibility.
Express.js is a popular web application framework that runs on top of Node.js, providing a
simple and efficient way to build APIs. React.js is a JavaScript library for building user interfaces
that allows developers to create reusable UI components, and Node.js is a JavaScript runtime
that allows developers to build server-side applications.

With these four technologies, developers can build a complete web application from scratch.
MongoDB provides a robust and scalable database, Express.js provides a server-side
framework, React.js provides a powerful front-end library for building user interfaces, and
Node.js provides a scalable runtime environment.

MERN full stack development offers a lot of advantages, including increased development
speed, better scalability, and improved performance. The MERN stack is also highly popular
among developers due to its flexibility, ease of use, and the large number of resources available
online for learning and troubleshooting. If you're interested in full-stack web development,
learning MERN stack can be a great place to start.

1.2 FULL STACK APPS IN DAILY LIFE

Full-stack applications are used in various aspects of daily life, ranging from personal use to
business applications. Here are some examples:

1. E-commerce websites: Online shopping websites like Amazon, eBay, and Alibaba use full-
stack applications to provide a seamless shopping experience for their customers.

2. Social media applications: Social media platforms like Facebook, Twitter, and Instagram use
full-stack applications to provide users with a rich and engaging user experience.

3. Food delivery applications: Food delivery services like Grubhub, Uber Eats, and DoorDash
use full-stack applications to enable users to order food online and have it delivered to their
doorsteps.
4. Online banking applications: Banking applications like Chase, Bank of America, and Wells
Fargo use full-stack applications to provide users with secure access to their financial accounts.

5. Travel and booking applications: Travel and booking applications like Expedia, Booking.com,
and Airbnb use full-stack applications to provide users with a seamless booking experience for
flights, hotels, and rental properties.

6. Fitness and wellness applications: Fitness and wellness applications like Fitbit, MyFitnessPal,
and Headspace use full-stack applications to provide users with personalized health and
wellness recommendations.

Overall, full-stack applications have become an essential part of our daily lives, making tasks
more efficient, accessible, and convenient.

1.3 ARCHITECTURE OF FULL STACK APP

The architecture of a full-stack application typically consists of three main layers: the
presentation layer, the application layer, and the data layer.
1. Presentation layer: This layer is responsible for the user interface (UI) and handles the user's
interaction with the application. It includes components such as web pages, mobile screens, and
UI widgets that allow the user to interact with the application.

2. Application layer: This layer is responsible for the application logic and handles the business
logic of the application. It includes components such as web servers, APIs, and middleware that
connect the presentation layer with the data layer.

3. Data layer: This layer is responsible for storing and managing data used by the application. It
includes components such as databases, data storage systems, and data access layers that
manage data storage and retrieval.

Full-stack applications also use various technologies to support these layers, such as:

1. Front-end technologies: These are the technologies used to build the presentation layer, such
as HTML, CSS, and JavaScript frameworks like React, Angular, or Vue.js.

2. Back-end technologies: These are the technologies used to build the application layer, such
as server-side programming languages like Node.js, PHP, or Python, as well as web
frameworks like Express.js, Django, or Laravel.

3. Database technologies: These are the technologies used to build the data layer, such as SQL
databases like MySQL, PostgreSQL, or Oracle, or NoSQL databases like MongoDB or
Cassandra.

Full-stack applications typically use a combination of these technologies to build a complete,

scalable, and efficient application. The architecture should be designed in such a way that the
different layers can communicate and work seamlessly together, allowing for a smooth and
reliable user experience.

2. MERN STACK
MERN stack is a popular technology stack used for full-stack web development. It is composed
of four main components:

1. MongoDB: MongoDB is a NoSQL database used for storing and managing the application's
data. It is a highly scalable and flexible database that can handle large amounts of data and
offers easy integration with Node.js.

2. Express.js: Express.js is a popular web application framework used to build the back-end of
the MERN stack application. It is a flexible and lightweight framework that provides a set of
features and tools to build RESTful APIs and web applications.

3. React.js: React.js is a JavaScript library used to build the front-end of the MERN stack
application. It is a powerful library that provides a set of reusable UI components to create user
interfaces. It is used to create dynamic and responsive user interfaces that can handle complex
user interactions.

4. Node.js: Node.js is a JavaScript runtime environment that is used to run server-side

applications. It is a scalable and efficient platform that provides a set of features and tools to
build back-end applications. It is used to connect the front-end and back-end of the MERN stack
application, handle server-side logic, and manage data from the MongoDB database.
Together, these four components provide a comprehensive technology stack for building full-
stack web applications. They offer flexibility, scalability, and efficiency, making it easy to build
robust and reliable web applications.

1.MongoDb
MongoDB is a popular NoSQL document-based database used for building scalable and flexible
applications. Unlike traditional relational databases that store data in tables, MongoDB stores
data in documents, making it a flexible database that can handle a wide range of data types and
structures.

Here are some key features and characteristics of MongoDB:

1. Document-based database: MongoDB stores data in flexible, JSON-like documents, making

it easy to handle a wide range of data types and structures.

2. Scalable and flexible: MongoDB is highly scalable and can handle large volumes of data with
ease. It also offers flexible data modeling, allowing developers to change the data schema
easily as the application evolves.

3. Query language: MongoDB uses a flexible and expressive query language that allows
developers to perform complex queries easily.

4. High availability and fault tolerance: MongoDB is designed for high availability and fault
tolerance. It can automatically handle node failures and ensure that data remains available and
consistent.

5. Open source: MongoDB is an open-source database that is freely available and can be used
without any licensing fees.

Some common use cases for MongoDB include:

1. Real-time analytics: MongoDB is used for real-time analytics and reporting, allowing
developers to store and analyze large volumes of data in real-time.

2. Content management: MongoDB is used for content management, providing a flexible

database that can store a wide range of content types and formats.

3. Internet of Things (IoT): MongoDB is used for IoT applications, providing a scalable and
flexible database that can handle the high volume of data generated by IoT devices.

4. E-commerce: MongoDB is used for e-commerce applications, providing a flexible and

scalable database that can handle large volumes of transactional data.

Overall, MongoDB is a popular NoSQL database that provides flexibility, scalability, and
performance, making it an excellent choice for building modern applications.

2.Express Js
Express.js is a popular web application framework for Node.js, used to build scalable and robust
server-side web applications. It is a minimal and flexible framework that provides a set of
features and tools to build web applications and APIs quickly and easily.

Here are some key features and characteristics of Express.js:

1. Middleware: Express.js uses middleware functions to handle requests and responses.

Middleware functions are functions that take in a request object (req), a response object (res),
and a next function as arguments, and they can perform various tasks such as modifying the
request or response objects, logging requests, handling errors, and more.

2. Routing: Express.js provides a simple and flexible routing system that allows developers to
define routes for different HTTP methods (GET, POST, PUT, DELETE, etc.) and URL patterns.

3. Template engines: Express.js supports various template engines such as EJS, Pug, and
Handlebars, allowing developers to create dynamic HTML views.

4. Error handling: Express.js provides a simple and flexible error-handling mechanism that
allows developers to handle errors gracefully and provide useful error messages to clients.

5. Middleware and plugin ecosystem: Express.js has a large and active middleware and plugin
ecosystem, providing developers with a wide range of tools and features to build web
applications quickly and easily.

Some common use cases for Express.js include:

1. Building web applications: Express.js is used to build scalable and robust server-side web
applications.
2. Building APIs: Express.js is used to build RESTful APIs that provide data and services to
client applications.

3. Building microservices: Express.js is used to build microservices that can be used as building
blocks for larger applications.

Overall, Express.js is a powerful and flexible web application framework that provides
developers with the tools and features needed to build modern and scalable web applications
and APIs.

3.React Js
React.js is a popular JavaScript library used for building user interfaces (UIs) for web and
mobile applications. It was developed by Facebook and is used by many large-scale companies
such as Airbnb, Netflix, and Instagram.

Here are some key features and characteristics of React.js:

1. Component-based: React.js is a component-based library, meaning that UIs are built using
individual components. Each component is responsible for rendering a specific part of the UI
and can be reused throughout the application.
2. Virtual DOM: React.js uses a virtual DOM (Document Object Model), which is an in-memory
representation of the actual DOM. This allows React to update the UI efficiently, by only
updating the parts of the UI that have changed, rather than re-rendering the entire page.

3. JSX syntax: React.js uses JSX syntax, which is a JavaScript extension that allows
developers to write HTML-like code within JavaScript. This makes it easy to build UI
components and helps to keep the code organized and maintainable.

4. State management: React.js provides a simple and efficient way to manage application state
using the `state` object. When the state changes, React automatically updates the UI, ensuring
that the UI is always in sync with the application data.

5. Unidirectional data flow: React.js follows a unidirectional data flow pattern, which means that
data flows in one direction, from parent components to child components. This helps to keep the
code organized and makes it easy to understand how data is being passed between
components.

Some common use cases for React.js include:

1. Building web applications: React.js is used to build web applications with complex user
interfaces, such as social networks, e-commerce platforms, and data-driven dashboards.

2. Building mobile applications: React.js is used to build mobile applications using frameworks
such as React Native, which allows developers to build native mobile apps for iOS and Android
using JavaScript.

3. Building reusable UI components: React.js is used to build reusable UI components that can
be used across different applications and projects.

Overall, React.js is a powerful and flexible library that provides developers with the tools and
features needed to build modern and scalable web and mobile applications.

4.Node Js
Node.js is a popular open-source server-side runtime environment that allows developers to
build scalable and high-performance network applications using JavaScript. It was developed by
Ryan Dahl in 2009 and is based on the V8 JavaScript engine from Google.

Here are some key features and characteristics of Node.js:

1. Asynchronous and event-driven: Node.js uses an event-driven, non-blocking I/O model,

which makes it lightweight and efficient for building scalable network applications. It allows
multiple requests to be processed simultaneously, without blocking the execution of other code.

2. Cross-platform: Node.js can be used on different operating systems such as Windows, Linux,
and macOS, making it easy for developers to build applications that can run on different
platforms.

3. Built-in modules: Node.js provides a set of built-in modules, such as the HTTP module for
building web servers, the File System module for working with files and directories, and the
Stream module for working with streaming data.

4. NPM: Node.js has a built-in package manager called NPM (Node Package Manager), which
provides access to thousands of open-source libraries and packages that can be used to build
applications quickly and easily.

5. Easy to learn: Node.js is based on JavaScript, which is a popular and widely-used

programming language. This makes it easy for web developers to learn and use Node.js, as
they can leverage their existing knowledge of JavaScript to build server-side applications.
Some common use cases for Node.js include:

1. Building web servers: Node.js is commonly used to build web servers that can handle large
numbers of concurrent connections.

2. Building APIs: Node.js is commonly used to build APIs (Application Programming Interfaces)
that provide data and services to client applications.

3. Building real-time applications: Node.js is commonly used to build real-time applications such
as chat applications and collaborative tools, where data needs to be updated in real-time.

4. Building command-line tools: Node.js can be used to build command-line tools and scripts for
automating tasks and performing system operations.

Overall, Node.js is a powerful and flexible platform that provides developers with the tools and
features needed to build modern and scalable network applications using JavaScript.

ABOUT THE PROJECT LEARNT DURING THE INTERNSHIP

Mini social network that I made as my first web app project.

It’s Built With

● React - A JavaScript library for building user interfaces

● Redux - State managment
● Semantic UI React - UI
● Socket.io - Used for realtime features
● Node - Used for backend
● Mongodb - Database

Features

● Like posts, comments, replies

● See likes for posts, comments, replies
● Follow, unfollow
● Update user information
 ● Search users
● Tag people on post and in comments with autocomplete
● Send verification email
● Pagination for home feed, user profile, hashtag page, location page, notifications,
comments, replies
● Realtime
● Get notification when someone likes your post, comment, reply, tag you on post or reply
on comment
● Chat send text message, image
● Seen feature and activity status of user

Installing

● Install dependencies
● npm i && cd client && npm i && cd ..

● Create variables.env file and replace values with yours

● NODE_ENV=development
● DATABASE="Mongodb Connection String"
● JWT_KEY="secretkey"
● EMAILUSER="[email protected]"
● EMAILPASS="example"
● HOST="your ip eg. http://192.168.0.14:5000"
● ENABLE_SEND_EMAIL="true or false" // false if you don't want to set it up
● TEST_DATABASE="testing db"
● Go into client/src/_services/socketService.js and replace
● window.location.hostname
● with your local IP address on port 5000 eg.

● 192.168.0.14:5000
● Run project
● npm run dev

Sample screenshots
In this project, I developed a social networking site using the MERN stack.
The social networking site will have the following features:

1. User Authentication and Authorization: Users will be able to create an account and log in to
the site. They will also be able to reset their password and edit their profile.

2. User Profiles: Each user will have a profile page where they can view their information and
edit their details.

3. Friends: Users will be able to send and accept friend requests, view their friends' profiles, and
see their activity on the site.

4. Posts: Users will be able to create posts, like and comment on other users' posts, and view
posts from their friends.

5. Notifications: Users will receive notifications for friend requests, post likes, and comments.

6. Search: Users will be able to search for other users and posts on the site.

The technology stack we will use to develop this application is as follows:

1. MongoDB: We will use MongoDB as our database to store user data, posts, and notifications.

2. Express.js: We will use Express.js to build the backend API to interact with the database and
serve data to the frontend.

3. React.js: We will use React.js to build the frontend user interface.

4. Node.js: We will use Node.js as our server-side runtime environment.

We will also use other libraries and tools, such as Mongoose for database modeling, Axios for
HTTP requests, and Redux for state management.

Overall, the goal of this project is to build a fully functional social networking site using the
MERN stack.