INTERNSHIP

CHAPTER 1

INTRODUCTION
This report details my completion of the Full Stack Web Development internship in
MERN at Webstack Academy, spanning from August 16, 2023, to October 16, 2023,
under the guidance of Ms. Kavya V. Throughout this period, I delved into the
intricacies of the MERN stack, covering MongoDB, Express.js, React.js, and node.js.
The practical aspect of this learning journey involved the development of the front-
end for a food delivery application named "Order It," with mentors providing the
back-end code. Under the mentorship of Ms. Kavya V., my primary task was to craft
the user interface using React and manage the application's state using Redux. This
hands-on experience allowed me to apply theoretical concepts to a real-world project,
honing my skills in creating dynamic and responsive front-end solutions.

The learning process was further enriched by participating in live session conducted
by Mrs. Richa Jha from 7 pm to 9 pm, five days a week. These interactive sessions
not only complemented the curriculum but also provided a platform for collaborative
learning. Attending these sessions allowed me to clarify doubts, engage in
discussions, and learn from the experiences of both the instructor and fellow learners.
In addition to the technical aspects, the internship emphasised best practices
employed in developing MERN stack web applications.

This included learning efficient code structuring, effective state management using
Redux, and adopting industry standards for creating robust and scalable web
applications.To sum up, the Full Stack Web Development internship at Webstack
Academy,supervised by Ms. Kavya V. and enriched by live sessions with Mrs. Richa
Jha, has been a comprehensive learning experience.

From understanding the MERN stack to implementing the front-end of "Order It" and
learning best practices, the internship has equipped me with practical skills and
confidence in full-stack web development. I am grateful for the valuable insights
gained during this period,which will undoubtedly contribute to my growth as a web
developer.

Dept of CSE, 2023- Page

INTERNSHIP

1.1 Company Overview

WebStack Academy (WSA) is a forward-looking EdTech company in the higher
education space, founded by seasoned entrepreneurs who have been in the
EdTech business for over 18+ years. Our mission is to empower entry-level
engineering graduates and working professionals with the skills needed to excel
in the ever-evolving field of web application development. We offer the best
online MERN stack course for engineering graduates, equipping them with in-
demand skills for employability. For working professionals the MERN stack
course acts as a UpSkilling opportunity where they can transition from working
in legacy stack (ex: .NET) to new age stack (ex: MERN). Our MERN stack
courses are delivered online with an outcome driven approach. Live Virtual
Classes, Lab explainer sessions, Unlimited online doubt clearing system, Prep
sessions for technical topics and Mock interviews makes it a unique package. U
can learn from anywhere in the globe and get benefited in terms of either getting
into your first job or getting into a better job by repositioning your profile.

1.2 Duration of Internship

The total duration of internship is 60 days.

Dept of CSE, 2023- Page

INTERNSHIP

CHAPTER
2
COMPANY PROFILE
Company Name: WebStack Academy(WSA)

WebStack Academy(WSA) offers one of the Best Online Full Stack Web Developer
Course in India and across the globe. Our Core Team includes subject matter experts
who have built world class products from concept to launch. The course curriculum is
tightly integrated with the industry in terms of content and learning outcomes.

Website : http://www.webstackacademy.com
Industry: E-Learning Providers

Type : Private

No. of Employees: 11-50

employees Headquaters: Bangalore,

Karnataka Office Locations:

Banglore

Dept of CSE, 2023- Page

INTERNSHIP

CHAPTER 3

ABOUT THE COMPANY: WSA

WSA is launched by EdTech veterans who have been in the Education and Skilling
Industry for more than 20 years. Over our long journey, we understand the pulse of
placement companies and their skill expectations very well. These companies come in
all sizes which includes venture funded start-ups, unicorns and MNCs. With over
80% of them being our repeat recruiters, talks a lot about the trust we have built with
these organizations over the years.

We have over 1200+ companies hiring our students for Full Stack Web Developer
(MERN), Front end React Developer, Backend Web Developer with JavaScript skills.
We continue to add value to these organizations by reducing their post hiring training
time by at least 50% with our skill building process.

Started by a set of technocrats and business savvy individuals we have more than 15
years of strong footprint in the area of technology education. Have a look into how
our story evolved from initial days.

Dept of CSE, 2023- Page

INTERNSH

Dept of CSE, 2023- Page

INTERNSH

Dept of CSE, 2023- Page

INTERNSH

CHAPTER
4
SCOPE OF THE PROJECT
The focal point of my internship journey was the development of a food delivery web
application called "Order It." For this project, we harnessed the power of React.js and
Redux to build a robust front-end. Specifically, I utilized React for creating dynamic
and interactive user interfaces, while Redux came into play for managing the
application's state seamlessly.

The "Order It" web app boasts user-friendly features, enhancing the overall dining
experience. A notable functionality includes a search bar that empowers users to
effortlessly search for both restaurants and specific dishes. This search capability adds
a layer of convenience, making it easier for users to find exactly what they're craving.

The focal point of my internship journey was the development of a food delivery web
application called "Order It." For this project, we harnessed the power of React.js and
Redux to build a robust front-end. Specifically, I utilized React for creating dynamic
and interactive user interfaces, while Redux came into play for managing the
application's state seamlessly.

The "Order It" web app boasts user-friendly features, enhancing the overall dining
experience. A notable functionality includes a search bar that empowers users to
effortlessly search for both restaurants and specific dishes. This search capability adds
a layer of convenience, making it easier for users to find exactly what they're craving.
Users are also given the ability to personalize their experience by creating profiles
and uploading avatars.

This feature not only adds a personal touch but also contributes to a more engaging
and user-centric platform. Handling payments efficiently is a crucial aspect of any
food delivery application, and for "Order It," we integrated the widely-used payment
platform, Stripe. This integration allowed for a seamless and secure payment process,
ensuring a smooth transaction at the end of the order.

Throughout the development process, the live sessions provided by our mentors
served as invaluable guides. These sessions, coupled with hands-on experience,

Dept of CSE, 2023- Page 7

INTERNSH

enabled me to navigate the complexities of creating a real-world project. The practical

application of React.js and Redux in a live project setting not only reinforced my
understanding of these technologies but also exposed me to industry best practices.
This project proved to be an excellent learning ground, offering me substantial in-
hand experience in building a practical and functional web application.

The exposure to best practices, combined with the guidance from mentors and the
hands-on nature of the project, has significantly enhanced my skills and confidence in
web development. As a result, the "Order It" project stands as a testament to the
culmination of theoretical knowledge and practical application during my MERN
stack internship.

Dept of CSE, 2023- Page 8

INTERNSH

CHAPTER 5

TASK PERFORMED
5.1 Week 1:

Introduction to Full Stack, HTML, CSS, and JavaScript The commencement of the
MERN full-stack web development internship marked an exciting journey into the
multifaceted world of full-stack development. The inaugural week served as a
comprehensive introduction, laying the groundwork for understanding the intricate
relationship between front-end and back-end technologies. The interns were
immersed in the dynamic realm of HTML, CSS, and JavaScript—the trio that forms
the backbone of every web application.

The week commenced with an overview of full-stack development, providing a

roadmap for the upcoming weeks. This encompassed understanding the roles of the
front-end and back-end in creating a harmonious and functional web application.
Following this, the focus shifted to HTML, the markup language that structures the
content of web pages. Practical sessions allowed interns to delve into creating well-
formed and semantically meaningful HTML documents.

CSS, the styling language that breathes life into HTML, took centre stage next. The
interns were guided through the intricacies of styling, learning how to craft visually
appealing and responsive user interfaces. JavaScript, the scripting language that adds
interactivity to web pages, wrapped up the week's curriculum. Interns engaged in
hands-on coding exercises to grasp the fundamentals of JavaScript, paving the way
for more complex challenges in the weeks to come.

The culmination of the week saw interns successfully completing introductory

projects that showcased their newfound skills in HTML, CSS, and JavaScript. This
provided a solid foundation upon which subsequent weeks would build.

Dept of CSE, 2023- Page 9

INTERNSH

5.2 Week 2:

Project Implementation, React, Redux With a robust understanding of the

fundamental web technologies established in the first week, the second week delved
into the world of front-end frameworks, with a primary focus on React.js. This
powerful library, maintained by Facebook, introduces a component-based architecture
that simplifies the development of complex user interfaces.

The week kicked off with an exploration of React's core concepts, including
components, state, and props. Interns engaged in hands-on projects, enabling them to
apply theoretical knowledge to practical scenarios. As the week progressed, the
complexity of the projects increased, challenging interns to create dynamic and
responsive user interfaces.

The latter part of the week introduced Redux, a state management library often used
in conjunction with React. Interns grasped the concepts of actions, reducers, and the
Redux store, gaining insight into how to manage the state of an application in a
scalable and predictable manner. Practical exercises involving the integration of
Redux into React applications honed the interns' skills in handling complex state
management scenarios.

The capstone project for the week required interns to develop a fully functional front-
end application using React and Redux. This project not only solidified their
understanding of these technologies but also provided a tangible showcase of their
ability to build modern and efficient user interface

Dept of CSE, 2023- Page

INTERNSH

5.3 Week 3:

Overview of Backend, Fetching Data from API The third week marked a pivotal
transition from client-side development to server-side implementation, introducing
interns to the backend technologies of the MERN stack. The focus shifted to Node.js
and Express.js, providing interns with the tools to construct robust server-side
applications.

The week commenced with an in-depth exploration of Node.js, the server-side

JavaScript runtime. Interns learned about event-driven programming, asynchronous
operations, and the event loop—a crucial aspect of Node.js that contributes to its
efficiency in handling concurrent requests. Subsequently, the spotlight turned to
Express.js, a web application framework for Node.js, covering concepts such as
routing, middleware, and handling HTTP requests. Interns engaged in practical
sessions, creating and deploying their first server-side applications.

A significant portion of the week was dedicated to MongoDB, a NoSQL database that
seamlessly integrates with the MERN stack. Interns learned to set up databases,
define schemas, and perform CRUD operations—essential skills for managing data
on the server side. The latter part of the week focused on fetching data from external
APIs. Interns delved into the intricacies of making asynchronous requests, handling
responses, and incorporating dynamic data into their applications. The week
concluded with interns successfully developing a full-stack application that interacted
with external APIs, demonstrating their ability to integrate front-end and back-end
components

Dept of CSE, 2023- Page

INTERNSH

5.4 Week 4:

Authentication, Finalising, and Deploying The fourth and final week of the MERN
full-stack web development internship was dedicated to advanced topics, with a
primary focus on authentication and the deployment of web applications.
Authentication, a critical aspect of many modern web applications, took centre stage.
Interns were introduced to the principles of user authentication, exploring techniques
such as password hashing, token-based authentication, and session management.
Practical exercises allowed interns to implement secure authentication systems,
ensuring the integrity and confidentiality of user data.

The latter part of the week shifted gears towards finalising projects and preparing for
deployment. Interns learned the best practices for optimising and securing web
applications before deploying them to production environments. Concepts such as
environment variables, server configuration, and performance optimization were
covered, providing interns with a holistic understanding of the deployment process.
The capstone project for the week required interns to implement authentication in
their previously developed applications and deploy them to live servers. This final
project not only showcased their proficiency in implementing advanced features but
also provided a tangible demonstration of their ability to take a web application from
development to deployment.

In conclusion, the four weeks of the MERN full-stack web development internship
provided interns with a comprehensive and hands-on experience in mastering the
intricacies of both front-end and back-end development. The structured curriculum,
coupled with practical projects, ensured that interns not only gained theoretical
knowledge but also the practical skills required to excel in the dynamic field of full-
stack web development.

The journey from introductory concepts to advanced topics equipped interns with the
confidence and expertise needed to contribute effectively to the ever-evolving world
of web development.

Dept of CSE, 2023- Page

INTERNSH

Fig.5.1 Registration Page

Fig 5.2 Login Page

Fig 5.3 Password Page

Dept of CSE, 2023- Page

INTERNSH

Fig 5.4 Home Page

Fig 5.5 Item Added Status to cart

Fig 5.6 Delivery Page

Dept of CSE, 2023- Page

INTERNSH

Fig 5.7 Checkout Page

Fig 5.8 Order Sucessful Page

Fig 5.9 Order Detail Page

Dept of CSE, 2023- Page

INTERNSH

CHAPTER 6

CONCLUSION
The "Order It" project undertaken during my internship at Web Stack Academy in
Bangalore represents a pivotal moment in my journey as a web developer. Through
harnessing the power of React.js and Redux, we crafted a sophisticated food delivery
web application that not only streamlined the ordering process but also prioritized
user experience and convenience.

Key features such as the intuitive search bar, user profile customization, and seamless
payment integration with Stripe were meticulously implemented to ensure a smooth
and engaging experience for our users. The guidance and mentorship provided by
industry experts played a crucial role in navigating the complexities of real-world
project development, reinforcing my understanding of best practices and honing my
skills in web development.

As I reflect on this experience, I am proud of the knowledge gained, the challenges

overcome, and the tangible results achieved. The "Order It" project not only serves as
a testament to my proficiency in the MERN stack but also as a testament to my ability
to translate theoretical knowledge into practical solutions. Moving forward, I am
excited to apply these skills and insights to future endeavors, confident in my ability
to tackle complex challenges and deliver innovative web solutions.

Dept of CSE, 2023- Page

INTERNSH

REFERENCES

[1] "Best Online Full Stack Developer Course in MERN with Placements."
Webstack Academy, https://www.webstackacademy.com/

[2] “GeeksforGeeks HTML,CSS Tutorials”https://www.geeksforgeeks.org/html-

css/

[3] "W3Schools JavaScript Tutorial." W3Schools, https://www.w3schools.com/js/.

[4] "Node.js Documentation" - Node.js Foundation https://nodejs.org/docs/latest/api/

Dept of CSE, 2023- Page