VISVESVARAYA TECHNOLOGICAL UNIVERSITY

“JNANA SANGAMA” Belagavi – 590018, Karnataka

A
INTERNSHIP REPORT
ON

“FULL STACK WEB DEVELOPMENT”

Submitted in partial fulfillment for the award of the degree in
BACHELOR OF ENGINEERING
IN
COMPUTER SCIENCE AND ENGINEERING
Submitted by

VISHAL KUMAR SHARMA

1BH22CS410
Conducted at
AIROBOSOFT

Under the Guidance of

Mr. Rathikantha Majhi
Associate Professor, Dept of CSE

Department of Computer Science and Engineering

BANGALORE TECHNOLOGICAL INSTITUTE
(An ISO 9001:2005 Certified Institute)
Kodathi Village, Varthoor Hobli, Banagalore East Tq, Bangalore Urban District
Bangalore – 560035, Karnataka
2024 – 2025
 BANGALORE TECHNOLOGICAL INSTITUTE
(An ISO 9001:2015 Certified Institute)
Kodathi Village, Varthoor Hobli, Bangalore East Tq, Bangalore Urban District,
Bangalore-560035, Karnataka.
principal@btibangalore.org www.btibangalore.org
Phone: 7090404050

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CERTIFICATE
This is to certify that the Internship report on “ FULL STACK WEB DEVELOPMENT”
carried out by VISHAL KUMAR SHARMA [1BH22CS410] the Bonafide student of
Bangalore Technological Institute, Bengaluru in partial fulfillment for the award of
Bachelor of Engineering in Computer Science and Engineering of Visvesvaraya
Technological University, Belagavi during the academic year 2024 -2025. Thus, it is
certified that all corrections/suggestions indicated for Internal Assessment have been
incorporated in the report. The Internship report has been approved, as it satisfies the academic
requirements in the respect of the Internship report prescribed for the said degree.

Mr. Rathikantha Majhi

Internship Coordinator
Dept. of CSE

Dr. Sreeramareddy G M Dr. H S Nanda

HOD Principal
Dept. of CSE

EXAMINERS
Name of examiners Signature with date

1…………………… …………………….

2………………….... …………………….
 BANGALORE TECHNOLOGICAL INSTITUTE
(An ISO 9001:2015 Certified Institute)
Kodathi Village, Varthoor Hobli, Bangalore East Tq, Bangalore Urban District,
Bangalore-560035, Karnataka.
principal@btibangalore.org www.btibangalore.org
Phone: 7090404050

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

DECLARATION
I, VISHAL KUMAR SHARMA the student of fourth year Computer Science And
Engineering, Bangalore Technological Institute, Bangalore, hereby declare the Internship in
domain “ FULL STACK WEB DEVELOPMENT” has been independently carried out by
me under the guidance of “Mr. Rathikantha Majhi”, Assistant Professor, Department of
Computer Science and Engineering, Bangalore Technological Institute, Bengaluru and
Submitted in partial fulfillment of the requirements for the award of the degree in Bachelor of
Engineering in Computer Science and Engineering of the Visvesvaraya Technological
University, Belagavi during the academic year 2024 – 2025.
I also declare that to the best of my knowledge and believe the work reported here does not
form part of any other Internship on the basis of which a degree or award was conferred on an
early occasion of this by any other.

Place: Bangalore
Date:

Student Name USN Signature

VISHAL KUMAR SHARMA 1BH22CS410

INTERNSHIP CERTIFICATE
 ACKNOWLEDGEMENT
Any achievement, be it scholastic or otherwise does not depend solely on the individual efforts
but on the guidance, encouragement and cooperation of intellectuals and elders. I would like to
take this opportunity to thank them all.

I heartly extend my words of gratitude to the Internship Coordinator Mr. Rathikantha Majhi, for
her valuable advice, encouragement and suggestion given us in the course of our Internship
work.

I would like to express our immense gratitude to HOD Dr. Sreeramareddy G M, for his
unfailing encouragement and suggestion given to us in course of Internship work.

I would like to take opportunity to express our gratitude to the Principal Dr. H S Nanda, for
giving us this opportunity to enrich our knowledge.

I am grateful to the President Dr. Prabhakara Reddy A and Secretary, Sri. C L Gowda for
having provided us with a great infrastructure and well – furnished labs.

Finally, a note of thanks to the Department of Computer Science and Engineering, both
teaching and non – teaching staff for their co-operation extended to us.

Last but not the least, I acknowledge the support and feedback of our parents, guardians and
friends, for their indispensable help always.

VISHAL KUMAR SHARMA [1BH22CS410]

I
 ABSTRACT

Full Stack Development is a comprehensive approach to web development that involves

building both the front-end and back-end of web applications using a cohesive set of modern
technologies. On the front-end, developers use HTML, CSS, JavaScript, Tailwind CSS, and
React to create responsive and interactive user interfaces that ensure seamless user experiences
across different devices and platforms. These technologies enable the creation of visually
appealing and user-friendly applications with efficient rendering and dynamic content updates.
On the back-end, Full Stack Development employs Node.js and Express.js to build robust and
scalable server-side applications capable of handling business logic, API integrations, and user
authentication. MongoDB, a NoSQL database, is used to manage and store application data
efficiently, allowing for flexibility and high performance in data operations.

II
 INDEX
Acknowledgment I
Abstract II
Content III
List of Figures IV

CONTENT
SL. NO CHAPTER PAGE NO.
1 Internship 1-2
1.1 Internship Statement 1
1.2 Objective of Internship 2
1.3 Scope of Internship 2
2 Introduction 3-5
2.1 Frontend development 3
2.2 Backend development 4
3 Company Profile 6-8
3.1 Company overview 6
3.2 Work Culture 8
3.3 Number of Working Per Day 8
4 Work Scheduling 9-12
5 Tasks Performed 13-27
6 Project 28-42
7 Conclusion 43
7.1 Limitations 44
7.2 Future enhancements 44
APPENDIX 46
Appendix-Snapshots 46

III
 LIST OF FIGURES

FIG. NO TITLE OF THE FIGURE PAGE NO.

1 Login Page 29
2 Hero Page 30
3 Cart Section 32
4 Items Page 41
5 Footer Page 42

IV
INTERNSHIP-IV 2024-25

CHAPTER 1
INTERNSHIP
1.1 Internship statement:

The rise in global competition has prompted organizations to devise strategies to have a
talented and innovative workforce to gain a competitive edge. Developing an internship
policy is an impactful strategy for creating a future talent pool for the industry. The
internship (a form of experiential learning) program helps fresh pass–outs in gaining
professional know-how and benefits corporate sectors. The internship also enhances the
student’s employability skills passing out from Technical Institutions.
The following list provides a brief illustrative overview of the knowledge, skills, work
habits, and character traits commonly associated with 21st-century skills and to be acquired
by graduates:
(1) Critical thinking, problem-solving, reasoning, analysis, interpretation, synthesizing
information.
(2) Scientific literacy and reasoning, the scientific method.
(3) Research skills and practices, interrogative questioning.
(4) Creativity, artistry, curiosity, imagination, innovation, personal expression.
(5) Information and communication technology (ICT) literacy, media and internet literacy,
data interpretation, and analysis, computer programming.
(6) Oral and written communication, public speaking and presenting, listening.
(7) Economic and financial literacy, entrepreneurialism.
(8) Global awareness, multicultural literacy, humanitarianism.
(9) Environmental and conservation literacy, ecosystems understanding.
(10) Civic, ethical, and social-justice literacy.
(11) Leadership, teamwork, collaboration, cooperation, facility in using virtual workspaces.
(12) Perseverance, self-direction, planning, self-discipline, adaptability, initiative.
(13) Health and wellness literacy, including nutrition, diet, exercise, and public health and
safety.
The internship experience will augment the outcome-based learning process and inculcate
various attributes mentioned above in a student in line with the graduate

Department of CSE, BTI, Bangalore-35 Page 1

INTERNSHIP-IV 2024-25

1.2 Objective of Internship:

Following are the intended objectives of internship training;
(i) Expose Technical students to the industrial environment, which cannot be simulated in
the classroom and hence create competent professionals in the industry.
(ii) Provide possible opportunities to learn, understand and sharpen the real-time
technical/managerial skills required at the job.
(iii) Get exposed to the current technological developments relevant to the subject area of
training.
(iv) Use the experience gained from the industrial internship in discussions held in the
classrooms.
(v) Create conditions conducive to the quest for knowledge and its applicability on the job.
(vi) Learn to apply Technical knowledge in real industrial situations.
(vii) Gain experience in writing reports in Technical works/projects.
(viii) Expose students to the engineer’s responsibilities and ethics.
(ix) Familiarize with various materials, processes, products, and applications along with
relevant aspects of quality control and safety measures.
(x) Promote academic, career, and/or personal development.
(xi) Expose the students to future employers.
(xii) Make students available to industry for employment.
(xiii) Understand the psychology of the workers and their habits, attitudes, and approach to
problem-solving.
(xiv) Understand the social, economic, and administrative considerations that influence the
working environment of industrial organizations.
1.3 Scope of Internship:
The scope of work for an internship describes the project information provided and agreed
upon by the intern and supervisor, such as deliverables, schedule, etc. The project’s scope
should be feasible during the internship’s duration. Its objective is to guarantee that
expectations are clear and mutually agreed upon and that you and the people you collaborate
with know their responsibilities. It should be there whenever a job is decided upon. Still, it
becomes increasingly crucial as the work complexity, difficulty in physically expressing the
deliverables, or time required to perform tasks rises. It enables members to share the same
vision.

Department of CSE, BTI, Bangalore-35 Page 2

INTERNSHIP-IV 2024-25

CHAPTER 2
INTRODUCTION
Full Stack Development refers to the development of both front end (client side) and back
end (server side) portions of web applications.Full Stack web developers have the ability to
design complete web applications and websites. They work on the frontend, backend,
database, and debugging of web applications or websites.
Technology Related to Full Stack Development
Front-end Development
It is the visible part of website or web application which is responsible for user experience.
The user directly interacts with the front end portion of the web application or website.
2.1 FRONT-END TECHNOLOGIES
The front end portion is built by using some languages which are discussed below:
• HTML: HyperText Markup Language (HTML) is the standard language for
creating the structure of web pages. It helps define the layout of content using
elements enclosed within tags. HTML forms the backbone of any website by
organizing content such as headings, paragraphs, links, and images.

• CSS: Cascading Style Sheets (CSS) is a stylesheet language used for describing the
presentation of a web page written in HTML. It enhances the visual appearance of
web pages by applying styles such as colors, fonts, spacing, and layouts,
independently of the HTML structure.

• JavaScript: JavaScript is a powerful scripting language used to make web pages

interactive and dynamic. It enables features like form validation, animations, and
asynchronous data loading, thereby enhancing the user experience and functionality
of web applications.

• Tailwind CSS: Tailwind CSS is a utility-first CSS framework that allows

developers to design directly in their markup. It offers low-level utility classes that
enable rapid and responsive UI development without writing custom CSS,
promoting consistency and reusability.

• React: React is a popular JavaScript library developed by Facebook for building

user interfaces, particularly single-page applications. It allows developers to create
reusable UI components and efficiently manage the state of applications.

Department of CSE, BTI, Bangalore-35 Page 3

INTERNSHIP-IV 2024-25

2.2 BACK-END TECHNOLOGIES

Back-end development refers to the server-side logic and database management of web
applications. It handles the core application functionality, such as business logic, database
operations, API handling, and server configuration:

• Node.js:
Node.js is a cross-platform, open-source JavaScript runtime environment that
executes JavaScript code outside a web browser. It is event-driven, non-blocking,
and ideal for building fast, scalable server-side applications. It enables developers
to use a single programming language (JavaScript) for both client-side and server-
side development.

• Express.js:
Express.js is a minimal and flexible Node.js web application framework that
provides a robust set of features for web and mobile applications. It simplifies the
creation of server-side logic, routing, middleware handling, and API endpoints.

• MongoDB:
MongoDB is a document-oriented NoSQL database used for high-volume data
storage. It stores data in flexible, JSON-like documents, making it easier to work
with data structures and scale applications horizontally. MongoDB works
seamlessly with Node.js through libraries like Mongoose, enabling developers to
perform CRUD operations efficiently.

Version Control and Development Tools

• Git:
Git is a distributed version control system that tracks changes in source code and
facilitates collaboration among developers. It ensures efficient code management,
history tracking, and parallel development via branches.

• GitHub:
GitHub is a cloud-based hosting platform for version control using Git. It supports
team collaboration, pull requests, issue tracking, and integration with CI/CD tools
for streamlined development and deployment workflows.

Department of CSE, BTI, Bangalore-35 Page 4

INTERNSHIP-IV 2024-25

• VSCode:
VS Code is a lightweight and powerful source-code editor that supports
development in multiple programming languages. It offers intelligent code
completion, debugging tools, terminal integration, extensions, and version control
support, making it the preferred IDE for full stack developers.

Key Features of Backend Stack

• Asynchronous and Non-blocking I/O: Node.js handles multiple requests

concurrently, making it highly efficient for I/O-bound operations like database
access and network calls.

• JSON-Based Communication: Both frontend and backend share JSON format for
seamless data transfer, reducing transformation overhead.

• RESTful API Development: Express.js simplifies the creation of RESTful APIs

used to interact with the database and front-end components.

• Schema Flexibility: MongoDB’s dynamic schema makes it suitable for

applications with frequently changing data models.

Department of CSE, BTI, Bangalore-35 Page 5

INTERNSHIP-IV 2024-25

CHAPTER 3
COMPANY PROFILE
3.1 Company Overview
AiRobosoft, founded by Syed Asad Ahmed in Bangalore, India, stands as a pioneering
organization that integrates software development, robotics, and electric vehicle (EV)
manufacturing into a single visionary enterprise. Established with a mission to serve society
through innovation and technological adaptability, AiRobosoft continually strives to create
sustainable and intelligent solutions to meet the evolving demands of the modern world.

Our core focus lies in the fusion of emerging technologies such as Artificial Intelligence,
Cloud Computing, Machine Learning, Embedded Systems, and the Internet of Things
(IoT). By harnessing these technologies, AiRobosoft develops intelligent software,
automated robotic systems, and environment-friendly electric vehicles to address real-
world challenges and enhance quality of life.

AiRobosoft’s strength lies in its robust R&D capabilities and cross-functional teams that
work across domains to bring groundbreaking ideas to fruition. From advanced AI systems
to cloud-based platforms and custom robotics solutions, AiRobosoft caters to clients
ranging from startups to large-scale enterprises, offering bespoke solutions tailored to their
specific business needs.

We are also committed to educating and upskilling future professionals. Through hands-
on training modules, we offer internship opportunities that focus on both theory and real-
time industrial projects, allowing participants to apply their knowledge in practical,
impactful ways.

Department of CSE, BTI, Bangalore-35 Page 6

 INTERNSHIP-IV 2024-25

Products/Services by AiRobosoft:
Services Offered:
● Custom Software Development
● AI & Machine Learning Solutions
● Embedded Systems Integration
● Cloud-Based Application Development
● Internet of Things (IoT) Implementation
● Data Analytics & Business Intelligence
● Data Visualization and Reporting
● OLAP Cube Analysis
● Data Warehousing
● Data Cleansing & Integration

Products:
● EV Robotics Units – Smart, AI-integrated electric vehicles for various sectors
● AI-based Robotics Systems – Automation tools for industries and smart infrastructure
● Cloud Intelligence Platforms – Scalable, secure, and efficient SaaS applications

Training Program

AiRobosoft’s internship program is designed to bridge the gap between

academic learning and industry standards. Interns are exposed to real-world
problems, guided by professionals, and empowered to implement their own
solutions using modern tech stacks.
This learning model incorporates a blended approach—including in-office
interactions, live demonstrations, practical sessions, and offline video resources
to ensure continuous learning at the intern’s own pace. Participants work on
individual projects, which enhances their understanding of concepts, fosters self-
reliance, and boosts confidence.
Team Size
The internship had to be completed individually. We could get one-on-one
guidance and it helped us to learn all the concepts clearly and build the project
individually. It helped me understand self- reliance and boosted my confidence. It also
allowed me to produce my work faster and more efficiently.
Department of CSE, BTI, Bangalore-35 Page 7
 INTERNSHIP-IV 2024-25

3.2 Work Culture

AiRobosoft fosters a collaborative, innovative, and empowering work environment.
The company culture is built on the values of autonomy, mutual respect, and trust.
Every team member, including interns, is encouraged to take ownership of their work
while receiving continuous support from experienced mentors.

Interns are treated as contributors, not observers, and their curiosity is nurtured through
open communication, knowledge sharing, and hands-on guidance. The friendly
environment at AiRobosoft ensures that doubts are addressed promptly and that
continuous feedback fuels ongoing improvement.

Live demo sessions, hands-on technical workshops, and access to pre-recorded content
ensure that interns receive a comprehensive learning experience beyond traditional
classroom boundaries.

Duration of the Internship

The internship was for one month, starting from 15th Feb 2025 to 15th May
2025.

3.3 Number of working hours per day

During the internship, there were two phases, the training period and the
project-building period. During the training period, we were given training every day
for 4 hours from 9:30 AM till 1:30 PM rest of the days were utilized for the building
projects. We worked for around 3 hours a day to build the project.

Department of CSE, BTI, Bangalore-35 Page 8

INTERNSHIP-IV 2024-25

CHAPTER 4
WORK SCHEDULE
WEEK 1
HTML:

HyperText Markup Language (HTML) is the standard markup language used to create
and structure content on the World Wide Web. It was developed by Tim Berners-Lee in
1991 and has since evolved to become the backbone of web development. HTML uses a
system of tags and attributes to define the structure and layout of a web page, including
elements such as headings, paragraphs, links, images, lists, tables, and forms. These tags are
enclosed in angle brackets and usually come in pairs, with an opening tag and a closing tag.
HTML5, the latest version of the language, introduced new elements and attributes that
support multimedia content, semantic structures, and improved accessibility, as well as
APIs for enhanced functionality and interactivity. HTML5 also brought significant
improvements in mobile web performance and browser compatibility. By providing the
fundamental framework for web pages, HTML works in conjunction with CSS (for styling)
and JavaScript (for interactivity) to create dynamic and visually appealing web experiences.
WEEK 2
CSS:
Cascading Style Sheets (CSS) is a stylesheet language integral to the presentation layer
of web documents written in HTML or XML. It was introduced by the World Wide Web
Consortium (W3C) in December 1996 to provide a clear separation between content and
presentation, enabling more flexible and maintainable web design. CSS allows developers
to control the layout, color, fonts, and overall visual aesthetics of web pages. Over time,
CSS has evolved through various versions, with CSS2 released in 1998, bringing enhanced
capabilities such as absolute, relative, and fixed positioning of elements, and CSS3, initiated
in 1999, modularizing the language to allow for incremental updates and the addition of
features like transitions, animations, and grid layouts. Core concepts of CSS include
selectors, which target HTML elements for styling, properties that define specific stylistic
attributes, and values that specify the characteristics of those attributes. CSS supports
responsive design techniques, ensuring web pages render well on a variety of devices and
screen sizes, making it indispensable for modern web development.

Department of CSE, BTI, Bangalore-35 Page 9

INTERNSHIP-IV 2024-25

WEEK 3 & 4
JAVASCRIPT:
JavaScript is a dynamic, high-level programming language that is widely used for web
development. Initially created by Brendan Eich at Netscape in 1995, JavaScript has evolved
to become a core technology of the World Wide Web, alongside HTML and CSS. It allows
developers to create interactive and responsive web pages by manipulating the Document
Object Model (DOM), handling events, and performing asynchronous operations.
JavaScript can be executed directly in the browser, making it essential for client-side
scripting, but it is also used on the server side with environments like Node.js. Its versatility
and ease of integration with other web technologies have led to a vast ecosystem of libraries
and frameworks, such as React, Angular, and Vue.js, which further simplify and enhance
web development. As a prototype-based, multi-paradigm language, JavaScript supports
object-oriented, imperative, and functional programming styles, providing developers with
flexibility in coding. This adaptability, combined with continuous enhancements and
widespread support, ensures that JavaScript remains a pivotal language in the world of
modern web development.
WEEK 5 &6
TAILWINDCSS:
Tailwind CSS is a modern utility-first CSS framework that enables developers to build
custom user interfaces quickly and efficiently. Unlike traditional CSS frameworks like
Bootstrap, Tailwind provides low-level utility classes that allow developers to style
elements directly in the HTML without writing custom CSS. This approach promotes rapid
development, consistency, and ease of maintenance. Developed by Adam Wathan and first
released in 2017, Tailwind CSS has gained massive popularity due to its flexibility and
responsiveness. Its design system encourages a mobile-first approach, with built-in support
for dark mode, state variants, and responsive design utilities. With tools like @apply,
variants, and theme customization, Tailwind CSS provides powerful configuration
capabilities, making it a top choice for developers aiming for design precision and
component reusability in modern web applications.
WEEK 7 &8
REACTJS:
React.js is a declarative, component-based JavaScript library developed by Facebook for
building interactive user interfaces. Released in 2013, React simplifies the process of
developing complex UIs by breaking them down into reusable components. It utilizes a
Department of CSE, BTI, Bangalore-35 Page 10
INTERNSHIP-IV 2024-25
virtual DOM to optimize rendering performance, ensuring that updates to the UI are fast
and efficient. With React, developers can manage application state effectively using hooks
like useState, useEffect, and context. Its unidirectional data flow enhances predictability
and debugging. React is widely adopted in both small and large-scale applications due to
its flexibility, vast ecosystem, and seamless integration with libraries such as Redux, React
Router, and others. Its focus on component reusability and performance has made it one of
the most powerful tools in front-end web development today.
WEEK 9
REDUX-TOOLKIT:
Redux Toolkit is the official, recommended way to write Redux logic, offering a
standardized and simplified approach to managing global state in React applications.
Introduced by the Redux team, it addresses common pain points such as boilerplate code
and complex reducer setups. Redux Toolkit provides essential utilities like createSlice,
configureStore, and createAsyncThunk that streamline the creation of actions, reducers, and
asynchronous logic. It encourages the use of the "ducks" pattern by organizing logic in a
modular, maintainable structure. With built-in support for Immer.js, it allows developers to
write immutable update logic in a mutable style. Redux Toolkit improves developer
productivity by offering an opinionated setup, devtools integration, and seamless
TypeScript support, making it ideal for scalable and maintainable state management.
WEEK 10 & 11
NODEJS:
Node.js is an open-source, cross-platform JavaScript runtime environment that allows
developers to execute JavaScript code outside of a web browser. Built on Chrome's V8
JavaScript engine, Node.js was created by Ryan Dahl in 2009 and is designed for building
scalable network applications. It uses an event-driven, non-blocking I/O model that makes
it lightweight and efficient — perfect for data-intensive real-time applications. Node.js is
widely used for server-side development, offering access to the filesystem, databases, and
other back-end services. With its vast npm ecosystem, developers can leverage thousands
of open-source libraries to accelerate development. Node.js empowers full-stack
development using JavaScript across both front-end and back-end, streamlining workflows
and enhancing productivity.

Department of CSE, BTI, Bangalore-35 Page 11

INTERNSHIP-IV 2024-25

WEEK 12
EXPRESS:
Express.js is a minimal and flexible Node.js web application framework that provides
robust features for building single-page, multi-page, and RESTful APIs. Created by TJ
Holowaychuk in 2010, Express simplifies the process of routing, middleware integration,
and HTTP request handling, making it the de facto standard server framework for Node.js.
Its unopinionated nature allows developers the freedom to structure their applications as
needed while still benefiting from a suite of powerful tools. Express supports template
engines, static file serving, and efficient error handling, and it's often used with MongoDB
and Mongoose in the ME*N stack. Its speed, simplicity, and vast middleware ecosystem
make Express.js a cornerstone technology for modern web and API development
WEEK 13 & 14
MONGODB:
MongoDB is a powerful, document-oriented NoSQL database designed for high
performance, high availability, and easy scalability. Released in 2009 by MongoDB Inc., it
stores data in flexible, JSON-like BSON documents, which allows for dynamic schema
design. This flexibility is ideal for applications with evolving data structures. MongoDB
supports advanced querying, indexing, and aggregation capabilities, enabling efficient data
retrieval and manipulation. With features like replica sets for high availability and sharding
for horizontal scalability, it is well-suited for large-scale distributed systems. MongoDB
integrates seamlessly with Node.js applications using the official MongoDB driver or
Mongoose ODM, making it a popular choice in full-stack JavaScript development.

WEEK 15

GIT&GITHUB:
Git is a distributed version control system developed by Linus Torvalds in 2005 to
manage source code efficiently. It allows developers to track changes, collaborate on
codebases, and maintain the integrity of project history. Git operates locally, enabling fast
commits, branching, and merging, which simplifies parallel development workflows.
GitHub, on the other hand, is a cloud-based platform for hosting Git repositories, offering
collaboration features like pull requests, issues, project boards, and CI/CD pipelines.
Together, Git and GitHub form the backbone of modern software development practices,
promoting team collaboration, open-source contributions, and streamlined deployment .

Department of CSE, BTI, Bangalore-35 Page 12

INTERNSHIP-IV 2024-25

CHAPTER 5
TASKS PERFORMED
HTML

HyperText Markup Language (HTML) is the standard markup language used to create and
structure content on the World Wide Web. It was developed by Tim Berners-Lee in 1991
and has since evolved to become the backbone of web development. HTML uses a system
of tags and attributes to define the structure and layout of a web page, including elements
such as headings, paragraphs, links, images, lists, tables, and forms. These tags are enclosed
in angle brackets and usually come in pairs, with an opening tag and a closing tag. HTML5,
the latest version of the language, introduced new elements and attributes that support
multimedia content, semantic structures, and improved accessibility, as well as APIs for
enhanced functionality and interactivity. HTML5 also brought significant improvements in
mobile web performance and browser compatibility. By providing the fundamental
framework for web pages, HTML works in conjunction with CSS (for styling) and
JavaScript (for interactivity) to create dynamic and visually appealing web experiences.
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
1. Document Structure
<!DOCTYPE html>
Declares the document type and version of HTML being used (HTML5 in this case).
<html lang="en">
<!-- Page content goes here -->
</html>
The root element that contains all the other HTML elements.
<head>
<title>Page Title</title>
</head>
Contains meta-information about the document, such as the title, character set, and links
to stylesheets.
<title>Page Title</title>

Department of CSE, BTI, Bangalore-35 Page 13

INTERNSHIP-IV 2024-25

Sets the title of the web page, which appears in the browser’s title bar or tab.
<body>
<!-- Main content goes here -->
</body>
Contains the content of the web page, such as text, images, and links.
2. Text Formatting
<h1>This is a heading</h1>
<h2>This is a subheading</h2>
<h3>This is a smaller heading</h3>
defines headings, with <h1> being the largest and <h6> the smallest.
<p>This is a paragraph of text.</p>
Defines a paragraph.
<strong>This text is bold and important.</strong>
Defines bold text, usually used to indicate strong importance.
<em>This text is italicized and emphasized.</em>
Defines italic text, typically used to emphasize text.
Line one<br>
Line two
Inserts a line break.
<hr>
Creates a horizontal rule or line.
3. Lists
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Defines an unordered (bulleted) list.
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Defines an ordered (numbered) list.

Department of CSE, BTI, Bangalore-35 Page 14

INTERNSHIP-IV 2024-25

4. Links and Images

<a href="https://www.example.com">This is a link</a>
Defines a hyperlink that links to another web page or resource.
<img src="image.jpg" alt="Description of image">
Embeds an image in the page. The src attribute specifies the path to the image, and alt
provides alternative text if the image cannot be displayed.
5. Tables
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
Defines a table.
<th>Header</th>
Defines a table row.
<td>Data</td>
Defines a table data cell.
6. Forms
<form action="/submit" method="post">
<!-- Form elements go here -->
</form>
Defines a form for user input. action specifies where to send the form data, and method
specifies the HTTP method (usually "post" or "get").
<input type="text" name="username" placeholder="Enter your username">
Defines an input field. The type attribute specifies the type of input (e.g., text, password,
email).
<button type="submit">Submit</button>
Defines a clickable button.
<textarea name="comments" rows="4" cols="50">Enter your comments

Department of CSE, BTI, Bangalore-35 Page 15

INTERNSHIP-IV 2024-25

here...</textarea>
Defines a multi-line text input field.
<select name="options">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
Defines a drop-down list.
7. Meta Information
<meta charset="UTF-8">
<meta name="description" content="A brief description of the page">
Provides metadata about the HTML document, such as the character set or a description.

CSS
What is CSS?
Cascading Style Sheets (CSS) is a stylesheet language integral to the presentation layer of
web documents written in HTML or XML. It was introduced by the World Wide Web
Consortium (W3C) in December 1996 to provide a clear separation between content and
presentation, enabling more flexible and maintainable web design. CSS allows developers
to control the layout, color, fonts, and overall visual aesthetics of web pages. Over time,
CSS has evolved through various versions, with CSS2 released in 1998, bringing enhanced
capabilities such as absolute, relative, and fixed positioning of elements, and CSS3, initiated
in 1999, modularizing the language to allow for incremental updates and the addition of
features like transitions, animations, and grid layouts. Core concepts of CSS include
selectors, which target HTML elements for styling, properties that define specific stylistic
attributes, and values that specify the characteristics of those attributes. CSS supports
responsive design techniques, ensuring web pages render well on a variety of devices and
screen sizes, making it indispensable for modern web development.
CSS is a language used to describe the presentation of a document written in HTML or
XML. It controls how elements are displayed on the screen, including their layout, colours,
fonts, and more.
CSS Syntax:
CSS is written in a specific syntax that includes:
• Selectors: Targets HTML elements you want to style.

Department of CSE, BTI, Bangalore-35 Page 16

INTERNSHIP-IV 2024-25

• Properties: The attributes you want to change.

• Values: The settings for the properties.
Basic example:
selector {
property: value;
}
example
p{
color: red;
font-size: 16px;
}
In this example:
• p is the selector (it targets all <p> elements).
• color and font-size are properties.
• red and 16px are the values for these properties
1. Selectors
Selectors determine which elements are targeted by the CSS rules. Here are some
common types:
• Type Selector: Targets elements by their type.
h1 {
color: blue;
}
Class Selector: Targets elements with a specific class attribute.
.important {
font-weight: bold;
}
ID Selector: Targets a single element with a specific ID attribute.
#unique {
background-color: yellow;
}
Attribute Selector: Targets elements with a specific attribute.
[type="text"] {
border: 1px solid black;
}

Department of CSE, BTI, Bangalore-35 Page 17

INTERNSHIP-IV 2024-25

Descendant Selector: Targets elements that are nested within other elements.
div p {
color: green;
}
2. CSS Properties
Some common CSS properties include:
Color and Background:
color: #333;
background-color: #f0f0f0;
Fonts:
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
Text:
text-align: center;
text-decoration: underline;
Box Model: Controls the size and spacing of elements.
width: 200px;
height: 100px;
margin: 10px;
padding: 15px;
border: 1px solid #000;
3. CSS Layouts
Box Model: Each element is a box with margins, borders, padding, and content.
Flexbox: A layout model for designing responsive layouts.
.container {
display: flex;
justify-content: space-between;
}
Grid: A two-dimensional layout model for creating complex layouts.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;

Department of CSE, BTI, Bangalore-35 Page 18

INTERNSHIP-IV 2024-25

}
4. Responsive Design
Media queries allow you to apply styles based on the device’s characteristics, such as
screen width.
@media (max-width: 600px) {
.container {
padding: 10px;
}
}
5. Applying CSS
CSS can be applied in three ways:
1. Inline Styles: Directly in the HTML element.
<p style="color: blue;">Hello World!</p>

Internal Stylesheet: Inside the <style> tag in the HTML <head>

<style>
p{
color: blue;
}
</style>

External Stylesheet: In a separate .css file linked to the HTML.

<link rel="stylesheet" href="styles.css">

JAVASCRIPT
JavaScript is a versatile and widely-used programming language primarily known for
interactivity to web pages. It allows you to manipulate the DOM (Document Object
Model),handle events, and create dynamic content.
1. Variables: Used to store data values.
let name = 'John'; // 'let' declares a block-scoped variable
const age = 30; // 'const' declares a constant

Data Types: Common types include strings, numbers, booleans, objects, and arrays.
let isActive = true; // Boolean

Department of CSE, BTI, Bangalore-35 Page 19

INTERNSHIP-IV 2024-25

let score = 95; // Number

let message = 'Hello!'; // String
let user = { name: 'Alice', age: 25 }; // Object
let colors = ['red', 'green', 'blue']; // Array
Functions: Blocks of code designed to perform a particular task.
function greet(name) {
return `Hello, ${name}!`;
}
let greeting = greet('John'); // Calls the function
2. Control Structures
Conditional Statements: Execute code based on conditions.
if (age > 18) {
console.log('Adult');
} else {
console.log('Minor');
}
Loops: Repeat code multiple times.
// For loop
for (let i = 0; i < 5; i++) {
console.log(i);
}
// While loop
let count = 0;
while (count < 5) {
console.log(count);
count++;
}
3. DOM Manipulation
JavaScript allows you to interact with HTML elements and modify their content or
attributes.
• Selecting Elements:
let element = document.getElementById('myElement');
let elements = document.querySelectorAll('.myClass');
Changing Content:

Department of CSE, BTI, Bangalore-35 Page 20

INTERNSHIP-IV 2024-25

element.innerHTML = 'New Content';

element.style.color = 'blue';
4. Creating Elements:
let newElement = document.createElement('div');
newElement.textContent = 'Hello World!';
document.body.appendChild(newElement);
5. Event Handling
You can respond to user actions, such as clicks or key presses.
• Adding Event Listeners:
element.addEventListener('click', function() {
alert('Element clicked!');
});
6. Error Handling
Use try...catch to handle errors gracefully.
• Basic Error Handling:
try {
let result = riskyFunction();
} catch (error) {
console.error('An error occurred:', error);
}
7. Asynchronous JavaScript
Handle operations that take time, such as fetching data from a server.
• Callbacks: Functions passed as arguments to handle asynchronous results.
function fetchData(callback) {
setTimeout(() => {
callback('Data received');
}, 1000);
}
fetchData(function(data) {
console.log(data);
});
Promises: Represent the eventual completion (or failure) of an asynchronous operation.
let promise = new Promise((resolve, reject) => {
setTimeout(() => {

Department of CSE, BTI, Bangalore-35 Page 21

INTERNSHIP-IV 2024-25

resolve('Data received');
}, 1000);
});
promise.then(data => {
console.log(data);
}).catch(error => {
console.error(error);
});
Async/Await: Syntactic sugar for handling promises more easily.
async function fetchData() {
try {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
}
fetchData();
8. Objects and Arrays
• Objects: Collections of key-value pairs.
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
Arrays: Ordered lists of values.
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => {
console.log(number);
});

Department of CSE, BTI, Bangalore-35 Page 22

INTERNSHIP-IV 2024-25

REACT
1. React code:
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
const [users, setUsers] = useState([]);
const [newUser, setNewUser] = useState({ name: '', email: '' });
const [editUser, setEditUser] = useState(null);

// Fetch users from the backend

useEffect(() => {
axios.get('http://localhost:5000/api/users')
.then(response => {
setUsers(response.data);
})
.catch(error => console.error('Error fetching users:', error));
}, []);

// Handle form changes

const handleChange = (e) => {
setNewUser({ ...newUser, [e.target.name]: e.target.value });
};

// Create a new user

const handleSubmit = (e) => {
e.preventDefault();
if (editUser) {
axios.put(`http://localhost:5000/api/users/${editUser._id}`, newUser)
.then(response => {
setUsers(users.map(user => user._id === editUser._id ? response.data : user));
setEditUser(null);
setNewUser({ name: '', email: '' });
})

Department of CSE, BTI, Bangalore-35 Page 23

INTERNSHIP-IV 2024-25
.catch(error => console.error('Error updating user:', error));
} else {
axios.post('http://localhost:5000/api/users', newUser)
.then(response => {
setUsers([...users, response.data]);
setNewUser({ name: '', email: '' });
})
.catch(error => console.error('Error creating user:', error));
}
};

// Delete a user
const handleDelete = (id) => {
axios.delete(`http://localhost:5000/api/users/${id}`)
.then(() => {
setUsers(users.filter(user => user._id !== id));
})
.catch(error => console.error('Error deleting user:', error));
};

// Edit a user
const handleEdit = (user) => {
setEditUser(user);
setNewUser({ name: user.name, email: user.email });
};

return (
<div>
<h1>User Management</h1>

<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={newUser.name}

Department of CSE, BTI, Bangalore-35 Page 24

INTERNSHIP-IV 2024-25
onChange={handleChange}
placeholder="Name"
required
/>
<input
type="email"
name="email"
value={newUser.email}
onChange={handleChange}
placeholder="Email"
required
/>
<button type="submit">{editUser ? 'Update' : 'Create'} User</button>
</form>

<ul>
{users.map(user => (
<li key={user._id}>
<span>{user.name} - {user.email}</span>
<button onClick={() => handleEdit(user)}>Edit</button>
<button onClick={() => handleDelete(user._id)}>Delete</button>
</li>
))}
</ul>
</div>
);
}

export default App;

Department of CSE, BTI, Bangalore-35 Page 25

INTERNSHIP-IV 2024-25

Nodejs
2. Node code:

const express = require('express');

const mongoose = require('mongoose');
const cors = require('cors');

// Initialize Express app

const app = express();
app.use(express.json());
app.use(cors());

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/userDB', { useNewUrlParser: true,
useUnifiedTopology: true })
.then(() => console.log('Connected to MongoDB'))
.catch(error => console.error('MongoDB connection error:', error));

// Create a User Schema

const userSchema = new mongoose.Schema({
name: String,
email: String
});

// Create a User Model

const User = mongoose.model('User', userSchema);

// API Routes

// GET all users

app.get('/api/users', async (req, res) => {
try {
const users = await User.find();
res.json(users);
} catch (err) {
res.status(400).send('Error fetching users');
}
});

// POST a new user

app.post('/api/users', async (req, res) => {
const { name, email } = req.body;
try {
const newUser = new User({ name, email });
await newUser.save();
res.status(201).json(newUser);
} catch (err) {
res.status(400).send('Error creating user');
}
});
Department of CSE, BTI, Bangalore-35 Page 26
INTERNSHIP-IV 2024-25

// PUT update a user

app.put('/api/users/:id', async (req, res) => {
const { name, email } = req.body;
try {
const updatedUser = await User.findByIdAndUpdate(req.params.id, { name, email },
{ new: true });
res.json(updatedUser);
} catch (err) {
res.status(400).send('Error updating user');
}
});

// DELETE a user
app.delete('/api/users/:id', async (req, res) => {
try {
await User.findByIdAndDelete(req.params.id);
res.status(204).send();
} catch (err) {
res.status(400).send('Error deleting user');
}
});

// Start the server

const port = 5000;
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});

Department of CSE, BTI, Bangalore-35 Page 27

INTERNSHIP-IV 2024-25

PROJECT
1. Login-Page

import React, { useState } from 'react'

import "./Navbar.css"
import logo from "../../assets/logo.webp"
import cart_icon from "../../assets/cart_icon.png"
import { Link } from 'react-router-dom'
import { useContext } from 'react'
import { ShopContext } from '../../Context/ShopContext'
const Navbar = () => {
const [menu,setMenu]=useState("home")
const {getTotalCartItems} = useContext(ShopContext)
return (
<div className='navbar'>
<div className="nav-logo">
<img src={logo} alt="" height="50px" />
<p>Shopify</p>
</div>
<ul className='nav-menu'>
<li onClick={()=>{setMenu("home")}}><Link
style={{textDecoration:"none",color:"#626262"}} to="/">Home</Link>{menu==="home"
? <hr/>:<></>}</li>
<li onClick={()=>{setMenu("mens")}}><Link
style={{textDecoration:"none",color:"#626262"}} to="/mens">Men
</Link>{menu==="mens" ? <hr/>:<></>}</li>
<li onClick={()=>{setMenu("womens")}}><Link
style={{textDecoration:"none",color:"#626262"}} to="/womens">Women
</Link>{menu==="womens" ? <hr/>:<></>}</li>
<li onClick={()=>{setMenu("kids")}}><Link
style={{textDecoration:"none",color:"#626262"}}
to="/kids">Kids</Link>{menu==="kids" ? <hr/>:<></>}</li>
</ul>
<div className="nav-login-cart">
<Link to="/login"> <button>Login</button></Link>
<Link to="/cart"><img src={cart_icon} alt="" height="40px" /></Link>

Department of CSE, BTI, Bangalore-35 Page 28

INTERNSHIP-IV 2024-25
<div className="nav-cart-count">{getTotalCartItems()}</div>
</div>
</div>
)
}

Figure 1: Login Page

2. Hero Section
import React from 'react'
import "./Hero.css"
import hand_icon from "../../assets/hand_icon.png"
import arrow_icon from "../../assets/arrow_icon.png"
import men from "../../assets/p8.webp"
const Hero = () => {
return (
<div className='hero'>
<div className="hero-left">
<h2>Best Deals ! Best Prices !</h2>

<div className="hero-hand-icon">
<p>New</p>
<img src={hand_icon} alt="" height="60px" />
Department of CSE, BTI, Bangalore-35 Page 29
INTERNSHIP-IV 2024-25
</div>
<p>collections</p>
<p>for everyone</p>
<div className="hero-latest-btn">
<div>Latest Collection</div>
<img src={arrow_icon} alt="" height="30px"/>
</div>
</div>

<div className="hero-right">
<img src={men} alt="" height="400px" />
</div>
</div>
)
}
export default Hero

Figure 2: Hero Page

Department of CSE, BTI, Bangalore-35 Page 30

INTERNSHIP-IV 2024-25

3. Cart Section

import React, { useContext } from 'react'

import "./CartItems.css"
import remove_icon from "../../assets/remove.webp"
import { ShopContext } from '../../Context/ShopContext'
const CartItems = () => {
const { getTotalCartAmount,all_product, cartItems, removeFromCart } =
useContext(ShopContext);
return (
<div className='cartItems'>
<div className="cartitems-format-main">
<p>Products</p>
<p>Title</p>
<p>Price</p>
<p>Quantity</p>
<p>Total</p>
<p>Remove</p>
</div>
<hr />
{all_product.map((e) => {
if (cartItems[e.id] > 0) {
return <div>
<div className='cartItems-format cartitems-format-main'>
<img src={e.image} alt="" height="100px" />
<p>{e.name}</p>
<p>${e.new_price}</p>
<button className='cartitems-quantity'>
{cartItems[e.id]}
</button>
<p>{e.new_price*cartItems[e.id]}</p>
<img src={remove_icon} alt="" onClick={()=> removeFromCart(e.id)} height="20px"/>
</div>

Department of CSE, BTI, Bangalore-35 Page 31

INTERNSHIP-IV 2024-25
<hr/>
</div>
}
return null;
})}
<div className="cartitems-down">
<div className="cartitems-total">
<h1>cart Totals</h1>
<div>
<div className="cartitems-total-item">
<p>Subtotal</p>
<p>${getTotalCartAmount()}</p>
</div>
<hr/>
<div className="cartitems-total-item">
<p>Shipping Fee</p>
<p>Free</p>
</div> <hr/>
<div className="cartitems-total-item">
<p>Total</p>
<p>${getTotalCartAmount()}</p>
</div>
</div>
<button>PROCEED TO CHECKOUT</button>
</div>
<div className="cartitems-promocode">
<p>If you have a promo code, Enter it here</p>
<div className="cartitems-promobox">
<input type='text' placeholder='promo code'/>
<button>submit</button>
</div>
</div></div> </div>
)
}

Figure 3: Cart Page

Department of CSE, BTI, Bangalore-35 Page 32

INTERNSHIP-IV 2024-25

4. Product Display
import React, { useContext } from 'react'
import "./ProductDisplay.css"
import star_icon from "../../assets/star_icon.png"
import star_dull_icon from "../../assets/star_dull_icon.png";
import { ShopContext } from '../../Context/ShopContext';
const ProductDisplay = (props) => {
const { product } = props;
const {addTocart} = useContext(ShopContext);
return (
<div className='productdisplay'>
<div className="productdisplay-left">
<div className="productdisplay-img-list">
<img src={product.image} alt="" height="150px" />
<img src={product.image} alt="" height="150px" />
<img src={product.image} alt="" height="150px" />
</div>
<div className='productdisplay-img'>
<img className='productdisplay-main-img' src={product.image} alt="" height="300px"
/>
</div>
</div>
<div className="productdisplay-right">
<h1>{product.name}</h1>
<div className="productdisplay-right-star">
<img src={star_icon} alt="" height="20px" />
<img src={star_icon} alt="" height="20px" />

Department of CSE, BTI, Bangalore-35 Page 33

INTERNSHIP-IV 2024-25

5. Items

import { useEffect } from 'react';

import { useNavigate } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from '../store';
import { getSavedIdeas } from '../store/slices/ideaSlice';
import { useTheme } from '../contexts/ThemeContext';
import { Brain, FileText, Layout, MessageSquare, Star, Users } from 'lucide-react';

const Dashboard = () => {

const navigate = useNavigate();
const dispatch = useDispatch();
const { darkMode } = useTheme();

const { user } = useSelector((state: RootState) => state.auth);

const { ideas, loading } = useSelector((state: RootState) => state.idea);

useEffect(() => {
dispatch(getSavedIdeas() as any);
}, [dispatch]);

const stats = [
{
name: 'Total Ideas',
value: ideas.length,
icon: Brain,
color: 'bg-blue-500'
},
{
name: 'Pitch Decks',
value: ideas.filter(idea => idea.pitchDeckContent).length,
icon: FileText,
color: 'bg-green-500'

Department of CSE, BTI, Bangalore-35 Page 34

INTERNSHIP-IV 2024-25
},
{
name: 'Canvases',
value: ideas.filter(idea => idea.canvasContent).length,
icon: Layout,
color: 'bg-purple-500'
},
{
name: 'Competitor Analyses',
value: ideas.filter(idea => idea.competitorAnalysis).length,
icon: Users,
color: 'bg-blue-500'
},
{
name: 'Pitch Simulations',
value: ideas.filter(idea => idea.pitchSimulation).length,
icon: MessageSquare,
color: 'bg-green-500'
},
{
name: 'Average Score',
value: ideas.length ? Math.round(ideas.reduce((acc, idea) => acc +
idea.overallScore, 0) / ideas.length) : 0,
icon: Star,
color: 'bg-yellow-500'
}
];

if (loading) {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2
border-indigo-500"></div>
</div>
);
}
Department of CSE, BTI, Bangalore-35 Page 35
INTERNSHIP-IV 2024-25

return (
<div className={`min-h-screen ${darkMode ? 'bg-gray-900' : 'bg-gray-50'} py-
12`}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center">
<h1 className={`text-3xl font-bold ${darkMode ? 'text-white' : 'text-gray-
900'}`}>
Welcome back, {user?.name}!
</h1>
<p className={`mt-2 text-lg ${darkMode ? 'text-gray-300' : 'text-gray-600'}`}>
Your startup journey dashboard
</p>
</div>

{/* Stats Grid */}

<div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
{stats.map((stat) => (
<div
key={stat.name}
className={`${darkMode ? 'bg-gray-800' : 'bg-white'} overflow-hidden
rounded-lg shadow`}
>
<div className="p-5">
<div className="flex items-center">
<div className={`flex-shrink-0 rounded-md p-3 ${stat.color}`}>
<stat.icon className="h-6 w-6 text-white" />
</div>
<div className="ml-5 w-0 flex-1">
<dl>
<dt className={`text-sm font-medium truncate ${darkMode ? 'text-gray-
300' : 'text-gray-500'}`}>
{stat.name}
</dt>
<dd className={`text-lg font-semibold ${darkMode ? 'text-white' : 'text-
gray-900'}`}>
{stat.value}
Department of CSE, BTI, Bangalore-35 Page 36
INTERNSHIP-IV 2024-25
</dd>
</dl>
</div>
</div>
</div>
</div>
))}
</div>

{/* Quick Actions */}

<div className="mt-12">
<h2 className={`text-2xl font-semibold mb-6 ${darkMode ? 'text-white' : 'text-
gray-900'}`}>
Quick Actions
</h2>
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
<button
onClick={() => navigate('/submit-idea')}
className={`p-6 rounded-lg shadow-sm text-left hover:shadow-md transition-
shadow ${
darkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-white hover:bg-gray-50'
}`}
>
<Brain className="h-8 w-8 text-indigo-600 mb-3" />
<h3 className={`text-lg font-medium ${darkMode ? 'text-white' : 'text-gray-
900'}`}>
Submit New Idea
</h3>
<p className={`mt-2 text-sm ${darkMode ? 'text-gray-300' : 'text-gray-
500'}`}>
Get instant AI validation for your startup idea
</p>
</button>

<button
onClick={() => navigate('/saved-ideas')}

Department of CSE, BTI, Bangalore-35 Page 37

INTERNSHIP-IV 2024-25
className={`p-6 rounded-lg shadow-sm text-left hover:shadow-md transition-
shadow ${
darkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-white hover:bg-gray-50'
}`}
>
<FileText className="h-8 w-8 text-green-600 mb-3" />
<h3 className={`text-lg font-medium ${darkMode ? 'text-white' : 'text-gray-
900'}`}>
View Saved Ideas
</h3>
<p className={`mt-2 text-sm ${darkMode ? 'text-gray-300' : 'text-gray-
500'}`}>
Access your previously validated ideas
</p>
</button>

{user?.isPremium && (
<button
onClick={() => navigate('/investors')}
className={`p-6 rounded-lg shadow-sm text-left hover:shadow-md
transition-shadow ${
darkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-white hover:bg-gray-50'
}`}
>
<Star className="h-8 w-8 text-yellow-600 mb-3" />
<h3 className={`text-lg font-medium ${darkMode ? 'text-white' : 'text-gray-
900'}`}>
Investor Directory
</h3>
<p className={`mt-2 text-sm ${darkMode ? 'text-gray-300' : 'text-gray-
500'}`}>
Browse our curated list of investors
</p>
</button>
)}
</div>
</div>

Department of CSE, BTI, Bangalore-35 Page 38

INTERNSHIP-IV 2024-25

{/* Recent Ideas */}

{ideas.length > 0 && (
<div className="mt-12">
<h2 className={`text-2xl font-semibold mb-6 ${darkMode ? 'text-white' :
'text-gray-900'}`}>
Recent Ideas
</h2>
<div className={`overflow-hidden shadow ring-1 ring-black ring-opacity-5
rounded-lg ${
darkMode ? 'bg-gray-800' : 'bg-white'
}`}>
<table className="min-w-full divide-y divide-gray-300">
<thead>
<tr>
<th className={`py-3.5 pl-4 pr-3 text-left text-sm font-semibold ${
darkMode ? 'text-gray-300' : 'text-gray-900'
}`}>
Idea
</th>
<th className={`px-3 py-3.5 text-left text-sm font-semibold ${
darkMode ? 'text-gray-300' : 'text-gray-900'
}`}>
Score
</th>
<th className={`px-3 py-3.5 text-left text-sm font-semibold ${
darkMode ? 'text-gray-300' : 'text-gray-900'
}`}>
Date
</th>
</tr>
</thead>
<tbody className={`divide-y ${darkMode ? 'divide-gray-700' : 'divide-gray-
200'}`}>
{ideas.slice(0, 5).map((idea) => (
<tr

Department of CSE, BTI, Bangalore-35 Page 39

INTERNSHIP-IV 2024-25
key={idea._id}
className="cursor-pointer hover:bg-gray-50"
onClick={() => navigate(`/idea/${idea._id}`)}
>
<td className={`whitespace-nowrap py-4 pl-4 pr-3 text-sm ${
darkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-white hover:bg-gray-
50'
}`}>
{idea.ideaText.length > 100 ? `${idea.ideaText.substring(0, 100)}...` :
idea.ideaText}
</td>
<td className={`whitespace-nowrap px-3 py-4 text-sm ${
darkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-white hover:bg-gray-
50'
}`}>
{idea.overallScore}%
</td>
<td className={`whitespace-nowrap px-3 py-4 text-sm ${
darkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-white hover:bg-gray-
50'
}`}>
{new Date(idea.createdAt).toLocaleDateString()}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
)}
</div>
</div>
);
};

export default Dashboard;

Department of CSE, BTI, Bangalore-35 Page 40

INTERNSHIP-IV 2024-25

Figure 4: Items Page

Figure 5: Items Page

Department of CSE, BTI, Bangalore-35 Page 41

INTERNSHIP-IV 2024-25

Figure 4: Items Page

Figure 5: Footer Page

Department of CSE, BTI, Bangalore-35 Page 42

INTERNSHIP-IV 2024-25

CHAPTER 6

CONCLUSION
My internship experience in Full Stack Web Development using the MERN stack
(MongoDB, Express.js, React.js, and Node.js) has been an incredibly rewarding journey.
It offered me a deep and practical understanding of modern web application development,
encompassing both client-side and server-side technologies. By working with React.js for
building dynamic and responsive user interfaces, and Node.js with Express.js for creating
efficient backend services, I developed a solid foundation in building scalable and
maintainable full-stack applications.

This hands-on experience significantly sharpened my technical skills, particularly in

RESTful API integration, asynchronous JavaScript, state management with React Hooks,
and CRUD operations with MongoDB. I also gained valuable insights into the importance
of designing clean, modular code, debugging real-world issues, and following best
practices in both frontend and backend development. Working through real project
requirements and challenges enhanced my problem-solving mindset and boosted my
confidence in tackling complex software development tasks.

Looking forward, I am motivated to explore advanced topics such as serverless

architecture, GraphQL, CI/CD pipelines, and performance optimization. This internship
has laid a strong foundation for my career in the tech industry and inspired me to
continuously improve, adapt, and contribute to innovative web solutions. I am immensely
thankful for this opportunity and excited to apply my learnings to real-world applications
and future professional endeavors.

Department of CSE, BTI, Bangalore-35 Page 43

INTERNSHIP-IV 2024-25

6.1 LIMITATIONS

1. Dependency on External AI (Gemini API)

Accuracy Risks: Validation quality depends entirely on Gemini’s output—biased

or generic feedback could mislead users.

API Costs/Stability: Scaling user requests may become expensive or unreliable if

API limits/pricing change.

2. Feature Limitations by Plan

Free Tier Restrictions: PDF downloads for pitch decks locked behind paywall may
frustrate free users.

Monetization Pressure: Must continuously add premium features (e.g., advanced

analytics) to justify Pro upgrades.

3. User Experience Gaps

No Collaboration Tools: Missing team-sharing features for co-founders or advisors

to collaborate on decks/canvas.

Static Pitch Decks: Auto-generated decks may lack customization depth (e.g.,
branding, animations).

4. Scalability Challenges

Lean Canvas Complexity: Draggable/resizable blocks may lag with large datasets
or low-end devices.

Data Storage Costs: Storing user-generated decks/canvas versions could strain

resources as the user base grows.
6.2 FUTURE ENHANCEMENT
To improve Startup Spark and make it more competitive, scalable, and user-friendly, the
following future enhancements can be implemented:

1. Enhanced AI & Validation Features

• Multi-AI Integration: Support for multiple AI models (e.g., GPT-4, Claude,

Mistral) to provide diverse perspectives on idea validation.

Department of CSE, BTI, Bangalore-35 Page 44

INTERNSHIP-IV 2024-25

• Industry-Specific Validation: Custom scoring models tailored for tech,

healthcare, e-commerce, etc.

2. Collaboration & Team Tools

• Team Workspaces: Allow multiple users (co-founders, advisors) to collaborate

on pitch decks and business canvases.

• Version Control & History: Track changes and revert to previous versions of
pitch decks/canvases.

• Commenting & Feedback System: Enable stakeholders to leave notes on

specific slides or canvas

Department of CSE, BTI, Bangalore-35 Page 45

INTERNSHIP-IV 2024-25

APPENDIX
SNAPSHOTS

Department of CSE, BTI, Bangalore-35 Page 46

INTERNSHIP-IV 2024-25

Department of CSE, BTI, Bangalore-35 Page 47