Internship Report

On
“Full Stack Web Development”

Session 2023-2024

SUBMITTED TO SUBMITTED BY
Pankaj Swami Vaishnav
CSE Department 20EWECS022
4th Year 7th Semester

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

St. Wilfreds Institute of Engineering & Technology
CERTIFICATE
 AKNOWLEDGEMENT

I would like to express my heartfelt gratitude to the following individuals and organizations for their invaluable
support and guidance throughout my 2-month summer internship at Bharat Intern:

Yours sincerely
Pankaj Swami Vaishnav
20EWECS022
 ABSTRACT
This internship report encapsulates a comprehensive exploration of the MERN stack, followed by a detailed
account of a 2-month summer internship at Bharat Intern, where the author successfully completed a dynamic
blog web project. The MERN stack, comprising MongoDB, Express.js, React, and Node.js, is examined in-depth,
shedding light on each component's role in modern web development. The report then transitions into a
meticulous examination of the blog project, highlighting key features such as user authentication, blog
creation and management, interaction functionalities (like and dislike), commenting systems, and profile
customization. The author also navigates through the technical implementations, challenges faced, and
solutions devised during the internship. This report aims to serve as a valuable resource for those seeking a
comprehensive understanding of the MERN stack and those interested in the practical application of these
technologies in a real-world project setting.
 CONTENTS
0. List of Abbreviations 1
1. Introduction 2
2. Mern Stack 2
2.1. JavaScript 2
2.2. Node.js 3
2.3. Express.js 4
2.4. MongoDB 5
2.5. React.js 6
2.5.1.1. Virtual Dom 6
2.5.1.2. Component 7
2.5.1.3. Props and State 7
2.5.1.4. Pros and Cons of ReactJS 7
2.6. MERN Stack in Website Development 7
2.6.1. Concept of Stack technology 8
2.6.2. Concept of MERN Stack 8
2.6.3. Highlights in MERN Stack 8
3. Blog Application 9
3.1. Home Page 9
3.2. Login System 11
3.2.1. Sign Up 11
3.2.2. Sign In 16
3.3. Dashboard 19
3.3.1. User Dashboard 19
3.4. Blog Page 25
3.4.1. Create Blog 25
3.4.2. Read Blog 25
3.4.3. Update Blog 26
3.4.4. Delete Blog 26
3.5. Deployment 27
 List of Abbreviations

DOM Document Object Model

W3C World Wide Web Consortium.
ISO International Organization for Standardization
NPM Node Package Manager
API Application Program Interface
HTML Hypertext Markup Language
HTTP Hypertext Transfer Protocol
URL Uniform Resource Locator
JSON JavaScript Object Notation
JS JavaScript
JSX JavaScript XML
XML Extensive Markup Language
 Introduction
In the dynamic landscape of modern web development, the MERN stack has emerged as a powerful
and versatile set of technologies, seamlessly integrating MongoDB, Express.js, React, and Node.js. This report
chronicles a transformative 2-month summer internship at Bharat Intern, where I delved into the intricacies of
MERN stack development, culminating in the creation of a feature-rich blog web application.
MERN Stack: A Technological Symphony
The MERN stack, an acronym for MongoDB, Express.js, React, and Node.js, represents a comprehensive
and cohesive set of technologies that collectively facilitate the development of robust and scalable web
applications. MongoDB, a NoSQL database, serves as the data storage layer, providing flexibility and scalability.
Express.js, a minimalist web application framework for Node.js, streamlines server-side development, while
React, a declarative and efficient JavaScript library, excels in building interactive user interfaces on the client
side. Node.js, with its event-driven and non-blocking architecture, acts as the server-side runtime, unifying the
entire stack into a seamless and efficient development environment.

Mern Stack
The MERN stack is a popular JavaScript-based technology stack used for building full-stack web
applications. It stands for MongoDB, Express.js, React.js, and Node.js - each representing a specific component
of the stack. In this introduction, we will explore each of these technologies and understand how they work
together to create powerful and efficient web applications.
MongoDB
MongoDB is a NoSQL database that stores data in a flexible, JSON-like format called BSON (Binary JSON). It is
known for its scalability, high performance, and ability to handle large amounts of data. MongoDB is a
document-oriented database, which means it stores data in documents rather than tables, making it highly
suitable for handling complex and evolving data structures.
Express.js
Express.js is a minimalistic and flexible web application framework for Node.js. It provides a robust set of
features for building web applications and APIs, such as routing, middleware support, and template engine
integration. Express.js simplifies the process of building server-side applications by providing a lightweight and
unopinionated framework that allows developers to structure their code as per their requirements.
React.js
React.js is a powerful JavaScript library used for building user interfaces. It allows developers to create
reusable UI components and efficiently manage the state of an application. React.js follows a component-
based architecture, where each component represents a specific part of the user interface. This approach
allows for better code organization, reusability, and improved performance by selectively updating only the
necessary parts of the UI.
Node.js
Node.js is a JavaScript runtime environment built on Chrome's V8 JavaScript engine. It allows developers to
run JavaScript on the server-side, enabling the creation of highly scalable and efficient web applications.
Node.js provides a vast ecosystem of packages and modules through its package manager, npm, which allows
developers to easily integrate libraries and tools into their applications.

JavaScript
 JavaScript is a versatile and powerful programming language that is widely used for web development,
both on the client-side and server-side. It was originally created as a scripting language to add interactivity to
web pages but has evolved into a full-fledged programming language with extensive capabilities.
Here are some key aspects and features of JavaScript:
1. Client-side scripting: JavaScript is primarily known for its ability to run directly in a web browser,
allowing developers to enhance web pages with dynamic and interactive elements. It enables actions
such as form validation, DOM manipulation, event handling, and asynchronous requests to the server.

2. Object-oriented programming: JavaScript supports object-oriented programming paradigms, allowing

developers to create and manipulate objects with properties and methods. It provides features like
classes, inheritance, encapsulation, and polymorphism, making it a flexible language for building
complex applications.

3. Dynamic and loosely typed: JavaScript is dynamically typed, meaning that variables can hold values of
any type and can be changed at runtime. This flexibility allows for rapid prototyping and easy
adaptation to changing requirements. However, it also requires careful handling to prevent unexpected
behavior.

4. Functional programming: JavaScript supports functional programming concepts, such as higher-order

functions, first-class functions, and closures. These features enable developers to write clean, concise,
and reusable code, promoting modularity and maintainability.

5. Asynchronous programming: JavaScript has built-in support for asynchronous programming through
the use of callbacks, promises, and async/await syntax. This allows for non-blocking operations, such as
making API calls or handling user interactions, without blocking the execution of other code.

6. Cross-platform compatibility: JavaScript is supported by all major web browsers, making it a widely
compatible language for building web applications. Additionally, JavaScript can be used on the server-
side with Node.js, enabling developers to build full-stack applications using a single language.

7. Vibrant ecosystem and libraries: JavaScript has a vast and active ecosystem, with numerous libraries
and frameworks available for various purposes. Popular libraries like React, Angular, and Vue.js
facilitate the development of complex user interfaces, while frameworks like Express.js and Nest.js
simplify server-side development.

8. Integration with HTML and CSS: JavaScript seamlessly integrates with HTML and CSS, allowing
developers to manipulate web page elements, style them dynamically, and respond to user
interactions. This integration enables the creation of rich and interactive web experiences.

9. Extensibility: JavaScript can be extended through the use of external libraries and APIs, allowing
developers to leverage existing code and functionality. This extensibility promotes code reuse,
accelerates development, and simplifies complex tasks.
JavaScript's versatility and widespread adoption make it a fundamental language in web development.
Its ability to run on both the client and server sides, support for various programming paradigms, and
extensive ecosystem of libraries and frameworks make it a powerful tool for building modern and responsive
web applications.
Node.js
Node.js is a powerful and widely-used JavaScript runtime built on Chrome's V8 JavaScript engine. It enables
developers to run JavaScript code on the server-side, opening up new possibilities for building scalable,
efficient, and high-performance web applications.
Here are some key aspects and features of Node.js:
1. Asynchronous and event-driven: Node.js is designed around an event-driven architecture, making it
highly efficient for handling concurrent operations. It utilizes non-blocking I/O operations, allowing
multiple requests to be processed simultaneously without blocking the execution of other code. This
asynchronous nature makes Node.js particularly suitable for building real-time applications and
handling high loads.

2. Scalability and performance: Node.js is known for its scalability and performance benefits. Its event-
driven architecture, combined with non-blocking I/O operations, allows it to handle a large number of
concurrent connections efficiently. This makes it ideal for building applications that require high
scalability, such as chat applications, streaming services, or real-time collaborative tools.

3. NPM ecosystem: Node.js has a vast ecosystem of packages and libraries through the Node Package
Manager (NPM). NPM provides easy access to thousands of open-source modules, enabling developers
to leverage existing code and accelerate development. This expansive ecosystem covers a wide range
of functionalities, including web frameworks, database connectors, authentication middleware, and
much more.

4. Full-stack JavaScript: Node.js enables developers to use JavaScript on both the client-side and server-
side, providing a unified programming language for full-stack development. This eliminates the need to
switch between different languages, simplifying the development process and promoting code reuse.

5. Rapid development: Node.js promotes rapid development due to its lightweight and efficient nature. It
offers a built-in module system and a rich set of APIs, allowing developers to quickly build server-side
applications. Additionally, the availability of numerous third-party libraries and frameworks further
accelerates development, enabling developers to focus on building core features.

6. Microservices and APIs: Node.js is well-suited for building microservices and APIs. Its lightweight and
modular architecture make it easy to create and deploy small, independent services that can be
combined to build complex applications. Additionally, Node.js provides powerful tools for building
RESTful APIs, making it a popular choice for building backend services.

7. Real-time applications: Node.js excels in building real-time applications that require instant data
updates and bidirectional communication between clients and servers. With libraries like Socket.io,
developers can easily establish real-time connections and build applications such as chat platforms,
collaborative tools, or real-time analytics dashboards.

8. Community support: Node.js has a vibrant and active community, with numerous resources, tutorials,
and forums available for developers. This community support ensures that developers can find help,
share knowledge, and stay updated with the latest trends and best practices in Node.js development.

Express.js
 Express.js is a minimalistic and flexible web application framework for Node.js. It provides a simple yet
powerful set of features that enable developers to build robust and scalable web applications quickly and
efficiently. Express.js is widely adopted due to its simplicity, performance, and extensive ecosystem.
Here are some key aspects and features of Express.js:
1. Routing: Express.js simplifies the routing process by providing an intuitive and flexible routing system.
Developers can define routes for different HTTP methods (GET, POST, PUT, DELETE, etc.) and handle
requests to specific URLs. This allows for creating clean and organized APIs, making it easy to handle
different request types and parameters.

2. Middleware: Middleware functions play a crucial role in Express.js. They are functions that have access
to the request and response objects and can perform tasks like authentication, logging, error handling,
and more. Middleware functions can be used globally or applied to specific routes, providing flexibility
in defining application-level and route-specific logic.

3. Template engines: Express.js allows developers to use various template engines to generate dynamic
HTML pages. Popular template engines like EJS, Pug (formerly known as Jade), and Handlebars
integrate seamlessly with Express.js, enabling the rendering of dynamic content on the server before
sending it to the client.

4. Modularity: Express.js follows a modular approach, allowing developers to organize their application
into smaller, reusable components called middleware and routers. This promotes code reusability,
maintainability, and scalability by separating concerns and making it easier to add or modify
functionality.

5. Error handling: Express.js provides built-in error handling mechanisms, making it simple to catch and
handle errors during the request-response cycle. It allows developers to define custom error-handling
middleware to centrally manage and respond to errors, improving the application's reliability and user
experience.

6. Static file serving: Express.js makes it easy to serve static files such as HTML, CSS, and client-side
JavaScript. By defining a static directory, developers can serve these files directly from the server,
eliminating the need for a separate web server for static content.

7. Integration and extensibility: Express.js seamlessly integrates with other libraries and middleware
modules, allowing developers to leverage their functionality in their applications. It provides a vast
ecosystem of third-party middleware and extensions through the npm package manager, enabling
developers to add functionalities like authentication, database integration, logging, and more.

8. Community and documentation: Express.js has a large and active community that provides extensive
documentation, tutorials, and resources. The community support ensures that developers have access
to helpful guides, examples, and best practices, making it easier to learn and master Express.js.

9. Performance: Express.js is known for its excellent performance and scalability. It is lightweight and
unopinionated, allowing developers to build efficient applications tailored to their specific needs. Its
non-blocking I/O model and the ability to handle a large number of concurrent requests make it well-
suited for building high-performance web applications.

MongoDB
 MongoDB is a popular NoSQL database that is often used in the MERN stack, which stands for
MongoDB, Express.js, React, and Node.js. MongoDB is a document-oriented database that provides a flexible
and scalable solution for storing and retrieving data. It is designed to handle unstructured and semi-structured
data, making it well-suited for modern web applications.
In the MERN stack, MongoDB serves as the database layer, where data is stored and managed. It offers several
key features that make it a favorable choice for MERN stack development:
Schema flexibility: Unlike traditional relational databases, MongoDB does not enforce rigid schemas. It allows
developers to store documents with varying structures within the same collection. This flexibility is particularly
beneficial in agile development environments where requirements may change frequently.
Scalability: MongoDB is horizontally scalable, meaning it can distribute data across multiple servers to handle
high traffic and large datasets. This scalability is crucial for handling the demands of modern web applications
that experience rapid growth and require efficient handling of data.
Querying and indexing: MongoDB provides a flexible and powerful querying language that allows developers
to search and retrieve data efficiently. It supports a wide range of queries, including complex queries involving
nested data structures. Additionally, MongoDB supports indexing, which improves query performance for
frequently accessed fields.
JSON-like document model: MongoDB uses a document model that stores data in JSON-like documents called
BSON (Binary JSON). This document-oriented approach aligns well with the JavaScript-based MERN stack, as
JSON is a common data interchange format in JavaScript. This simplifies data manipulation and integration
with the rest of the MERN stack.
Replication and high availability: MongoDB supports replication, allowing for the creation of replica sets. This
ensures data redundancy and high availability by automatically synchronizing data across multiple servers. In
the event of a server failure, MongoDB can seamlessly switch to a replica, minimizing downtime and ensuring
data integrity.
Aggregation framework: MongoDB offers a powerful aggregation framework that allows developers to
perform complex data aggregations, transformations, and computations directly within the database. This
reduces the need for transferring large amounts of data to the application server, improving performance and
reducing network overhead.
Community and ecosystem: MongoDB has a large and active community, providing ample resources,
documentation, and support. It offers extensive integration capabilities, including official MongoDB drivers for
various programming languages, including Node.js. This makes it easy to integrate MongoDB into the Node.js-
based backend of the MERN stack.
In the MERN stack, MongoDB is typically used in conjunction with Node.js and Express.js to handle data
storage, retrieval, and manipulation on the backend. React, on the other hand, handles the frontend user
interface and interacts with the backend APIs to fetch and display data stored in MongoDB.

React.js
React.js is a popular JavaScript library for building user interfaces. It provides a component-based
architecture, making it easy to develop reusable and modular UI components. React.js utilizes a virtual DOM,
which is a lightweight representation of the actual DOM, to efficiently update and render UI elements.
Here are some key concepts and features of React.js:
Virtual DOM:
 React.js uses a virtual DOM, an in-memory representation of the actual DOM, to optimize rendering
performance. When the state of a component changes, React.js efficiently updates only the necessary parts of
the virtual DOM before applying those changes to the real DOM. This approach minimizes actual DOM
manipulations, resulting in improved performance and smoother user experiences.
Component:
React.js organizes the UI into reusable and self-contained components. Components encapsulate their
own logic, state, and UI elements, making them modular and easy to maintain. Components can be composed
together to build complex UIs and can be reused across different parts of an application.
Props and State:
Props and state are two fundamental concepts in React.js. Props (short for properties) are used to pass
data from a parent component to its child components. They are read-only and help maintain the
unidirectional flow of data. On the other hand, state represents the internal data of a component and can be
modified using the setState method. When the state of a component changes, React.js automatically re-
renders the component and its child components, reflecting the updated UI.
Pros of React.js:
1. Reusability: React.js promotes code reusability through its component-based architecture.
Components can be easily reused, reducing code duplication and making development more efficient.

2. Efficient rendering: React.js utilizes a virtual DOM, allowing it to efficiently update and render only the
necessary parts of the UI. This results in improved performance and a smoother user experience.

3. Unidirectional data flow: React.js follows a unidirectional data flow, making it easier to understand and
debug the flow of data within an application. This approach helps maintain a predictable state and
simplifies application logic.

4. Large community and ecosystem: React.js has a large and active community, providing extensive
resources, libraries, and tools. This makes it easier to find support, learn from others, and integrate
React.js with various technologies.
Cons of React.js:
1. Learning curve: React.js has a learning curve, especially for developers who are new to the component-
based architecture and concepts like props and state. However, once the fundamentals are grasped,
development becomes more efficient.

2. Complexity for small projects: React.js may introduce unnecessary complexity for small, simple
projects. If the project doesn't require much interactivity or state management, using a simpler library
or framework might be more appropriate.

3. Boilerplate code: React.js can require writing more code compared to other libraries or frameworks.
This is especially true when handling state management or handling complex UI interactions. However,
this can be mitigated by using additional libraries or frameworks like Redux or MobX.

MERN Stack in Website Development

The MERN stack is a powerful technology stack for building dynamic web applications. It combines
MongoDB, Express.js, React.js, and Node.js to offer a full JavaScript stack that is flexible, efficient, and scalable.
With its advantages of code reusability, scalability, flexibility, and a vibrant community, the MERN stack
provides developers with the necessary tools to build modern and robust web applications.
Concept of Stack Technology
Stack technology refers to a combination of programming languages, frameworks, and tools used to
build web applications. It typically consists of a frontend framework or library, a backend framework, a
database, and an operating system. Stacks provide a cohesive set of technologies that work together to create
a full-fledged web application.
Concept of MERN Stack
MERN stack is a popular and powerful technology stack used for building dynamic web applications. It
consists of four key components:
MongoDB: MongoDB is a NoSQL database that stores data in a flexible and scalable JSON-like format. It
provides a document-based data model, making it highly suitable for applications that require flexibility and
scalability.
Express.js: Express.js is a backend web application framework for Node.js. It simplifies the process of building
server-side applications by providing a robust set of features for routing, middleware, and handling HTTP
requests and responses.
React.js: React.js is a frontend JavaScript library for building user interfaces. It allows developers to create
reusable UI components and efficiently update and render them using a virtual DOM. React.js enables the
creation of interactive and dynamic user interfaces.
Node.js: Node.js is a JavaScript runtime that allows developers to run JavaScript code on the server-side. It
provides a scalable and efficient platform for building server-side applications. Node.js, together with
Express.js, forms the backend of the MERN stack.
Highlights of MERN Stack
The MERN stack offers several advantages and highlights that make it a popular choice among
developers:
Full JavaScript stack: MERN stack allows developers to use JavaScript throughout the entire application, from
frontend to backend. This provides consistency and simplifies the development process by using a single
language.
Efficient and reusable code: React.js enables the creation of reusable UI components, reducing code
duplication and making development more efficient. Components can be easily shared and reused across
different parts of the application.
Scalability: MERN stack allows for horizontal scaling, which means that the application can handle increased
traffic by adding more servers. This makes it suitable for building applications that require scalability and can
handle high loads.
Flexibility: MongoDB, being a NoSQL database, provides flexibility in terms of data modeling. It allows
developers to store and retrieve data in a way that suits the application's specific requirements.
Active community and ecosystem: MERN stack has a large and active community that provides extensive
resources, libraries, and tools. This ensures that developers have access to support, documentation, and a
wide range of third-party packages that can enhance the development process.
Rapid development: MERN stack enables rapid development due to its use of reusable components, efficient
rendering with React.js, and the availability of various tools and libraries. This helps developers build
applications quickly and efficiently.
 Blog Application
I designed and developed a dynamic blog website using the MERN (MongoDB, Express, React, Node.js) stack.
The platform empowers users to freely share their thoughts and ideas by creating and publishing personalized
blogs. Through intuitive user interfaces and efficient back-end processes, the website provides a seamless
experience for writers to showcase their creativity while engaging readers with compelling content. With a
focus on user interaction and functionality, the blog website encourages a thriving community of writers and
readers to connect and explore diverse perspectives on a wide range of topics.

Home Page

Homepage.js
import React from "react";
import { Container, Heading, Stack, Text, Button } from "@chakra-ui/react";
import { useNavigate } from "react-router-dom";

const Homepage = () => {

const navigate = useNavigate();

const loggedIn = sessionStorage.getItem("loggedInValue");

return (
<>
<Container maxW={"5xl"}>
<Stack
textAlign={"center"}
align={"center"}
spacing={{ base: 8, md: 10 }}
py={{ base: 20, md: 28 }}
>
<Heading
fontWeight={600}
fontSize={{ base: "3xl", sm: "4xl", md: "6xl" }}
 lineHeight={"110%"}
color={"black"}
>
Unleash Your Inner Writer:{" "}
<Text as={"span"} color={"#3182CE"}>
Publish Your Passionate Blogs with Ease
</Text>
</Heading>
<Text color={"gray.500"} maxW={"3xl"}>
Discover the ultimate platform for aspiring writers to unleash their
creativity. Write and publish your own blogs effortlessly,
expressing your passions, interests, and expertise. Connect with a
diverse community of writers, receive feedback, and grow your
audience. Fuel your passion for writing and embark on a journey of
self-expression, one blog post at a time.
</Text>
{loggedIn ? (
<Stack spacing={6} direction={"row"}>
<Button
rounded={"full"}
px={6}
colorScheme={"orange"}
bg={"#3182CE"}
_hover={{ bg: "blue.700" }}
onClick={(e) => {
navigate("/blogs");
}}
>
Read Blogs
</Button>
</Stack>
):(
<>
<Stack spacing={6} direction={"row"}>
<Button
rounded={"full"}
px={6}
colorScheme={"orange"}
bg={"#3182CE"}
_hover={{ bg: "blue.700" }}
onClick={(e) => {
navigate("/login");
}}
>
Sign in
</Button>
<Button
rounded={"full"}
px={6}
colorScheme={"orange"}
bg={"#3182CE"}
_hover={{ bg: "blue.700" }}
onClick={(e) => {
navigate("/register");
}}
 >
Sign up
</Button>
</Stack>
<Stack>
<Button
rounded={"full"}
px={6}
colorScheme={"orange"}
bg={"#3182CE"}
_hover={{ bg: "blue.700" }}
onClick={(e) => {
navigate("/blogs");
}}
>
Read Blogs
</Button>
</Stack>
</>
)}
</Stack>
</Container>
</>
);
};

export default Homepage;

Login System
1. Sign Up
Register.js

import {
Flex,
Box,
FormControl,
FormLabel,
Input,
InputGroup,
InputRightElement,
Stack,
Button,
Heading,
Text,
} from "@chakra-ui/react";
import { useState } from "react";
import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
import { Link, useNavigate } from "react-router-dom";
import axios from "axios";
import { useToast, Spinner } from "@chakra-ui/react";

export default function Register() {

const toast = useToast();
const [showPassword, setShowPassword] = useState(false);

const navigate = useNavigate();

const [name, setName] = useState("");

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [profile, setProfile] = useState("");

const [loader, setLoader] = useState(false);

const handleRegister = async () => {

try {
if (!name || !email || !password) {
setLoader(true);
toast({
title: "All field are required.",
status: "error",
duration: 3000,
isClosable: true,
position: "top",
});
setLoader(false);
} else {
setLoader(true);
const formData = new FormData();
formData.append("name", name);
formData.append("email", email);
formData.append("password", password);
formData.append("profile", profile);

await axios
.post("/api/v1/auth/register", formData)
.then((data) => {
toast({
title: "Registration Successfull.",
description: `Thank you for trust on us`,
status: "success",
duration: 3000,
isClosable: true,
position: "top",
});
sessionStorage.setItem("profileBuffer", data.data.profile);
sessionStorage.setItem("loggedInValue", true);
navigate("/blogs");
setLoader(false);
})
.catch((err) => {
toast({
title: "Something went wrong",
description: `${err.response.data.error}`,
 status: "error",
duration: 3000,
isClosable: true,
position: "top",
});

setLoader(false);
});
}
} catch (err) {
setLoader(true);
toast({
title: "Error occured",
status: "error",
duration: 3000,
isClosable: true,
position: "top",
});
setLoader(false);
}
};

return (
<>
<Flex minH={"100vh"} align={"center"} justify={"center"} bg={"gray.50"}>
{loader ? (
<Spinner color="blue.500" />
):(
<>
<Stack spacing={8} mx={"auto"} maxW={"lg"} py={12} px={6}>
<Stack align={"center"}>
<Heading fontSize={"4xl"} textAlign={"center"}>
Sign up
</Heading>
<Text fontSize={"lg"} color={"gray.600"}>

to enjoy all of our cool features

</Text>
</Stack>
<Box rounded={"lg"} bg={"white"} boxShadow={"lg"} p={8}>
<Stack spacing={4}>
<FormControl id="name" isRequired>
<FormLabel>Full Name</FormLabel>
<Input
type="text"
value={name}
onChange={(e) => {
setName(e.target.value);
}}
/>
</FormControl>
<FormControl id="email" isRequired>
 <FormLabel>Email address</FormLabel>
<Input
type="email"
value={email}
onChange={(e) => {
setEmail(e.target.value);
}}
/>
</FormControl>
<FormControl id="profile">
<FormLabel>Profile Picture</FormLabel>
<Input
type="file"
accept="image/*"
onChange={(e) => {
setProfile(e.target.files[0]);
}}
/>
</FormControl>
<FormControl id="password" isRequired>
<FormLabel>Password</FormLabel>
<InputGroup>
<Input
type={showPassword ? "text" : "password"}
value={password}
onChange={(e) => {
setPassword(e.target.value);
}}
/>
<InputRightElement h={"full"}>
<Button
variant={"ghost"}
onClick={() =>
setShowPassword((showPassword) => !showPassword)
}
>
{showPassword ? <ViewIcon /> : <ViewOffIcon />}
</Button>
</InputRightElement>
</InputGroup>
</FormControl>
<Stack spacing={10} pt={2}>
<Button
loadingText="Submitting"
size="lg"
bg={"blue.400"}
color={"white"}
_hover={{
bg: "blue.500",
}}
onClick={handleRegister}
>
 Sign up
</Button>
</Stack>
<Stack pt={6}>
<Text align={"center"}>
Already a user?{" "}
<Link to={"/login"} style={{ color: "#3182CE" }}>
Sign in
</Link>
</Text>
</Stack>
</Stack>
</Box>
</Stack>
</>
)}
</Flex>
</>
);
}

2. Sign In

Login.js

import {
Flex,
Box,
FormControl,
FormLabel,
 Input,
Stack,
Button,
Heading,
Text,
Spinner,
useToast,
InputRightElement,
InputGroup,
} from "@chakra-ui/react";
import { Link, useNavigate } from "react-router-dom";
import axios from "axios";
import { useState } from "react";
import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";

export default function Login() {

const toast = useToast();
const navigate = useNavigate();
const [showPassword, setShowPassword] = useState(false);
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [loader, setLoader] = useState(false);

const handleLogin = async () => {

setLoader(true);
try {
if (!email || !password) {
toast({
title: "All field are required",
status: "error",
duration: 3000,
isClosable: true,
position: "top",
});
setLoader(false);
} else {
await axios
.post("/api/v1/auth/login", { email, password })
.then((data) => {
toast({
title: `${data.data.message}`,
status: "success",
duration: 3000,
isClosable: true,
position: "top",
});
sessionStorage.setItem("profileBuffer", data.data.profile);
sessionStorage.setItem("loggedInValue", true);
setLoader(false);
navigate("/blogs");
})
.catch((err) => {
 toast({
title: "Something went wrong",
description: `${err.response.data.error}`,
status: "error",
duration: 3000,
isClosable: true,
position: "top",
});
setLoader(false);
});
}
} catch (err) {
toast({
title: "Error Occur",
status: "error",
duration: 3000,
isClosable: true,
position: "top",
});
setLoader(false);
}
};
return (
<Flex minH={"100vh"} align={"center"} justify={"center"} bg={"gray.50"}>
{loader ? (
<Spinner color="blue.500" />
):(
<>
<Stack spacing={8} mx={"auto"} maxW={"lg"} py={12} px={6}>
<Stack align={"center"}>
<Heading fontSize={"4xl"}>Sign in to your account</Heading>
<Text fontSize={"lg"} color={"gray.600"}>
to enjoy all of our cool{" "}

<Link color={"blue.400"}>features</Link>
</Text>
</Stack>
<Box rounded={"lg"} bg={"white"} boxShadow={"lg"} p={8}>
<Stack spacing={4}>
<FormControl id="email">
<FormLabel>Email address</FormLabel>
<Input
type="email"
value={email}
onChange={(e) => {
setEmail(e.target.value);
}}
/>
</FormControl>
<FormControl id="password" isRequired>
<FormLabel>Password</FormLabel>
<InputGroup>
 <Input
type={showPassword ? "text" : "password"}
value={password}
onChange={(e) => {
setPassword(e.target.value);
}}
/>
<InputRightElement h={"full"}>
<Button
variant={"ghost"}
onClick={() =>
setShowPassword((showPassword) => !showPassword)
}
>
{showPassword ? <ViewIcon /> : <ViewOffIcon />}
</Button>
</InputRightElement>
</InputGroup>
</FormControl>
<Stack spacing={10}>
<Button
bg={"blue.400"}
color={"white"}
_hover={{
bg: "blue.500",
}}
onClick={handleLogin}
>
Sign in
</Button>
</Stack>
<Stack pt={6}>
<Text align={"center"}>
Not a user?{" "}
<Link to={"/register"} style={{ color: "#3182CE" }}>
Sign up
</Link>
</Text>
</Stack>
</Stack>
</Box>
</Stack>
</>
)}
</Flex>
);
}

Dashboard
1. User Dashboard
Profile.js

import {
Button,
Flex,
FormControl,
FormLabel,
Heading,
Input,
Stack,
Avatar,
Center,
Spinner,
useToast,
AvatarBadge,
IconButton,
} from "@chakra-ui/react";
import { useNavigate } from "react-router-dom";
import React, { useState, useEffect } from "react";
import axios from "axios";
import { SmallCloseIcon } from "@chakra-ui/icons";

export default function Profile() {

const toast = useToast();
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [profile, setProfile] = useState(null);
const [view, setView] = useState("");
const [loader, setLoader] = useState(false);
const [remove, setRemove] = useState(false);

const loggedIn = sessionStorage.getItem("loggedInValue");

const navigate = useNavigate();

const convertImageToBase64 = (event) => {
const file = event.target.files[0];
setProfile(file);
setRemove(false);
if (file) {
const reader = new FileReader();

reader.onload = () => {
const removeBase64Prefix = (base64String) => {
const prefixIndex = base64String.indexOf(",") + 1;
return base64String.substring(prefixIndex);
};

const base64String = reader.result;

const base64Data = removeBase64Prefix(base64String);

setView(base64Data);
};

reader.readAsDataURL(file);
}
};

const handleProfileChange = () => {

setRemove(true);
setLoader(true);
setProfile("");
setView("");
setLoader(false);
};

const handleCancel = () => {

setLoader(true);
navigate("/blogs");
};

const handleUpdate = async () => {

setLoader(true);
try {
const formData = new FormData();
formData.append("name", name);
formData.append("email", email);
if (profile) {
formData.append("profile", profile);
}
if (remove) {
formData.append("profile", profile);
}
await axios
.put("/api/v1/auth/update", formData)
.then((data) => {
toast({
 title: "Profile Update Succesfully",
status: "success",
duration: 3000,
isClosable: true,
position: "top",
});
sessionStorage.setItem("profileBuffer", data.data.profile);
navigate("/blogs");
setLoader(false);
})
.catch((err) => {
toast({
title: "Something went wrong",
status: `${err.response.data.error}`,
duration: 3000,
isClosable: true,
position: "top",
});
setLoader(false);
});
} catch (err) {
toast({
title: "Error occur",
status: "error",
duration: 3000,
isClosable: true,
position: "top",
});
setLoader(false);
}
};

const getDetails = async () => {

setLoader(true);
try {
await axios
.get("/api/v1/auth/detail")
.then((data) => {
setName(data.data.result.name);
setEmail(data.data.result.email);
setView(data.data.result.profile);
setLoader(false);
})
.catch((err) => {
toast({
title: "Something went wrong",
status: "error",
duration: 3000,
isClosable: true,
position: "top",
});
setLoader(false);
 });
} catch (err) {
toast({
title: "Error occur",
status: "error",
duration: 3000,
isClosable: true,
position: "top",
});
setLoader(false);
}
};

useEffect(() => {
if (loggedIn) {
getDetails();
} else {
navigate("/login");
}
}, [navigate, loggedIn]);
return (
<Flex minH={"100vh"} align={"center"} justify={"center"} bg={"gray.50"}>
{loader ? (
<Spinner color="blue.500" />
):(
<>
<Stack
spacing={4}
w={"full"}
maxW={"md"}
bg={"white"}
rounded={"xl"}
boxShadow={"lg"}
p={6}
my={12}
>
<Heading lineHeight={1.1} fontSize={{ base: "2xl", sm: "3xl" }}>
Edit Your Profile
</Heading>
<FormControl id="userName">
<FormLabel>Profile Picture</FormLabel>
<Stack direction={["column", "row"]} spacing={6}>
<Center>
<Avatar size="xl" src={`data:image/png;base64,${view}`}>
<AvatarBadge
as={IconButton}
size="sm"
rounded="full"
top="-10px"
colorScheme="red"
aria-label="remove Image"
icon={<SmallCloseIcon />}
 onClick={handleProfileChange}
/>
</Avatar>
</Center>
<Center w="full">
<Input
type="file"
accept="image/*"
border={"none"}
onChange={convertImageToBase64}
/>
</Center>
</Stack>
</FormControl>
<FormControl id="userName" isRequired>
<FormLabel>Fullname</FormLabel>
<Input
placeholder="ex.-Manoj Vaishnav"
_placeholder={{ color: "gray.500" }}
type="text"
value={name}
onChange={(e) => {
setName(e.target.value);
}}
/>
</FormControl>
<FormControl id="email" isRequired>
<FormLabel>Email address</FormLabel>
<Input
placeholder="[email protected]"
_placeholder={{ color: "gray.500" }}
type="email"
value={email}
onChange={(e) => {
setEmail(e.target.value);
}}
/>
</FormControl>
<Stack spacing={6} direction={["column", "row"]}>
<Button
bg={"red.400"}
color={"white"}
w="full"
_hover={{
bg: "red.500",
}}
onClick={handleCancel}
>
Cancel
</Button>
<Button
bg={"blue.400"}
 color={"white"}
w="full"
_hover={{
bg: "blue.500",
}}
onClick={handleUpdate}
>
Save
</Button>
</Stack>
</Stack>
</>
)}
</Flex>
);
}

Blog Page
1. Create Blog

2. Read Blog
3. Update Blog

4. Delete Blog
Deployment
Deployment of MERN Website on Render
Render is a cloud platform that provides a simple and scalable infrastructure for deploying and hosting web
applications. It offers an easy-to-use interface and supports a wide range of technologies, including the MERN
stack. Here is a step-by-step guide on how to deploy a MERN website on Render:
Step 1: Set up the Backend
Create an account on Render (render.com) and log in to the dashboard.
Click on "New" and select "New Service."
Choose a name for your backend service and select the appropriate region.
Under "Environment," add any environment variables your backend requires, such as database connection
strings or API keys.
In the "Build Command" field, enter the command to build your backend. For example, if you're using Node.js
and Express.js, the build command might be npm install followed by npm run build.
In the "Start Command" field, specify the command to start your backend server. For Node.js and Express.js,
the command might be npm start.
Click on "Create Service" to deploy your backend.
Step 2: Set up the Frontend
In the Render dashboard, click on "New" and select "New Static Site."
Choose a name for your frontend service and select the appropriate region.
Under "Environment," add any environment variables your frontend requires, such as API endpoint URLs.
In the "Build Command" field, specify the command to build your frontend. For example, if you're using
React.js, the command might be npm install followed by npm run build.
In the "Publish Directory" field, enter the path to the build folder of your frontend application. Typically, it is
build/ for React.js applications.
Click on "Create Service" to deploy your frontend.
Step 3: Configure DNS
After deploying both the backend and frontend services, Render will provide you with URLs for each service.
To configure a custom domain, go to your domain registrar's website and update the DNS settings for your
domain. Create DNS records for both the backend and frontend services, pointing to their respective URLs
provided by Render.
Wait for the DNS changes to propagate, which may take some time.
Once the DNS changes have propagated, you should be able to access your MERN website using your custom
domain.
Step 4: Continuous Deployment
Render supports continuous deployment, which means that any changes you make to your code will be
automatically deployed to your services.
Connect your code repository (e.g., GitHub or GitLab) to Render. This will enable Render to automatically build
and deploy your application whenever changes are pushed to your repository.
Configure the build and start commands for both the backend and frontend services in Render's dashboard.
These commands will be used during the continuous deployment process.
Once set up, any changes you make to your code and push to your repository will trigger an automatic
deployment on Render.
By following these steps, you can deploy your MERN website on Render, taking advantage of its easy-to-use
interface, scalability, and support for the MERN stack. Render handles the infrastructure, allowing you to focus
on building and deploying your application without worrying about server management.