TABLE OF CONTENTS

Chapter No. Topics Page No.

01. Introduction 1-3

02. Internship Training 4-6

03. Software Specification 7-9

Hardware Specification
Technology Used

04. Module Description 10-17

05. Testing 18-23

06. Conclusion 24-25

07. Bibliography 26-27

CHAPTER 1
Internship Report On “MERN STACK DEVELOPMENT”

INTRODUCTION

INTRODUCTION OF THE INTERSHIP PROJECT

The project mainly focuses on developing a Tic-Tac-Toe Game using the MERN Stack, which
includes MongoDB, Express.js, React.js, and Node.js. It is a full-stack JavaScript framework
that enables the creation of interactive, scalable, and real-time web applications. The game
allows users to play against an AI or another player, track their scores, and experience a
smooth, engaging UI with real-time updates.

The Tic-Tac-Toe Website integrates AI-based move prediction and a scoring system,
providing an interactive and competitive gaming experience. By leveraging the MERN stack,
users can play in real-time, save their game progress, and challenge AI opponents with
varying difficulty levels.

MERN Stack ensures seamless integration between the front-end and back-end, with React.js
handling the user interface and Node.js with Express.js managing the game logic and user
data. MongoDB serves as the database, storing game history, player scores, and authentication
details. Secure user authentication is implemented to allow personalized gaming experiences,
enabling users to track their progress and compete with others. This project enhances full-
stack development skills, covering areas such as front-end design, game logic implementation,
AI integration, API handling, and database management, while also providing hands-on
experience with real-time game development.

1.2 OBJECTIVE OF THE PROJECT

• To develop a fully functional Tic-Tac-Toe game that allows users to play against AI
or human opponents, ensuring an interactive and engaging experience.
• To implement secure user authentication, allowing users to track their scores and save
game history.
• To integrate AI-powered gameplay, enabling dynamic difficulty levels based on user
performance.
1
ASC Degree College, BCA Department
Internship Report On “MERN STACK DEVELOPMENT”

1.3 SCOPE OF THE PROJECT

The Tic-Tac-Toe Game is a MERN Stack-based web application that allows users to play
against an AI opponent or another player while tracking their game history. It features real-
time game updates, a responsive user interface, and intelligent AI move prediction, enhancing
skills in full-stack development, AI integration, and game logic implementation.

1.4 LIMITATIONS OF THE EXISTING PROJECT

• Traditional Tic-Tac-Toe games lack AI-driven gameplay, making them predictable

and less engaging for users.
• Most platforms do not provide a personalized experience, preventing players from
tracking scores or playing with different difficulty levels.

PROPOSED SYSTEM
The proposed system utilizes JavaScript & Node.js as the core programming language,
ensuring seamless integration across the MERN Stack. React.js powers the front-end, while
Node.js and Express.js manage the game logic and real-time updates. MongoDB stores
player data, game history, and AI difficulty settings, ensuring efficient performance and
dynamic gameplay.

• It can be deployed across multiple platforms, making it accessible and scalable for different
users.

1.5 STATEMENT OF PROBLEM METHODOLOGY(Agile)

1. Requirement Gathering – The development team defines game logic, AI difficulty levels,
and real-time updates.
2. Designing the System – Wireframes and user flow diagrams are created to structure the
game interface and interactions.
3. Development & Iteration – The team develops the React.js frontend, Node.js backend,
and MongoDB database, refining AI algorithms and user experience through continuous
testing.

2
ASC Degree College, BCA Department
Internship Report On “MERN STACK DEVELOPMENT”

4. Testing & Quality Assurance – The game undergoes Unit Testing, Integration Testing,
and User Testing to ensure AI accuracy and real-time functionality.
5. Deployment – The Tic-Tac-Toe App is launched, ensuring seamless gameplay, secure
data storage, and a responsive UI.

3
ASC Degree College, BCA Department
CHAPTER 2
 Internship Report On “MERN STACK DEVELOPMENT”

INTERNSHIP TRAINING
1.1 About the Company

Scontinent Technologies Private Limited, established in August 2021, is an innovative

socio-educational platform that connects students and professionals across institutes and
disciplines. By breaking down barriers between students in higher education, regardless of
their location or institution type, Scontinent enables meaningful engagement and
collaboration that promotes socio-economic impact. The company offers AI-driven mock
tests, personalized feedback, free AI-generated resumes, and skill development internships
for student.

Their team of experts is dedicated to providing reliable and efficient solutions, with a focus
on excellent customer support throughout the entire journey, from implementation to
ongoing maintenance and assistance. With years of industry experience, a passionate team
of experts, and a commitment to innovation, Scontinent Technologies strives to deliver
exceptional solutions tailored to the unique needs of their clients.

1.2 Duration
From 10th Feb 2025 to 05th April 2025 (2 Month)

1.3 My Role and Responsibilities

In my role at Scontinent Technologies Pvt Ltd, I served as a MERN Stack Developer, which
provided valuable hands-on experience and presented various challenges. My primary
responsibility was the development of the AI-powered Tic-Tac-Toe web application.
As a MERN Stack Developer, my duties included designing and developing an interactive web-
based Tic-Tac-Toe game using React.js, Node.js, Express.js, and MongoDB, integrating AI
algorithms for an intelligent opponent to enhance the gaming experience.
I collaborated with cross-functional teams, optimized performance, fixed bugs, implemented a
responsive UI/UX design, developed AI logic for move prediction, conducted testing and
debugging, and maintained code quality and database management for the Tic-Tac-Toe web
application.

ASC Degree College, BCA Department 5

 Internship Report On “MERN STACK DEVELOPMENT”

• I collaborated with cross-functional teams, optimized performance, fixed bugs,

implemented a responsive UI/UX design, integrated the Edamam API, conducted
testing and debugging, and maintained code quality and database management for
the Recipe Finder web application.

1.4 Learning Outcomes

• Understanding MERN Stack: Developers need to understand the basics of the

MERN Stack, including its component-based architecture, how to create layouts
using React.js, handle user input, and manage state effectively.
• JavaScript and Backend Development: Since the Tic-Tac-Toe App is built using
JavaScript, developers need to learn JavaScript’s syntax, features, and best
practices, including variables, functions, classes, inheritance, and asynchronous
programming with Node.js and Express.js.
• UI Design: Learning how to design interactive and responsive user interfaces is
crucial in MERN Stack development. This involves structuring React components,
customizing UI elements, working with themes, and implementing smooth user
interactions.
These learning outcomes provide a solid foundation for becoming proficient in MERN
Stack development and building high-quality, feature-rich applications.

ASC Degree College, BCA Department 6

CHAPTER 3
I

Internship Report On “MERN STACK DEVELOPMENT”

HARDWARE AND SOFTWARE SPECIFICATION

1.1 Hardware and Software

Software Version Hardware Framework

Specification Specification
• Visual Studio code • VS code 1.96 • Laptop • React.js
• Node.js • Node v.23.6.0 • Processor • Express.js
• RAM • Node.js
• Storage • MongoDB

1.2 Competing Technologies

Visual Studio Code

Visual Studio Code is the official Integrated Development Environment (IDE) for MERN
Stack development. It is a lightweight yet powerful tool that provides features like
IntelliSense, debugging, and integrated Git support, making it an ideal choice for building
web applications. From writing code to testing and deployment, VS Code offers all the
functionalities required for full-stack development.

MERN Stack

The MERN Stack is a JavaScript-based framework used for building modern, scalable web
applications. It consists of MongoDB for database management, Express.js for handling
backend logic, React.js for creating dynamic front-end interfaces, and Node.js as a runtime
environment. The stack ensures seamless integration between client-side and server-side
operations, providing a smooth development experience.

React.js

React.js is a front-end library developed by Meta (Facebook) that allows developers to build
interactive and reusable UI components. It enables efficient rendering and state
management, making it a preferred choice for modern web applications.

ASC Degree College, BCA Department 8

I

Internship Report On “MERN STACK DEVELOPMENT”

Node.js and Express.js

Node.js is a runtime environment that executes JavaScript code outside the browser,
enabling backend development with JavaScript. Express.js is a lightweight framework built
on Node.js that simplifies server-side operations, API handling, and middleware integration.

MongoDB

MongoDB is a NoSQL database that stores data in a flexible, JSON-like format. It allows
for high scalability and efficient querying, making it ideal for applications that require fast
and dynamic data retrieval.

ASC Degree College, BCA Department 9

CHAPTER 4
Internship Report On “MERN STACK DEVELOPMENT”

MODULE
4.1 Module Description

1. Planning and Ideation

The app development process starts with gathering requirements, defining its purpose,
and creating a primary architecture.

2. Development and Testing

After finalizing the design, the development phase begins using the MERN Stack to build
the app’s functionality and user interface. Continuous testing ensures smooth
performance and bug-free operation.

4.2 Components

App logo

The AI-powered Tic-Tac-Toe web application does not currently have an official logo.
However, it represents the idea of an interactive and intelligent gaming experience where
players can compete against an AI-powered opponent.

Backdrop

The Backdrop signals a state change within the application and can be used for creating
loaders, dialogs, and more. In its simplest form, the Backdrop component will add a
dimmed layer over your application.

Login page
The login page consists of input fields for the username and password, allowing users to
securely access their accounts and manage their tasks.

Box
A Box is a container component used for layout and styling. It helps in structuring elements,
managing spacing, and applying styles efficiently.

11
ASC Degree College, BCA Department
Internship Report On “MERN STACK DEVELOPMENT”

Navigation Bar

A fixed navigation bar appears at the top, providing quick access to different sections
like Home, Search, and Saved Recipes.

Sidebar Menu

A sidebar menu allows users to navigate between different categories, saved recipes,
and personalized recommendations.

Buttons

Interactive buttons play a crucial role in enhancing user experience by providing seamless
navigation and functionality within the Recipe Finder App. These buttons allow users to
perform key actions such as searching for recipes, saving their favorite ones, filtering
results based on preferences, and submitting new recipes to the database. Each button
serves a unique purpose and is designed to make the app more user-friendly and efficient.

Bread Crumbs

The Breadcrumbs are navigation components that show a hierarchical path to the current
page. They help users understand their location within a website or app and allow them
to navigate back to previous sections easily.

Checkbox for Dietary Preferences

The checkbox filtering system in the Recipe Finder App allows users to refine their search
results based on dietary preferences such as vegetarian, non-vegetarian, and healthy
meals. This feature enhances the user experience by ensuring that they can quickly find
recipes that align with their dietary needs.

Container for Recipe Display

Containers are used to structure and style different recipe sections within the application. A
Container in React is a structural component used to wrap, position, and style other elements
within an application. It helps in layout management by defining boundaries and controlling
spacing.

12
ASC Degree College, BCA Department
Internship Report On “MERN STACK DEVELOPMENT”

Text buttons

Text buttons are typically used for less-pronounced actions, including those located: in
dialogs, in cards. In cards, text buttons help maintain an emphasis on card content.

Check box

If you have multiple options appearing in a list, you can preserve space by using checkboxes
instead of on/off switches. If you have a single option, avoid using a checkbox and use an
on/off switch instead.

Radio group

Radio group is a helpful wrapper used to group Radio components that provides an easier
API, and proper keyboard accessibility to the group.

Rating

The Form widget in MERN Stack is a fundamental widget for building forms. It provides
a way to group multiple form fields together, perform validation on those fields, and
manage their state.

Select

A Select components are used for collecting user provided information from a list of
options. Menus are positioned under their emitting elements, unless they are close to the
bottom of the viewport.

Grid Tile
Grid Tile is this widget is particularly useful for displaying a collection of items in a grid
format, such as a photo gallery, product catalog, or any visual representation of data that
benefits from a structured layout Grid view.

Slider

Sliders reflect a range of values along a bar, from which users may select a single value.

13
ASC Degree College, BCA Department
Internship Report On “MERN STACK DEVELOPMENT”

Switch

Switches are the preferred way to adjust settings on mobile. The option that the switch
controls, as well as the state it's in, should be made clear from the corresponding inline
label.
Text Fields

The Text Field wrapper component is a complete form control including a label, input,
and help text. It comes with three variants: outlined (default), filled, and standard.

Transfer List

A Transfer List (or "shuttle") enables the user to move one or more list items between
lists.
Toggle Button

To emphasize groups of related Toggle buttons, a group should share a common

container. The Toggle Button Group controls the selected state of its child buttons when
given its own value prop.

Avatar

Avatars are found throughout material design with uses in everything from tables to
dialog menus. There are types of avatar: Image Avatar, Letter avatar, Icon Avatars, Total
Avatar.

Badge

A badgeis a small descriptor for UI elements that indicates the status of an element by displaying a
number, icon, or other short set of characters.

Typography
Typography in React is a way to style and set of values and convenient props for building
common designs faster. format text consistently. It provides a limited set of values and convenient
props for building common designs faster.

14
ASC Degree College, BCA Department
Internship Report On “MERN STACK DEVELOPMENT”

Chip
The MUI Chip component is a versatile element used in React applications to represent
an input, attribute, or action. Chips are compact and can be used for various purposes
such as displaying information, making selections, filtering content, or triggering actions.

Divider
A Dividers are visual separators of content. They are used to make a distinction between
sections of content. Dividers can be customized by adding inset, color, orientation and
sub header to the component using props.

Icons
In React, icons can be an excellent way to enhance user interfaces. Here are a few popular
methods to incorporate icons into your React projects : Using Font Awesome, Material
UI Icons, SVG Icons, React Icons Library.

Lists

A Lists are a continuous group of text or images. They are composed of items
containing primary and supplemental actions, which are represented by icons and text.

Tables

A Tables display information in a way that's easy to scan, so that users can look for
patterns and insights. They can be embedded in primary content, such as cards.

Tooltip

A tooltip is a floating element that displays information related to an anchor element

when it receives keyboard focus or the mouse hovers over it.

Alert

Alerts display brief messages for the user without interrupting their use of the app. Alerts
give users brief and potentially time-sensitive information in an unobtrusive manner.

15
ASC Degree College, BCA Department
Internship Report On “MERN STACK DEVELOPMENT”

Dialog
The Dialog is a type of modal window that appears in front of app content to provide
critical information or ask for a decision. Dialogs disable all app functionality when they
appear, and remain on screen until confirmed, dismissed, or a required action has been
taken.

Snackbar
Snackbar is a lightweight message widget that appears temporarily at the bottom of the
screen. It's commonly used to display notifications, alerts, or confirmation messages to
the user in response to their actions.

Skeleton
Skeleton screens are used as an alternative to the traditional spinner method in React.
They create anticipation of what is to come and reduce cognitive load. A Skeleton
Component is used whenever the data is not loaded, and it displays a placeholder preview
of the content.

Accordion
Accordions contain creation flows and allow lightweight editing of an element. Material
UI for React has this component available for us, and it is very easy to integrate. We can
create it in ReactJS using the following approach.

Tap Bar
A tab bar typically refers to a navigation component that allows users to switch between
different views or sections of an application. It's commonly used in mobile and web
applications to enhance user experience by organizing content into easily accessible tabs.

Menu
A menu displays a list of choices on a temporary surface. It appears when the user interacts
with a button, or other control. Menus display a list of choices on temporary surfaces.
A basic menu opens over the anchor element by default (this option can changed via props).

16
ASC Degree College, BCA Department
Internship Report On “MERN STACK DEVELOPMENT”

Card
A card component is a structured UI element that groups related information into a
visually distinct block. It is commonly used in modern web applications to present content
efficiently, maintaining a clean and organized layout. A React.js Card Component
typically contains an image, a card title, a description, and interactive elements such as
buttons and links.

Profile page:
Creating a user profile page in MERN Stack involves designing a visually appealing
layout where users can view and edit their information. Here are the key steps to create a
profile page:

Profile Picture:
• Includes a circular profile picture (used the Circle Avatar widget).

User Information:
• Displays the user’s name, email, and other relevant details.

• Used appropriate widgets like Text or Rich Text to display this information.

Social Media Links:

• Include links to the user’s email ID and social media profiles (e.g., LinkedIn).

• Use icons from libraries like Font Awesome (react-icons/fa) or Material UI

(@mui/icons-material) for better UI representation.

About Me Section:

• A brief description of the user.

• Used a Text Field or similar widget for this purpose.

17
ASC Degree College, BCA Department
CHAPTER 5
Internship Report On “MERN STACK DEVELOPMENT”

TESTING
Testing is the process of executing a program to find errors. To make our software perform
well it should be error-free. If testing is done successfully, it will remove all the errors
from the software. In this article, we will discuss first the principles of testing and then
we will discuss, the different types of testing.

5.1 Types of tests

Unit testing is a method of testing individual units or components of a software

application. It is typically done by developers and is used to ensure that the individual
units of the software are working as intended. Unit tests are usually automated and are
designed to test specific parts of the code, such as a particular function or method. Unit
testing is done at the lowest level of the software development process, where individual
units of code are tested in isolation.

Integration testing is a method of testing how different units or components of a software

application interact with each other. It is used to identify and resolve any issues that may
arise when different units of the software are combined. Integration testing is typically
done after unit testing and before functional testing and is used to verify that the different
units of the software work together as intended.

System testing is a type of software testing that evaluates the overall functionality and
performance of a complete and fully integrated software solution. It tests if the system
meets the specified requirements and if it is suitable for delivery to the end-users.

19
ASC Degree College, BCA Department
 Internship Report On “MERN STACK DEVELOPMENT”

5.2 Screen Shots

Home Page

Sign Up Page

20
ASC Degree College, BCA Department
 Internship Report On “MERN STACK DEVELOPMENT”

Login Page

Recipe Search Page

21
ASC Degree College, BCA Department
 Internship Report On “MERN STACK DEVELOPMENT”

Result page

Game Saved page

22
ASC Degree College, BCA Department
 Internship Report On “MERN STACK DEVELOPMENT”

About Page

23
ASC Degree College, BCA Department
Internship Report On “MERN STACK DEVELOPMENT”

CHAPTER 6

24
ASC Degree College, BCA Department
Internship Report On “MERN STACK DEVELOPMENT”

CONCLUSION

The two-months internship as a MERN Stack developer was a valuable experience that
enhanced skills in front-end and back-end development, database management, and API
integration. The opportunity to learn and grow in a professional work environment, with
guidance from experienced developers, has significantly contributed to the intern's
development. The internship not only improved technical skills but also fostered problem-
solving, teamwork, and adaptability, preparing the intern for future challenges in full-stack
development.

25
ASC Degree College, BCA Department
ss

Internship Report On “MERN STACK DEVELOPMENT”

CHAPTER 7

ASC Degree College, BCA Department 26

Internship Report On “MERN STACK DEVELOPMENT”

BIBILOGRAPHY

• www.google.com

• www.geeksforgeeks.org

• www.javatpoint.com

• https://react.dev/

• https://nodejs.org/en/docs

• https://expressjs.com/en/guide/routing.html

• https://www.mongodb.com/docs/

• https://developer.mozilla.org/en-US/docs/Web/JavaScript

• https://www.freecodecamp.org/news/mern-stack-guide/

• https://www.scribd.com/document/684877279/Web-Development-Internship-Report

• https://www.studocu.com/in/document/government-engineering-college/computer-
science/mern-stack-internship-report/57624708

27
ASC Degree College, BCA Department