INTERNSHIP REPORT

on

FULL STACK DEVELOPMENT IN MERN

at
WEBSTACK ACADEMY

Submitted in partial fulfillment of the

Requirements for the award of
Degree of Bachelor of Technology in
Computer science & Engineering

SUBMITTED BY:
Name : Priyanshi Prajapati
University Roll No.: 2207510109005 Semester/Branch: 7th semester/CSE

SUBMITTED TO:
Mr. Amit Dubey
(Assistant Professor – CSE Department)

Department of Computer Science & Engineering

KIPM, College of engineering & Technology
GIDA Gorakhpur
 DECLARATION

I hereby declare that the Internship Report titled "Full Stack Web Development in MERN"
at "Web Stack Academy" is an authentic record of my own work, carried out during the
internship period from 2nd July 2024 to 16th September 2024, as part of the partial
fulfillment of the requirements for the degree of B.Tech. (Computer Science &
Engineering) at KIPM College of Engineering & Technology, GIDA Gorakhpur.

This work was completed under the guidance of Mr. Amit Dubey and reflects my
independent learning and contribution.
 (Signature of Student)
Priyanshi Prajapati
Date: University Roll No.: 2207510109005

Certified that the above statement made by the student is correct to the best of our knowledge
and belief.

Examined By:
(Signature)
Mr. Amit Dubey
(Signature)
Head of Department
Dr. Ranjeet Rai

CERTIFICATE
 ACKNOWLEDGEMENT

I would like to express my heartfelt gratitude to Web Stack Academy (WSA) for giving me the
incredible opportunity to complete my Internship in Full Stack Web Development in MERN.
My sincere thanks to Mr. Mubeen Jukaku (Technology Head), Mr. Jayakumar
Balasubramanian (Director at WSA) and Mr. Rohit Kumar (Internship Mentor), for their
invaluable guidance and support throughout this internship.

I am deeply thankful to my guide, Mr. Amit Dubey (Assistant Professor - CSE Department),
for his expert advice, continuous support, and motivation throughout the course of this
internship.

I would also like to extend my sincere thanks to Dr. Ranjeet Rai (Head of Computer Science &
Engineering) for his kind co-operation and encouragement.

Lastly, I am grateful to my mentors, peers, and my family, whose constant encouragement

inspired me to make the most of this learning experience.

(Signature of student)
Priyanshi Prajapati
University Roll No.: 2207510109005
 ABSTRACT

This report highlights the experiences and knowledge gained during the internship at Web Stack
Academy (WSA), a leading organization specializing in Full Stack Web Development training.
The internship, conducted from 2nd July 2024 to 16th September 2024, focused on equipping
participants with in-depth skills in the MERN stack (MongoDB, Express.js, React.js, and
Node.js). The training provided a balance of theoretical understanding and practical application,
covering topics such as frontend development, backend integration, database management, and
deployment. Emphasis was also placed on implementing the Software Development Life Cycle
(SDLC), debugging, problem-solving, and teamwork.

Under the guidance of the Director of Web Stack Academy, Mr. Jayakumar
Balasubramanian, the program ensured a high standard of training by integrating real-world
challenges into the curriculum. The mentorship of Mr. Rohit Kumar, an experienced
professional in web development, played a vital role in guiding participants through the nuances
of project development. Their expertise and constructive feedback were instrumental in
understanding industry best practices and completing a fully functional web application.

This internship has been a transformative experience, preparing participants to excel in the
dynamic field of Full Stack Web Development by bridging the gap between academic
knowledge and industry requirements.
 ABOUT THE COMPANY : WEB STACK ACADEMY

Web Stack Academy (WSA) is a prominent organization specializing in advanced web

development training and mentorship. Renowned for its excellence in professional education,
WSA offers comprehensive programs that equip students and professionals with the latest skills
in Full Stack Web Development, focusing on the popular MERN (MongoDB, Express.js,
React.js, Node.js) stack.

The academy emphasizes practical, hands-on learning through project-based modules and real-
world applications. Their curriculum covers foundational web technologies like HTML, CSS,
JavaScript, and progresses to advanced concepts, including SDLC (Software Development Life
Cycle) processes. WSA's goal is to prepare participants for the evolving tech industry by
bridging the gap between academic knowledge and industry demands.

Under the guidance of experienced industry professionals, WSA ensures learners not only gain
technical expertise but also develop problem-solving abilities, debugging techniques, and
efficient project management skills. With a robust support system and a community-oriented
approach, the academy fosters a conducive environment for innovation, creativity, and
professional growth.

WSA has earned a reputation as a reliable training partner for aspiring developers, empowering
them with the confidence and skills to excel in the competitive IT sector. Through initiatives like
internships, workshops, and certification programs, the academy has successfully shaped
countless careers and contributed to the growth of the tech ecosystem.
 TABLE OF CONTENTS

1. Introduction…………………………………………………………………………1-2

2. Formal Training Provided…………………………………….…………………….3-4

3. About Internship…………………………………………….…….……………….5-15

3.1. Objectives……………………………………………………………………...5-8

3.2. Tools and Technologies Used……………………………………………………9

3.3. Techniques studied in different departments……………………………………10

3.4. Software and Tools Used………………………………………………………..11

3.5. Highlights of Internship Training Exposure…………………………………12-15

4. Problem Identification/Case Study………………………………….……………16-19

5. Key Learnings from the Study……………………………………….………………20

6. Snapshots…………………………………………...…………………………….21-25

7. Conclusion…………………………………………………..……………………….26

8. Reference…………………………………………………..………………………...27
1. INTRODUCTION

The report provides a comprehensive account of an internship experience at Web Stack

Academy (WSA), focusing on Full Stack Web Development using the MERN stack. It
details the goals, processes, and outcomes of the internship, highlighting both technical and
personal growth. The internship spanned from July 2, 2024, to September 16, 2024, and
offered practical exposure to building robust web applications.
The internship began with foundational training in essential web development tools and
technologies, such as HTML, CSS, JavaScript, and React.js. These fundamentals laid the
groundwork for deeper learning in the MERN stack, which encompasses MongoDB,
Express.js, React.js, and Node.js. The program emphasized the Software Development Life
Cycle (SDLC) methodology, providing a structured approach to web application
development, from requirement analysis and design to implementation and testing. This
exposure allowed for a clear understanding of how web development projects are
conceptualized, planned, and executed in professional environments.
Key objectives of the internship included gaining hands-on experience with Full Stack Web
Development, strengthening problem-solving and debugging skills, mastering the SDLC
process, and building a comprehensive project using MERN technologies. Each goal was met
through a combination of guided learning sessions, real-world assignments, and a capstone
project. The capstone project served as a culmination of all the skills acquired, demonstrating
the ability to design and implement a fully functional web application from scratch.
One of the standout aspects of the internship was the practical approach to learning. The
program not only covered theoretical concepts but also required their application in realistic
scenarios. Participants were encouraged to troubleshoot issues independently, fostering a
mindset of resilience and adaptability. Debugging sessions provided insight into identifying
and resolving errors efficiently, a skill that is invaluable in the fast-paced world of web
development.
The supportive learning environment at WSA was instrumental in making the internship a
success. Mentors, who were experienced industry professionals, provided valuable guidance
and feedback throughout the process. Their expertise and insights bridged the gap between
academic knowledge and real-world application, offering a unique learning perspective.

1
 Regular interactive sessions, progress reviews, and collaborative problem-solving activities
ensured continuous improvement and growth.
Throughout the internship, emphasis was placed on teamwork, effective communication, and
time management. Working within deadlines and managing tasks efficiently prepared
participants for the demands of the tech industry. These experiences also enhanced soft skills,
which are crucial for thriving in collaborative work environments.
The internship report also reflects on the overall learning outcomes, which were both
technical and personal. On the technical side, skills in frontend and backend development
were sharpened, along with proficiency in database management and server-side
programming. Familiarity with tools such as Git for version control and platforms like Linux
for development environments further added to the skill set. On the personal side, the
internship fostered a sense of discipline, problem-solving acumen, and the ability to work
under pressure.
The internship at WSA proved to be a transformative experience, equipping participants with
the knowledge and skills to excel in the field of web development. By the end of the
program, interns were not only adept at using the MERN stack but also confident in their
ability to take on complex projects and contribute effectively to professional teams. The
internship underscored the importance of continuous learning, adaptability, and a proactive
approach to challenges.
This report captures the essence of the internship, providing an in-depth look at the journey,
achievements, and takeaways. It serves as a testament to the enriching experience at Web
Stack Academy and the significant strides made in becoming a skilled Full Stack Web
Developer.

2. FORMAL TRAINING PROVIDED

The internship at Web Stack Academy (WSA) provided structured and comprehensive
formal training in Full Stack Web Development, ensuring a well-rounded learning
experience. The program was designed to deliver practical knowledge alongside theoretical
foundations, enabling participants to confidently apply their skills in real-world scenarios.

2
The training began with an introduction to foundational web technologies, including HTML,
CSS, and JavaScript. These sessions focused on building a strong base in creating responsive
web layouts, styling components, and implementing dynamic client-side interactions.
Participants were guided through practical exercises to solidify their understanding of core
web development principles. Additionally, best practices for clean code writing, semantic
structuring, and performance optimization were emphasized.
As the program progressed, the training shifted towards React.js, a widely used JavaScript
library for building user interfaces. Sessions covered the essential concepts of component-
based architecture, state management, and lifecycle methods. Participants developed hands-
on projects to implement React features like hooks, routing, and API integration. These
exercises helped in understanding how to create scalable and interactive front-end
applications effectively.
The back-end training focused on Node.js and Express.js, essential components of the
MERN stack. Participants learned to create server-side applications, handle HTTP requests,
and manage APIs. The program also provided exposure to database management using
MongoDB, teaching how to design and interact with NoSQL databases. Topics like CRUD
operations, data modeling, and database security were covered in detail, ensuring participants
were equipped to handle back-end development tasks efficiently.
A unique aspect of the training was the introduction to the Software Development Life Cycle
(SDLC). Participants were familiarized with the various phases of SDLC, including planning,
design, development, testing, deployment, and maintenance. Emphasis was placed on
understanding the importance of following structured workflows and documentation to
ensure successful project delivery. Practical exposure to tools and methodologies used in
each SDLC phase helped participants gain a clearer understanding of real-world software
development processes.
The training also included debugging and problem-solving techniques. Sessions were
dedicated to identifying and resolving common development errors, improving code quality,
and optimizing performance. This aspect of the training enhanced participants' confidence in
troubleshooting and refining their projects.
Throughout the program, participants engaged in building a full-stack web application using
the MERN stack. This hands-on project served as the culmination of their learning, providing

3
an opportunity to apply their acquired skills holistically. The project tasks were broken into
smaller modules, each reflecting real-world challenges and scenarios. Mentors provided
guidance and constructive feedback, ensuring participants developed industry-relevant
solutions.
Soft skills were also integrated into the training program. Participants were encouraged to
collaborate, communicate effectively, and manage their time efficiently. These skills are
crucial for working in team-based environments and ensuring the successful execution of
complex projects.
The formal training at WSA was structured to foster a deep understanding of web
development technologies, improve technical proficiency, and instill the confidence needed
to tackle industry challenges. By the end of the program, participants emerged as capable
developers with a clear grasp of modern development practices, ready to contribute
meaningfully to the tech ecosystem.

4
3. ABOUT INTERNSHIP
3.1. Objectives
The primary objective of the internship at Web Stack Academy (WSA) was to equip
participants with a comprehensive understanding of Full Stack Web Development
using the MERN stack (MongoDB, Express.js, React.js, and Node.js) while fostering
essential industry-relevant skills. The internship was meticulously structured to
ensure that every participant emerged as a confident, skilled, and job-ready
developer by the end of the program. Below is an in-depth explanation of the
objectives:
1. Developing Expertise in Full Stack Web Development
The core aim was to provide hands-on exposure to the complete development cycle
of web applications. Full Stack Development involves both frontend and backend
technologies, and the objective was to help participants master both aspects.
i. Frontend Development: Training focused on creating responsive and user-
friendly interfaces using HTML, CSS, JavaScript, and React.js. Participants
were taught how to design engaging layouts, implement animations, and build
interactive components.
ii. Backend Development: The program delved into Node.js and Express.js to
teach participants server-side scripting and building robust APIs.
iii. Database Management: MongoDB was introduced to manage, store, and
retrieve data securely and efficiently, ensuring participants could handle real-
world data management challenges.
2. Practical Implementation of SDLC Phases
Understanding the Software Development Life Cycle (SDLC) is crucial for building
efficient and scalable software solutions. One of the primary objectives of the
internship was to familiarize participants with every phase of SDLC, including:
i. Requirement Analysis: Understanding project needs and defining clear
goals.
ii. System Design: Creating system architecture, database schemas, and user
interface designs.

5
iii. Implementation: Writing clean, efficient code and integrating the frontend
with the backend.
iv. Testing: Identifying and fixing bugs to ensure the application is error-free and
efficient.
v. Deployment: Hosting the application on platforms like Heroku or Netlify to
make it accessible to users.
vi. Maintenance: Learning strategies to update and scale applications post-
deployment.
By following this structured approach, participants could understand how real-
world projects are planned, executed, and delivered.
3. Building a Project Using MERN Technologies
The internship provided an opportunity to work on a real-world project using MERN
stack technologies. This project served as a practical application of the skills
acquired during the training. The objective was to ensure that participants could
independently design, develop, and deploy a complete web application by the end of
the program.
i. Learning by Doing: Participants built a full-stack application step-by-step,
integrating all the components of the MERN stack.
ii. Real-World Relevance: The project simulated real-life development
scenarios, teaching participants how to tackle practical challenges such as API
integration, database management, and handling user authentication.
4. Strengthening Problem-Solving and Debugging Skills
A significant part of the internship was dedicated to enhancing participants’
problem-solving and debugging skills. Developers often face challenges such as code
errors, performance bottlenecks, or security vulnerabilities. The objective was to
equip participants with the skills to:
i. Analyze and identify the root cause of issues.
ii. Use debugging tools like Chrome DevTools and IDE features.
iii. Write efficient and optimized code to avoid potential errors.
By focusing on these aspects, the program ensured participants became confident in
resolving issues independently.

6
5. Fostering Collaboration and Teamwork
Modern software development is often team-oriented, requiring effective
collaboration. A key objective was to prepare participants for such environments by
teaching them how to:
i. Work in teams to build and manage projects collaboratively.
ii. Use version control systems like Git and GitHub for seamless teamwork.
iii. Communicate ideas effectively and contribute to shared goals.
This objective was achieved through group activities and team-based project tasks,
simulating real-world professional scenarios.
6. Gaining Real-World Exposure
To bridge the gap between academic learning and industry requirements, the
program aimed to provide participants with practical, real-world exposure. This was
achieved through:
i. Assigning tasks based on actual challenges faced in the industry.
ii. Guiding participants to follow professional workflows and practices.
iii. Introducing them to tools like Figma for design, Postman for API testing, and
hosting platforms for deployment.
7. Enhancing Soft Skills
While technical skills are essential, soft skills are equally important in professional
settings. The internship also focused on developing:
i. Time Management: Teaching participants how to manage deadlines and
prioritize tasks.
ii. Communication Skills: Enhancing their ability to articulate ideas and
collaborate with peers.
iii. Adaptability: Encouraging flexibility to handle changing requirements or
challenges during development.
8. Preparing for Future Opportunities
The final objective of the internship was to prepare participants for their future
careers. By the end of the program, participants were expected to:
i. Have a portfolio-ready project that demonstrates their capabilities.
ii. Be proficient in the MERN stack and related tools.

7
 iii. Feel confident applying for roles such as Full Stack Developer, Frontend
Developer, or Backend Developer.

3.2. Tools & Technology Used

The internship provided exposure to modern technologies and tools essential for Full
Stack Web Development:
1. Frontend Tools:
i. HTML & CSS: For creating responsive and visually appealing web
interfaces.
ii. React.js: A powerful JavaScript library for building dynamic, component-
based user interfaces.
2. Backend Technologies:
i. Node.js: A runtime environment for executing JavaScript on the server-
side.
ii. Express.js: A lightweight web framework for creating robust APIs and
backend logic.
3. Database Management:
i. MongoDB: A NoSQL database for efficient and scalable data storage and
retrieval.
4. Version Control and Collaboration:
i. Git: For tracking changes, managing repositories, and collaborating on
projects.
5. Design Tools:
i. Figma: For UI/UX prototyping and design.

8
3.3. Techniques studied in different Departments
i. Frontend Development Department:
Participants learned techniques for developing responsive layouts using
HTML and CSS. Advanced concepts like CSS Flexbox, Grid, and animations
were covered. React.js training focused on building reusable components,
managing application state, and integrating APIs for dynamic content
rendering.
ii. Backend Development Department:
Emphasis was placed on creating RESTful APIs using Node.js and Express.js.
Participants learned to handle middleware, route handling, and data validation
techniques. The training also included session and token-based authentication
for secure application development.
iii. Database Management Department:
In this segment, participants studied the design and structure of NoSQL
databases using MongoDB. Techniques for creating schemas, performing
CRUD operations, and managing database security were explained.
iv. Software Development Practices Department:
This department focused on implementing the SDLC. Participants were
guided through requirement gathering, system design, coding, testing, and
deployment phases. Agile methodologies were also introduced to ensure
iterative and collaborative development.
v. Debugging and Optimization Department:
Techniques for identifying bottlenecks, improving code efficiency, and
optimizing application performance were highlighted. Participants used tools
like Chrome DevTools for debugging frontend and backend code.

9
3.4. Software and Tools Used
3.4.1. Development Tools:
i. Visual Studio Code (VS Code): The primary Integrated Development
Environment (IDE) for coding.
ii. Postman: For API testing and debugging.
3.4.2. Collaboration Tools:
i. GitHub: For version control, repository management, and team
collaboration.
3.4.3. Browser Tools:
i. Chrome DevTools: For debugging and testing frontend and backend
functionalities.
3.4.4. Design Tools:
i. Figma: For creating wireframes and prototypes for project designs.
3.4.5. Deployment Platforms:
i. Heroku and Netlify: For deploying the final project to a live
environment.

10
3.5. Highlights of Training Exposure
The internship at Web Stack Academy (WSA) was a comprehensive and enriching
experience, offering practical exposure to modern web development technologies,
tools, and methodologies. It focused on bridging the gap between theoretical
knowledge and industry practices, equipping participants with the necessary skills to
thrive in the tech world. Below are the key highlights of the training exposure:
3.5.1. Hands-on Training with the MERN Stack
The cornerstone of the internship was the practical implementation of the
MERN stack—MongoDB, Express.js, React.js, and Node.js. Participants
gained firsthand experience in developing full-stack web applications,
covering both frontend and backend development.
1. Frontend Exposure:
i. Designed and developed user-friendly interfaces using HTML,
CSS, and JavaScript.
ii. Learned React.js to create dynamic, component-based UIs,
focusing on reusable and scalable designs.
iii. Worked on API integrations to fetch and display dynamic data on
the frontend.
2. Backend Exposure:
i. Built RESTful APIs using Node.js and Express.js, enabling
seamless data communication.
ii. Implemented middleware for handling authentication, validation,
and error management.
iii. Learned to structure server-side applications for efficiency and
scalability.
3. Database Management:
i. Designed and implemented NoSQL databases using MongoDB,
handling CRUD operations and ensuring data security.
ii. Optimized database queries for better performance and scalability.
3.5.2. Exposure to the Software Development Life Cycle

11
 A major highlight of the training was the structured approach to project
development through the Software Development Life Cycle (SDLC). This
methodology provided participants with a professional framework for building
and managing web applications.
i. Requirement Analysis: Identified and documented project goals
and user requirements.
ii. Design: Created wireframes, user interface designs, and database
schemas. Tools like Figma were introduced for prototyping.
iii. Development: Built and integrated the frontend, backend, and
database layers step by step.
iv. Testing: Emphasized debugging and testing, ensuring error-free
and optimized code.
v. Deployment: Deployed projects to platforms like Heroku or
Netlify, making them live and accessible to end users.
3.5.3. Project-Based Learning
Participants were tasked with building a full-stack project from scratch, which
simulated real-world development scenarios. This project served as a capstone
experience, allowing participants to apply the skills they acquired during the
training.
i. The project involved creating a dynamic web application with user
authentication, API integration, and responsive design.
ii. Participants worked on real-world challenges such as debugging,
performance optimization, and managing deadlines.
iii. The mentors provided continuous guidance, ensuring a structured
and impactful learning process.
3.5.4. Debugging and Problem-Solving Skills
One of the critical aspects of the training was the focus on debugging and
problem-solving techniques. Participants learned how to:
i. Use tools like Chrome DevTools to identify and resolve frontend
issues.

12
 ii. Debug backend applications using console logging and Node.js
debugging tools.
iii. Write optimized code to minimize errors and improve
performance.
This hands-on problem-solving approach improved participants'
confidence in tackling technical challenges.
3.5.5. Collaboration and Version Control
Participants were introduced to professional collaboration tools and
workflows.
i. Git and GitHub: Learned version control techniques to manage
code repositories, track changes, and collaborate effectively in
team environments.
ii. Teamwork activities simulated industry practices, encouraging
communication and collaboration. This exposure prepared
participants for working in real-world development teams.
3.5.6. Soft Skills and Professional Development
In addition to technical skills, the training also emphasized soft skills like
communication, time management, and teamwork.
i. Participants were encouraged to present their ideas, receive
feedback, and work in teams to solve problems.
ii. Sessions on managing deadlines and prioritizing tasks were
conducted, fostering a professional work ethic.
3.5.7. Real – World Exposure
The training replicated real-world industry scenarios, preparing participants
for the challenges of professional environments.
i. Participants tackled practical assignments that mimicked the
requirements of modern web development projects.
ii. Industry-standard tools such as Postman (for API testing), Figma
(for design), and GitHub (for collaboration) were introduced.
iii. Mentors provided insights into industry trends and best practices,
ensuring participants were well-equipped for the job market.

13
 3.5.8. Outcome of Training Exposure
By the end of the internship, participants gained a holistic understanding of
Full Stack Web Development and were confident in building, deploying, and
managing web applications. They left with:
i. A fully functional project demonstrating their skills.
ii. Proficiency in using the MERN stack and associated tools.
iii. Improved problem-solving and debugging capabilities.
iv. Valuable experience in collaboration and professional workflows.

4. PROBLEM IDENTIFICATION/CASE STUDY

During the internship at Web Stack Academy (WSA), a comprehensive case study was
undertaken to identify and address real-world challenges encountered during Full Stack
Web Development. The focus was on understanding practical issues that arise in the
development of dynamic web applications and implementing solutions using the MERN
stack. Below is an overview of the problem identification process and the steps taken to
resolve these issues:
Case Study: Development of a Full-Stack Web Application
Objective:
To develop a dynamic web application with features such as user authentication, data
storage, and a responsive design. The application was intended to simulate a real-world
project with multiple functionalities and interactions between the frontend, backend, and
database.
4.1. Problem: Database Design Challenges
4.1.1. Issue Identified:
Structuring the NoSQL database to accommodate various user data types
while ensuring efficient queries was a significant challenge. Relationships
between data (e.g., users, orders, and products) needed to be carefully
modeled.
4.1.2. Solution:

14
 i. Used MongoDB's document-based schema design to create
flexible collections.
ii. Leveraged techniques like embedded documents for nested data
and referenced documents for related collections.
iii. Optimized query performance by indexing frequently queried
fields.

4.2. Problem: Authentication and Security

4.2.1. Issue Identified
Implementing a secure user authentication system was critical to the
project’s success. Protecting sensitive user data, such as passwords, and
ensuring session management posed technical challenges.
4.2.2. Solution
i. Implemented JWT (JSON Web Tokens) for secure user
authentication.
ii. Used the bcrypt library to hash and store user passwords securely.
iii. Added middleware in Express.js to validate user authentication
tokens for protected routes.
4.3. Problem: State Management in React
4.3.1. Issue Identified:
Managing the application’s state for dynamic user interfaces, especially in
scenarios involving data fetched from APIs, was complex. Components
often needed to share or manage data updates efficiently.
4.3.2. Solution:
i. Used React's Context API for global state management.
ii. Implemented useState and useEffect hooks for handling local state
and API calls.
iii. Improved data flow between components by adopting a component
hierarchy that minimized prop drilling.

15
4.4. Problem: API Integration and Data Handling
4.4.1. Issue Identified
Fetching data from the backend using RESTful APIs and dynamically
rendering it on the frontend required efficient integration techniques.
Handling errors during API requests was another challenge.
4.4.2. Solution

i. Used Axios to make API requests from the React frontend to the
Express backend.
ii. Implemented error-handling mechanisms to gracefully display
error messages to users.

iii. Optimized API routes by batching multiple requests when possible

to reduce latency.
4.5. Problem: Deployment and Cross-Environment Compatibility
4.5.1. Issue Identified
Deploying the application to a live server posed challenges with
environment variable management, ensuring cross-environment
compatibility, and dealing with platform-specific issues.
4.5.2. Solution

i. Used Heroku for backend deployment and Netlify for frontend

hosting.
ii. Configured .env files for managing environment-specific
configurations securely.

iii. Debugged deployment issues using Heroku logs and browser

developer tools.

4.6. Problem: Debugging and Performance Optimization

4.6.1. Issue Identified

16
 Debugging errors in both the frontend and backend, and optimizing the
performance of the application under load, were critical challenges.
4.6.2. Solution

i. Used Chrome DevTools and Postman to test APIs and debug

frontend issues.
ii. Identified bottlenecks in backend processes and optimized database
queries.
iii. Minimized render times by implementing lazy loading for
components and assets.

5. KEY LEARNINGS FROM THE STUDY

1. Understanding the MERN Workflow:

Gained an in-depth understanding of how frontend, backend, and database layers
interact in a full-stack application.
2. Importance of Planning and Design:
Realized the significance of planning the database schema and application
architecture before starting development.
3. Handling Real-World Challenges:
Learned to deal with common issues like debugging, API integration, and deployment
in a structured manner.

17
4. Focus on Security and Optimization:
Understood the importance of securing user data and optimizing application
performance for a better user experience.
5. Collaboration and Version Control:
Practiced using Git for managing code repositories, resolving merge conflicts, and
collaborating effectively with team members.

18
6. SNAPSHOTS
Landing Page

Menu Items Page

Register Page

19
Login Page

20
Cart Page

Payment Gateway Page

21
User Order’s List Page

Order Detail Page

22
Profile Page

Update Profile Page

23
7. CONCLUSION
The internship at Web Stack Academy (WSA) was an invaluable learning experience that
provided comprehensive exposure to Full Stack Web Development using the MERN stack.
Through a structured program focusing on hands-on training, participants gained practical
knowledge of modern web technologies such as React.js, Node.js, Express.js, and
MongoDB. The integration of real-world projects and a step-by-step approach to the
Software Development Life Cycle (SDLC) enhanced technical skills, problem-solving
abilities, and debugging expertise.
The program bridged the gap between academic learning and industry practices, equipping
participants with essential tools and workflows like Git, Postman, and Figma. By working
on real-world challenges such as API integration, authentication, and deployment,
participants became proficient in designing, developing, and deploying scalable web
applications. The emphasis on teamwork, collaboration, and professional communication
further strengthened participants' ability to work effectively in real-world environments.
Overall, the internship fostered a deep understanding of Full Stack Development, instilled
confidence in tackling complex technical challenges, and prepared participants for future
professional endeavors. The skills, knowledge, and practical exposure gained during the
program have laid a strong foundation for participants to excel in their careers as competent
and industry-ready developers.

8. REFERENCES

1. Web Stack Academy Training Materials – Comprehensive course content on

Full Stack Web Development.

24
2. MongoDB Documentation – Official documentation for NoSQL database
management. (https://www.mongodb.com/docs)

3. Node.js Documentation – Guidelines and tutorials for server-side development.

(https://nodejs.org/en/docs)

4. React.js Official Website – Documentation and best practices for building user
interfaces. (https://reactjs.org)

5. Express.js Guide – Framework documentation for backend development.

(https://expressjs.com)

6. Figma Help Center – Resources for UI/UX design and prototyping.

(https://help.figma.com)

7. Postman Learning Center – Tutorials for API testing and integration.

(https://learning.postman.com)

8. GitHub Guides – Best practices for version control and collaboration.

(https://guides.github.com)

9. Heroku Documentation – Resources for deploying web applications.

(https://devcenter.heroku.com)

10. Internship Certificate – Documentation and project validation provided by Web

Stack Academy.

25