Intern Report
Intern Report
BACHELOR OF TECHNOLOGY
In
Aman (21001003016)
i
CERTIFICATE
DEENBANDHU CHHOTU RAM UNIVERSITY OF SCIENCE AND
TECHNOLOGY, MURTHAL, SONEPAT, HARYANA-131039
Department of Electronics and Communication Engineering
This is to certify that the Internship Report submitted by Aman (21001003016) in the partial fulfilment of
the requirement for the award of degree of Bachelor of Technology in Electronics and Communication
Engineering department of Deenbandhu Chhotu Ram University of Science and Technology, Murthal
at FivePs Digital Pvt. Limited for the duration of 16 Weeks (from 15th January 2025 to 21st May 2025) is
an authentic work carried out by him.
This is certified that the B.Tech External Internship viva-voce Examination of Aman (21001003016) has
been held on dated …. /……/20…. And accepted the internship for the award of the degree.
Internship Coordinator
iii
DECLARATION
I hereby declare that the work which is being presented in the Internship Report, in partial fulfilment of the
requirement for the award of the degree of Bachelor of Technology in Electronics and Communication
Engineering at Electronics and Communication Engineering Department of Deenbandhu Chhotu
Ram University of Science and Technology, Murthal is an authentic report of work carried out by me
under the supervision of Dr. SK Grewal Professor, ECED, DCRUST, Murthal. The matter embodied in
this report is neither copied nor submitted to any University/institute for the award of any degree.
This is to clarify that the above statement made by me is correct to the best of my knowledge and belief. If
anything is found incorrect in future, I will be responsible for the same.
Date: / /
iv
ACKNOWLEDGEMENT
First, I would like to thank Mr. Pankaj Yadav, founder of Fiveps Digital Pvt. Limited for giving me the
opportunity to do an internship within the organization.
It fills my heart with immense pleasure to mention the name of my internship supervisor Dr. SK Grewal
(Professor, ECED) for his supervision, advice and regular support right through my internship. I would like
to thank him for being my internship supervisor.
Secondly, I want to express my greetings to Dr. Priyanka (Professor & Chairperson, ECED) for teaching
me and helping me to discover how to learn. She has been a source of enormous inspiration for me and I am
thankful to her from the bottom of our heart.
I would also like to show appreciation to my Class Coordinator Dr. Rajni Mehra (Assistant Professor,
ECED) for her reliable and effective communication methodologies.
I also want to express my thankfulness to other faculty members of Department of Electronics and
Communication Engineering. DCRUST, Murthal, Sonipat for their intellectual support during the course
of this work.
We would like to express our sincere gratitude to my parents whose unwavering support, encouragement,
constant belief in my abilities and invaluable guidance have been the foundation upon which I built this
endeavour.
Date:
v
ABSTRACT
This report outlines my journey and learnings as a Web Development Intern, undertaken as part of my
academic internship. The training primarily focused on frontend technologies, giving me hands-on
experience in designing and developing responsive and user-friendly web interfaces.
During the internship, I actively worked with HTML, CSS, JavaScript, React.js, Bootstrap, and Tailwind
CSS to build dynamic and visually appealing user interfaces. I explored component-based architecture in
React, utilized modern UI/UX principles, and emphasized mobile-first, responsive design. My work also
involved improving accessibility, optimizing layouts, and maintaining clean, reusable code structures.
While my core focus was on frontend development, I also gained basic exposure to backend technologies,
including the use of Node.js and Express.js, and learned to connect front-end applications with server-side
operations.
I applied version control using Git and GitHub, following standard development workflows such as
branching and pull requests. I also explored deployment tools such as Vercel and Render to host my web
applications, and managed environment settings for smooth production builds.
An EdTech platform, aimed at delivering educational content with an intuitive user experience.
A medical e-commerce website, designed for showcasing and selling healthcare products online.
These projects gave me practical exposure to real-world development tasks, strengthened my understanding
of UI/UX design, and helped me improve my problem-solving and debugging skills.
Overall, this internship helped me solidify my foundation in frontend web development, provided valuable
insights into the development lifecycle, and prepared me to take on professional challenges in the field of
web technologies.
vi
INTRODUCTION TO ORGANIZATION
Founded in 2019, FivePS Digital is a dynamic and forward-thinking digital solutions agency based in New
Delhi, India. Specializing in a comprehensive suite of services—including digital marketing, web
development, UI/UX design, and branding—FivePS Digital empowers businesses to establish and enhance
their online presence through innovative and customized strategies.
The company offers a diverse range of services such as social media marketing, content creation, email
marketing, meme marketing, logo design, personal branding, video editing, and lead generation. Their
expertise in platforms like Instagram, Facebook, and Google Ads enables them to deliver targeted
advertising solutions that drive engagement and conversions.
FivePS Digital's client-centric approach and commitment to excellence have positioned them as a trusted
partner for businesses seeking to navigate the digital landscape effectively. Their team of creative
professionals works closely with clients to develop strategies that align with their unique goals and resonate
with their target audiences.
With a track record of delivering impactful results and a dedication to staying abreast of industry trends,
FivePS Digital continues to make significant contributions to the digital marketing and IT sectors.
vii
Table of Contents
CERTIFICATE....................................................................................................................................................i
CERTIFICATE FROM ORGANIZATION.......................................................................................................ii
............................................................................................................................................................................ii
DECLARATION..............................................................................................................................................iii
ACKNOWLEDGEMENT................................................................................................................................iv
ABSTRACT.......................................................................................................................................................v
INTRODUCTION TO ORGANIZATION.......................................................................................................vi
LIST OF IMAGES.............................................................................................................................................x
LIST OF TABLES............................................................................................................................................xi
Chapter 1 INTRODUCTION.............................................................................................................................1
1.1 What is MERN Stack?.............................................................................................................................1
1.2 Key Takeaways........................................................................................................................................1
1.3 MERN Stack Explained...........................................................................................................................2
1.4 How does MERN Stack work?................................................................................................................2
1.4.1 MERN Stack Components................................................................................................................2
1.5 Benefits of MERN Stack..........................................................................................................................2
Chapter 2 AIM & SCOPE..................................................................................................................................4
2.1 Aim...........................................................................................................................................................4
2.2 Scope........................................................................................................................................................4
2.2.1 Front-End Development....................................................................................................................4
2.2.2 Back-End Development....................................................................................................................5
Chapter 3 TOOLS & TECHNOLOGIES USED...............................................................................................6
3.1 MONGO DB............................................................................................................................................6
3.1.1 Why use MongoDB...........................................................................................................................6
3.1.2 Tools used with MongoDB...............................................................................................................7
3.2 Express.js.................................................................................................................................................7
3.2.1 Key features of Express.js.................................................................................................................7
3.2.2 Role of Express.js in the MERN Stack.............................................................................................8
3.3 React.js.....................................................................................................................................................9
3.3.1 Features...........................................................................................................................................10
3.3.2 Role of React in the MERN Stack..................................................................................................12
3.4 Node.js...................................................................................................................................................12
3.4.1 Key features of node.js....................................................................................................................12
3.5 Next.js....................................................................................................................................................15
3.5.1 Key features....................................................................................................................................15
3.5.2 Role of Using Next.js......................................................................................................................16
viii
3.6 Git...........................................................................................................................................................17
3.6.1 Importance & key features..............................................................................................................17
3.7 Github.....................................................................................................................................................17
3.7.1 Role of GitHub in the Project:........................................................................................................18
Chapter 4 PROJECT WORK...........................................................................................................................22
4.1 Project No1:...........................................................................................................................................22
4.1.1 Objective / Purpose:........................................................................................................................22
4.1.2 Scope of the Project........................................................................................................................22
4.1.3 Tech Stack Used:.............................................................................................................................22
4.1.4 Deployment Platform......................................................................................................................23
4.1.5 Challenges Faced............................................................................................................................23
4.1.6 Solutions & Learnings.....................................................................................................................23
4.1.7 Conclusion.......................................................................................................................................24
4.1.8 Screenshots......................................................................................................................................24
4.2 Project No2:...........................................................................................................................................25
Evently – A Full-Stack Event Management Platform..................................................................................25
4.2.1 Objective / Purpose:........................................................................................................................25
4.2.2 Scope of the Project:.......................................................................................................................25
4.2.3 Tech Stack Used..............................................................................................................................26
4.2.4 System Architecture:.......................................................................................................................26
4.2.5 Conclusion:.....................................................................................................................................27
4.2.6 Screenshots......................................................................................................................................27
Chapter 6 CONCLUSION & FUTURE SCORE.............................................................................................33
6.1 Conclusion..............................................................................................................................................33
6.2 Future Scope...........................................................................................................................................33
6.3 Final Thoughts........................................................................................................................................34
Chapter 7 LEARNING & RESEARCH RESOURCES...................................................................................35
ix
LIST OF IMAGES
3.2 Express.js 8
3.3 React.js 10
3.4 Next.js 16
3.5 Github 17
3.6 Docker 18
x
LIST OF TABLES
xi
Chapter 1 INTRODUCTION
Modern applications are built using a variety of programming languages. Some of the most popular are Java,
JavaScript, and Python, but many others are gaining traction. In general, a front-end application is written in
JavaScript and a back-end application in Java. However, full-stack applications are now being written in
JavaScript using comprehensive stacks of cloud native technologies that handle database storage, retrieval,
application servers, the web user experience, and more. A prime example of this type of development
platform is the MERN stack.
Figure 1.1
1
MERN is an acronym for the four technologies that form the stack: MongoDB, Express, React, and
Node.js.
Developers recognize the MERN stack as a simplified development platform for building highly
scalable and interactive web applications.
The MERN stack is a collection of JavaScript-based technologies that are used together to develop web
applications. The stack consists of MongoDB, Express, React, and Node.js.
MongoDB is a highly scalable document database that makes it easy to store and retrieve data in
JSON documents.
Express is a lightweight web application framework that provides a range of app-building tools and
supports a variety of programming languages, including JavaScript.
React is an open source, front-end JavaScript library for building user interfaces based on
components.
Node.js is a runtime environment that can be used to run JavaScript code on the server side. This
allows developers to use the same language for both the front and back ends of their applications.
2
varying skill levels. It allows developers to use a single language and a consistent toolset to construct both
the front and back ends of their applications, an arrangement that reduces development time and complexity.
And, because the MERN stack is a popular open source framework, developers gain an engaged and
supportive community for knowledge sharing, problem-solving, and continuous learning. In addition, the
absence of licensing fees can translate into substantial cost savings.
The MERN stack excels at building interactive UIs that are also scalable. This makes it a good choice for
constructing applications that must handle substantial traffic volumes and accommodate rapid growth. Much
of this scalability is attributed to the use of MongoDB, a document-oriented database known for its speed
and efficiency in data storage and retrieval operations.
The MERN stack accommodates a wide variety of deployment options and platforms, including many
cloud-based environments. This flexibility allows developers to choose the cloud platform that best aligns
with their requirements.
In addition, the MERN stack provides a consistent development experience across diverse platforms. This is
helpful for migrating applications between different platforms, for example, from Amazon Web Services
(AWS) to Oracle Cloud Infrastructure (OCI), without the need for extensive code modifications. This
portability saves valuable time and effort and helps ensure uniformity in appearance and functionality,
regardless of the underlying platform.
3
Chapter 2 AIM & SCOPE
2.1 Aim
The primary aim of this internship was to gain in-depth practical experience in full stack web development
using the MERN (MongoDB, Express.js, React.js, Node.js) stack. The objective was to apply theoretical
knowledge acquired during my academic studies to real-world software development environments. By
participating in end-to-end web development projects, I aimed to enhance my technical competencies,
understand industry best practices, and become proficient in designing and developing scalable,
maintainable, and user-friendly web applications.
This internship provided an opportunity to explore both client-side and server-side technologies in detail. On
the front end, the goal was to build dynamic and interactive user interfaces using React.js. On the back end,
the focus was on creating RESTful APIs using Node.js and Express.js, along with handling data storage and
retrieval through MongoDB. Additionally, I aimed to familiarize myself with tools and practices commonly
used in professional software development environments, such as version control systems, deployment
platforms, and Agile project management methodologies.
The broader objective was not only to strengthen my technical foundation but also to develop critical soft
skills such as time management, collaboration, communication, and problem-solving. This comprehensive
learning experience aimed to prepare me for future roles as a full stack developer in a professional setting.
2.2 Scope
The scope of this report encompasses the training, tasks, and projects undertaken during my internship
period, with a specific focus on full stack development using the MERN stack. The internship covered
various stages of the software development lifecycle, from planning and designing to development, testing,
deployment, and maintenance.
The front-end development work primarily involved building responsive and reusable components using
React.js. I implemented client-side routing using React Router, managed application state using React
Hooks and Context API, and styled components using both CSS and Tailwind CSS. Special attention was
given to accessibility, cross-browser compatibility, and responsive design to ensure optimal user experience
across devices.
4
2.2.2 Back-End Development
On the server side, I worked with Node.js and Express.js to develop robust and scalable APIs. I handled
various server-side operations such as routing, middleware configuration, request validation, and error
handling. User authentication and authorization were implemented using JWT (JSON Web Tokens) and
bcrypt for password hashing. The back end also involved integrating third-party APIs where necessary.
Data persistence and modeling were managed using MongoDB, a NoSQL document database. I used
Mongoose to define schemas, manage collections, and perform complex queries. CRUD operations, data
validation, and relationships between data entities were integral parts of the database design.
Throughout the internship, I used Git for version control and GitHub for collaborative development. I
followed branching strategies, submitted pull requests for code review, and resolved merge conflicts as part
of the standard development workflow.
The applications developed during the internship were deployed on platforms such as Vercel for the front
end and Render for the back end. I learned to manage environment variables, configure deployment
settings, and handle application build pipelines for production readiness.
As part of my internship, I worked on multiple full stack projects. One major project was a e-commerce
platform featuring user authentication, product browsing, shopping cart functionality, and Razorpay
payment gateway integration. Another project involved a bulk product content generation system that
included multilingual prompt customization and real-time job processing using BullMQ queues. These
projects gave me practical exposure to full stack development challenges and solutions.
The internship followed Agile-inspired workflows, where tasks were divided into sprints and tracked using
project management tools like Trello. Regular updates, self-assigned tasks, and sprint reviews helped
simulate a real-world collaborative development environment.
In summary, the scope of this report is limited to the technical training and project experiences gained during
the internship, focusing on full stack web development using the MERN stack. The report does not delve
into broader theoretical concepts or unrelated technologies but instead emphasizes applied learning, real-
world problem solving, and skills development relevant to a professional full stack developer role.
5
Chapter 3 TOOLS & TECHNOLOGIES USED
3.1 MONGO DB
MongoDB is a NoSQL database where each record is a document comprising of key-value pairs that are
similar to JSON (JavaScript Object Notation) objects. MongoDB is flexible and allows its users to create
schema, databases, tables, etc. Documents that are identifiable by a primary key make up the basic unit of
MongoDB. Once MongoDB is installed, users can make use of Mongo shell as well. Mongo shell provides a
JavaScript interface through which the users can interact and carry out operations (eg: querying, updating
records, deleting records).
Figure 3.1
MongoDB was chosen as the database for this project due to its flexibility, scalability, and seamless
integration with JavaScript-based technologies. As a NoSQL, document-oriented database, MongoDB stores
data in JSON-like documents, which aligns well with the data formats used in both the front-end and back-
end of the MERN stack.
Unlike traditional relational databases, MongoDB does not require a fixed schema, allowing for dynamic
data structures. This feature was especially useful in the context of this project, where product details, user
data, and orders could vary in structure. Its ability to handle large volumes of unstructured or semi-
structured data made it ideal for the kind of fast-changing content and scalable requirements of modern web
applications.
6
Moreover, MongoDB offers excellent performance for read/write operations, supports horizontal scaling,
and provides robust querying capabilities. These advantages helped in building a responsive and efficient
back-end that could handle a growing number of users and transactions.
To interact with MongoDB from the Node.js back-end, the Mongoose library was used. Mongoose is an
Object Data Modelling (ODM) tool that provides a straightforward, schema-based solution for modelling
application data. It allows developers to define schemas for collections, apply validation rules, and create
relationships between data entities.
1. Schema Definition: Used to define the structure and constraints of data models such as Users,
Products, and Orders.
3. Validation: Ensured data integrity by enforcing rules before data was saved to the database.
4. Middleware: Allowed the implementation of custom logic (e.g., password hashing before saving a
user).
5. Population: Used to reference documents in other collections, which was useful for joining user and
order information.
In addition, tools like MongoDB Compass were used occasionally for visualizing and querying data
directly from the database during development and debugging.
3.2 Express.js
Express.js is a fast, flexible and minimalist web framework for Node.js. It’s effectively a tool that simplifies
building web applications and APIs using JavaScript on the server side. Express is an open source that is
developed and maintained by the Node.js foundation.
Express.js offers a robust set of features that enhance your productivity and streamline your web application.
It makes it easier to organize your application’s functionality with middleware and routing. It adds helpful
utilities to Node HTTP objects and facilitates the rendering of dynamic HTTP objects.
1. Middleware and Routing: Define clear pathways (routes) within your application to handle
incoming HTTP requests (GET, POST, PUT, DELETE) with ease. Implement reusable functions
7
(middleware) to intercept requests and create responses, adding functionalities like authentication,
logging, and data parsing.
2. Minimalistic Design: Express.js follows a simple and minimalistic design philosophy. This
simplicity allows you to quickly set up a server, define routes, and handle HTTP requests efficiently.
It’s an excellent choice for building web applications without unnecessary complexity.
3. Flexibility and Customization: Express.js doesn’t impose a strict application architecture. You can
structure your code according to your preferences. Whether you’re building a RESTful API or a full-
fledged web app, Express.js adapts to your needs.
4. Templating Power: Incorporate templating engines like Jade or EJS to generate dynamic HTML
content, enhancing user experience.
5. Static File Serving: Effortlessly serve static files like images, CSS, and JavaScript from a
designated directory within your application.
6. Node.js Integration: Express.js seamlessly integrates with the core functionalities of Node.js,
allowing you to harness the power of asynchronous programming and event-driven architecture.
Figure 3.2
In the MERN stack, Express.js plays a crucial role as the back-end web application framework that
facilitates the creation of robust and scalable server-side applications. Positioned between the front-end
(React) and the database (MongoDB), Express serves as the middleware layer that handles incoming HTTP
requests, processes them, and sends appropriate responses back to the client.
Express.js is built on top of Node.js, and it simplifies many of the complexities involved in server-side
development. While Node.js provides the runtime environment for executing JavaScript code on the server,
8
Express.js offers a lightweight and flexible framework for defining application routes, handling middleware,
managing requests and responses, and implementing business logic.
1. Routing Requests: Express allows developers to define routes for different endpoints (e.g., /login,
/products, /orders) and associate them with specific HTTP methods like GET, POST, PUT, and
DELETE. This makes it easy to create RESTful APIs that the React front end can interact with.
2. Middleware Handling: Express uses a middleware pattern that enables developers to write custom
functions to process requests before they reach the route handlers. Middleware can be used for
authentication, error handling, request parsing, logging, and more, making the application more
modular and manageable.
3. Serving the Front-End: Although React is typically served from a separate development server, in
production, Express can be used to serve static files generated from the React build folder. This
enables full-stack deployment from a single server.
4. Connecting with MongoDB: Express acts as the intermediary between the client (React) and the
database (MongoDB). It handles database queries and sends the results back to the client in a
structured and secure manner. Tools like Mongoose are often used with Express to simplify
interaction with MongoDB.
5. Security and Performance: Express supports integration with various middleware libraries that
enhance application security (e.g., Helmet for setting secure headers, CORS for cross-origin resource
sharing) and performance (e.g., compression middleware for faster response delivery).
6. API Development: Express makes it easy to structure back-end code in a clean and organized
manner by separating route definitions, controllers, and services. This modular structure improves
code maintainability and readability, especially for large applications.
In summary, Express.js acts as the glue in the MERN stack, managing communication between the client-
side interface built with React and the data stored in MongoDB. Its simplicity, speed, and extensive
middleware ecosystem make it an ideal choice for building full stack applications with Node.js.
3.3 React.js
React is a JavaScript Library used to build user interfaces. It is developed by Facebook. It simplifies creating
dynamic and interactive web apps with the help of component-based architecture, reusability, and efficient
9
rendering with the JSX and virtualDOM. React JS is used to create single-page applications (SPAs). It is
known for its component-based architecture which allows you to create reusable UI components, making
complex web applications easier to manage and maintain.
Figure 3.3
3.3.1 Features
1. Component-Based Architecture:
React promotes reusable components. A React application is typically composed of multiple
components, each managing its own state and logic.
2. Virtual DOM:
React uses a Virtual DOM to improve performance. Instead of directly manipulating the
browser's DOM, React updates a lightweight representation of it in memory, and then
efficiently updates only the changed parts of the real DOM.
3. JSX (JavaScript XML):
React uses JSX, a syntax extension that allows writing HTML elements in JavaScript code.
JSX makes the code more readable and easier to write by mixing HTML with JavaScript.
4. One-Way Data Binding:
React uses one-way data binding, meaning that the data flow is unidirectional. This makes the
code more predictable and easier to debug as data flows from parent components to child
components.
5. State and Props:
State: The internal data management system for a component. When the state of a component
changes, React automatically re-renders that component.
10
Props: Short for properties, these are read-only attributes passed from parent to child
components to communicate and render dynamic content.
6. Hooks:
Hooks are functions that let you use state and other React features (like lifecycle methods) in
functional components. Common hooks include:
o useState(): for managing state.
o useEffect(): for side effects such as data fetching or subscribing to events.
o useContext(): for using context API to manage global state.
7. React Router:
React Router is a standard library for routing in React. It allows developers to build multi-
page applications by managing navigation between views, each rendered as different React
components.
8. Declarative UI:
React allows you to describe how your user interface should look for a given state, and it will
efficiently update and render just the right components when your data changes.
9. Component Lifecycle Methods:
React components go through different phases, including mounting, updating, and
unmounting. Developers can hook into these phases using methods like
componentDidMount, componentDidUpdate, and componentWillUnmount (for class
components) or hooks like useEffect (for functional components).
10. Context API:
The Context API is used to create global variables that can be passed around in an app. It's a
way to avoid "prop drilling," which is the process of passing props down multiple levels of
components.
11. Server-Side Rendering (SSR) and Static Site Generation (SSG):
React can be used with frameworks like Next.js to enable SSR and SSG, which improve
performance and SEO by generating HTML on the server or during build time.
12. React Native:
React can be used to build mobile applications using React Native, which allows developers
to create apps for iOS and Android with the same React codebase.
13. Performance Optimizations:
React provides tools and strategies like memoization (React.memo, useMemo) and lazy
loading (React.lazy, Suspense) to improve the performance of the application by avoiding
unnecessary re-renders and loading components only when needed.
11
3.3.2 Role of React in the MERN Stack
In the MERN stack, React.js serves as the front-end framework responsible for building the user interface
and managing the client-side experience of web applications. React’s primary role is to create dynamic,
interactive, and responsive web pages that users interact with directly.
React follows a component-based architecture, where the UI is divided into reusable, self-contained
components. This modularity allows developers to build complex interfaces by composing simpler
components, making the codebase more maintainable and scalable.
As a Single Page Application (SPA) framework, React enables smooth navigation and interaction without
the need for full page reloads. It achieves this by efficiently updating the Virtual DOM, which minimizes
direct manipulation of the real DOM and improves performance.
React communicates with the back-end services (developed using Express.js and Node.js) by making
asynchronous HTTP requests, usually via fetch or Axios. It fetches data from RESTful APIs and
dynamically updates the UI based on the received data. This decouples the front-end and back-end, allowing
for a clean separation of concerns and enabling developers to work independently on each layer.
In summary, React’s role in the MERN stack is to provide a fast, responsive, and user-friendly interface
that interacts seamlessly with the back-end APIs, delivering an efficient full stack web application
experience.
3.4 Node.js
Node.js is an open-source, cross-platform runtime environment that allows developers to execute JavaScript
code outside a web browser. Built on Chrome’s V8 JavaScript engine, Node.js is designed for building fast,
scalable network applications, especially server-side applications. It uses an event-driven, non-blocking I/O
model, which makes it lightweight and efficient, perfect for data-intensive real-time applications.
1. JavaScript Runtime:
12
Runs JavaScript on the server: Traditionally, JavaScript was confined to the browser (client
side). With Node.js, you can use JavaScript to write backend code and build server-side
applications. This allows full-stack JavaScript development.
Built on V8 engine: Node.js uses Google's V8 JavaScript engine (the same engine used by
Chrome) to execute JavaScript code. V8 is highly efficient and compiles JavaScript to
machine code, making Node.js fast and performant.
2. Non-Blocking, Asynchronous I/O:
Event-driven architecture: Node.js is designed to handle many I/O operations, such as reading
from a database or handling HTTP requests, in a non-blocking manner. Instead of waiting for
an operation to complete before moving on to the next, Node.js can handle many operations
simultaneously using an event loop.
Asynchronous I/O: This feature makes Node.js highly scalable. It can handle many requests
at once without blocking the execution of the code, making it efficient for building
applications that need to handle a large number of concurrent requests, like APIs or chat
applications.
14
3.5 Next.js
Next.js is a powerful, open-source React framework developed by Vercel that enables developers to build
modern, performant web applications with ease. It builds upon the core capabilities of React and extends
them with features such as server-side rendering (SSR), static site generation (SSG), file-based routing, and
full-stack capabilities. Designed to optimize both developer productivity and application performance,
Next.js is ideal for building everything from single-page applications (SPAs) to large-scale production-ready
web platforms.
Server-Side Rendering (SSR): Pages are rendered on the server at request time, improving SEO
and performance.
Static Site Generation (SSG): Pages are pre-rendered at build time, resulting in faster load times
and better scalability.
Client-Side Rendering (CSR): Suitable for highly interactive pages that don’t require SEO
optimization.
Incremental Static Regeneration (ISR): Allows updating static content after deployment without
rebuilding the entire site.
2. File-Based Routing
Next.js uses a file-system-based router built on the concept of pages. Each file in the pages/ directory
automatically becomes a route. This eliminates the need for manual route configuration, making
navigation simple and intuitive.
3. API Routes
Next.js allows developers to build serverless API routes directly within the same codebase under the
pages/api/ directory. These routes can handle form submissions, authentication, database queries, or
even third-party integrations, removing the need for a separate backend.
Next.js supports:
5. Image Optimization
The built-in next/image component provides automatic image resizing, lazy loading, and format
optimization, significantly improving site performance and Core Web Vitals scores.
Next.js supports fast refresh, allowing instant feedback during development. Combined with
TypeScript and ESLint support, this provides a robust developer experience.
7. Performance Enhancements
Caching and Compression: Out-of-the-box HTTP compression and smart caching for production
builds.
Figure 3.4
SEO-Friendly: Thanks to SSR and SSG, pages can be indexed easily by search engines.
16
Production-Ready: Comes with optimizations like automatic static optimization and performance
tuning.
Full-Stack Capable: You can fetch data, connect to databases, and expose APIs all within one
framework.
3.6 Git
Git is a distributed version control system (DVCS) designed to handle everything from small to very large
projects with speed and efficiency. It helps developers track and manage changes to code over time.
Version Tracking: Every change made to the code is recorded as a "commit" with a timestamp,
author, and message. This enables rollback to previous versions if necessary.
Branching and Merging: Git allows developers to create branches to work independently on new
features or fixes, and later merge them into the main codebase, minimizing conflicts.
Backup and Safety: Since the entire history is stored locally and optionally pushed to a remote
server (like GitHub), the code is always recoverable.
Auditability: Git provides a clear history of who changed what and when, which is useful for both
learning and team collaboration.
3.7 Github
GitHub is a cloud-based hosting service for Git repositories. It provides tools for collaboration, code
review, issue tracking, and CI/CD integration.
17
Figure 3.5
Remote Repository Hosting: The project was pushed to a GitHub repository for backup, sharing,
and version tracking.
Collaboration: Code was pushed and pulled from GitHub for synchronization across devices and
team members (if applicable).
Documentation: README files and issue boards helped document and manage the project.
Pull Requests and Code Reviews: Helped maintain code quality through collaborative reviews.
3.8 Docker
Docker is a containerization platform that packages applications and their dependencies into isolated units
called containers. This ensures that applications run consistently across different environments.
Figure 3.6
Environment Consistency: Docker ensures that the application runs the same way in development,
testing, and production environments.
Lightweight and Fast: Docker containers are lightweight compared to virtual machines, making
them faster to start and use fewer resources.
Isolation: Each container runs in its own environment, which helps prevent dependency conflicts.
Portability: Containers can be deployed easily on any machine that supports Docker.
18
3.8.2 Role of Docker in the Project:
Local Development: The MERN stack application was containerized to run each service
(MongoDB, Node.js, etc.) in its own isolated environment.
Docker Compose: Used to manage multi-container environments. For example, MongoDB and the
backend server were set up to run together with a single docker-compose.yml file.
Version Control for Infrastructure: The Dockerfile and Compose file served as code for
infrastructure, allowing consistent setup across systems.
Role in MERN Deployment: Acts as the cloud database where the backend connects to
store/retrieve data.
Key Features:
Benefits:
19
2. Render – Full Stack Hosting (Backend + Frontend)
Render is a modern cloud platform that supports both frontend and backend deployment with
minimal configuration.
Role in MERN Deployment: Can host the Node.js server (Express backend) and
optionally also the React frontend.
Key Features:
Benefits:
Vercel is a frontend deployment platform optimized for React, Next.js, and static sites.
Role in MERN Deployment: Hosts the React.js frontend, often used with a separately
hosted backend (e.g., on Render or Heroku).
Key Features:
Benefits:
20
o Ideal for React single-page applications (SPAs)
Netlify is another powerful frontend platform for deploying static and React applications.
Key Features:
Benefits:
o Beginner-friendly
21
Chapter 4 PROJECT WORK
The primary aim of this project is to develop a full-stack AI-powered platform that automates the generation
of SEO-friendly content for Shopify product listings. The system leverages artificial intelligence and
computer vision to analyze product images and metadata, and then generates optimized titles, descriptions,
and tags using natural language processing. This enhances product visibility on search engines, ultimately
improving user engagement and conversions.
Automate the generation of product titles, descriptions, image alt text, meta descriptions using
OpenAI's language models.
Extract visual features from product images using Azure Computer Vision API.
Build an intuitive admin panel for product selection and content generation.
Deploy the application on a scalable Azure Virtual Machine for real-world usage.
22
Database MongoDB
Containerization Docker
Table 4.1
23
4.1.7 Conclusion
This project demonstrates the power of full-stack development combined with artificial intelligence and
cloud computing. By integrating MERN with OpenAI and Azure Vision, the platform delivers intelligent
automation for Shopify merchants, helping them save time and increase their online visibility. It also
showcases real-world deployment using Azure VM, offering a complete end-to-end solution from frontend
to backend and beyond.
4.1.8 Screenshots
Figure: 4.1
Figure 4.2
24
Figure 4.3
The aim of this project was to develop a modern, full-stack web application that allows users to create,
manage, and browse events efficiently. Evently offers a user-friendly interface for event discovery, secure
authentication, real-time payments, and seamless admin control, built using cutting-edge technologies and
tools for scalability and responsiveness.
Create and customize events with details like title, location, description, and category
La Technology
ye
r
Fr Next.js (App Router), React, TypeScript, Tailwind CSS, Shadcn UI
on
ten
d
Au Clerk
the
nti
cat
io
n
Ba API Routes (Next.js), Server Actions, MongoDB
ck
en
d
Da MongoDB Atlas
tab
as
e
Pa Stripe
y
me
nts
St Tailwind CSS, Shadcn UI Components
yli
ng
Ve Git + GitHub
rsi
on
Co
ntr
26
ol
Table 4.2
Frontend: Built with Next.js (React + App Router) using TypeScript for type safety
Backend API: Built into Next.js server functions (/api) and server actions
4.2.5 Conclusion:
Evently serves as a scalable and responsive platform for event discovery and management. It demonstrates
the integration of modern frontend technologies, secure backend logic, third-party services (Stripe, Clerk),
and cloud deployment. Through this project, I gained hands-on experience in building a production-grade
full-stack application using the latest web technologies.
4.2.6 Screenshots
27
Figure 4.4
Figure 4.5
Figure 4.6
28
Chapter 5 APPLICATIONS
During my internship, my projects integrate multiple modern technologies—each playing a specific role in
building scalable, intelligent, and efficient web applications. This section highlights the practical
applications of each major technology used, demonstrating how they contribute to real-world solutions.
5.1 MongoDB
Application:
MongoDB is used as a NoSQL database to store dynamic, unstructured data such as product information,
SEO metadata, user profiles, and AI-generated content.
5.2 Express.js
Application:
Acts as the backend framework in the MERN stack, managing API routes, server logic, authentication, and
middleware integration.
5.3 React.js
Application:
The frontend library used to build dynamic, responsive user interfaces for admin panels and user-facing
modules.
5.4 Node.js
Application:
Runs the backend JavaScript logic, handles asynchronous requests, and supports scalability via the event-
driven architecture.
30
5.6 Azure Computer Vision API
Application:
Analyses product images to detect features like objects, text, and tags, which are then used to create
contextually relevant content.
5.7 Stripe
Application:
Integrated as the payment gateway to handle secure transactions in the Evently event management project.
5.8 Clerk
Application:
Provides authentication, user management, and role-based access control for secure login and user identity
management.
31
Source code tracking and rollback
5.10 Docker
Application:
Used for containerizing the application to ensure consistent development and deployment environments.
Microservice orchestration
32
Chapter 6 CONCLUSION & FUTURE SCORE
6.1 Conclusion
This report reflects the practical learning and development experience I gained as a Full Stack Developer
trainee, focusing on the MERN (MongoDB, Express.js, React.js, Node.js) stack and modern web
technologies. Over the course of this training, I successfully designed and implemented two major projects
—Evently, an event management platform, and an AI-powered SEO content generation tool for Shopify
products.
Through these projects, I not only deepened my understanding of the MERN stack but also explored
advanced tools and platforms like Next.js for server-side rendering, TypeScript for robust frontend
development, Stripe for payment integration, Clerk for user authentication, and OpenAI API and Azure
Vision for AI-driven features. Additionally, I employed Git and GitHub for version control and Docker for
containerization, with deployment planned on Microsoft Azure Virtual Machines.
These experiences have equipped me with hands-on skills in building scalable, secure, and efficient full-
stack applications using modern development practices. I have also developed the ability to integrate third-
party APIs, implement microservices, and work with cloud-based platforms for deployment and scaling.
Use of fine-tuned language models or custom OpenAI endpoints for more context-aware content
generation.
Integration with additional AI services like Azure Cognitive Search for personalized product
recommendations.
2. Performance Optimization
Implementing Next.js Incremental Static Regeneration (ISR) for real-time updates without full
redeployment.
Advanced caching strategies and use of CDNs (Content Delivery Networks) to improve performance
at scale.
Integration of advanced security measures such as two-factor authentication (2FA), rate limiting, and
secure cookie handling.
Ensuring GDPR and data privacy compliance for user data handling.
4. Scalable Architecture
Migrating backend services to microservices architecture using Docker and Kubernetes for greater
scalability and maintainability.
Exploring serverless deployment using Azure Functions or AWS Lambda to reduce costs and
improve modularity.
5. Real-Time Capabilities
Adding real-time features using WebSockets or Socket.io for applications like chat support or live
product status.
6. CI/CD Automation
Setting up continuous integration and continuous deployment pipelines using GitHub Actions or
Azure DevOps to streamline development workflows.
7. Cross-Platform Support
Extending the frontend using React Native to build mobile versions of the platforms for Android and
iOS.
34
6.3 Final Thoughts
The internship and subsequent project development journey have not only strengthened my technical
capabilities but also instilled a deeper understanding of how to build full-stack solutions that are aligned
with industry standards. I am confident that these skills will serve as a strong foundation for future
professional opportunities, especially as I work toward becoming a lead developer.
35
36