Bangalore University
VI- Semester (NEP) BCA Internship Report on
WEB DEVELOPMENT
Submitted by
SUGANTHI J
U03MS22S0168
Under the Guidance of
Dr Susil Kumar Saho
THEOXFORDCOLLEGEOFSCIENCE
Department of Computer Science & Applications
#32,17th “B” Main, Sector IV, HSR Layout Bangalore-560 102
1
THEOXFORDCOLLEGEOFSCIENCE
DepartmentofComputerScienceand Applications
#32,17th “B” Main,Sector IV, HSR Layout Bangalore-560102
(AFFILIATEDTOBANGALOREUNIVERSITY)
CERTIFICATE
This is to certify that the Internship report titled “Web
Development”done by Suganthi J(U03MS22S0168) of Bangalore
University,inpartialfulfillmentoftherequirementsof6thSemesterBCA
during the year 2024-2025.
Head of the Department Internal Guide
Valued By Name: Suganthi J
UUCMS NO:U03MS22S0168
Examination Center: TOCS
Date Of Exam:
2
ACKNOWLEDGEMENT
I am thankful to Dr. H.B Bhuvaneswari,Principal, The Oxford College of Science,
Bangalore University who provided us all the required facilities to accomplish the
Internship in time.
I endure our Humble and Sincere gratitude to Dr. Susil Kumar Sahoo, Professor &
Head, Department of Computer Science and Applications for his great encouragement
and valuable support.
I offer our sincere gratitude to our Internal guideto Dr. Susil Kumar Sahoo,who always
given us a constant source of inspiration and encouragement during course of our
internship.
I offer our sincere gratitude to our External guideMrs. Farheen Farhath&Mr. Abhishek
who has always given us a constant source of inspiration and encouragement during course
of our internship.
I would like to mention the great fullness of our parents blessing of which we are able to
access and enjoy such opportunities.
Finally, I thank our management and lab coordinator for providing us with the support to
complete the project. We would like to thank each and everybody who supported us
throughout the long and attention-consuming internship.
3
DECLARATION
I, Suganthi J(U03MS21S0168) hereby declare that this Internship report work entitled “Web
Development” is submitted in partial fulfillment for the award of the degree of BACHELOR
OF COMPUTER APPLICATIONS Bangalore University.
I further declare that I have not submitted this project report either in part or in full to any other
university for the award of any degree
Date: Suganthi J
Place: (U03MS22S0168)
INTERNSHIP COMPITION CERTIFICATE
TABLE OF CONTENTS
4
1. Company Background1
2. Introduction3
3. Skills Learnt/Outcomes5
4. Mini Project 7
5. Output Screenshots 9
6. Conclusion10
5
1.Company background
Prinston Smart Engineers is a multidisciplinary engineering and IT solutions company
headquartered in New Delhi, India. Established in 2004, the organization has expanded its
operations across major Indian cities, including Bengaluru, Mysuru, Jaipur, and Gujarat.
The company specializes in Mechanical, Electrical, and Plumbing (MEP) design
consultancy, construction services, IT solutions, and professional training programs.
With a commitment to bridging the gap between academic education and industry
demands, Prinston Smart Engineers launched its Skill Development and Internship
Programs in 2016. These programs are tailored to equip students with hands-on technical
experience in fields such as HVAC design, AutoCAD, Revit MEP, and software/web
development.
As part of its IT division, Prinston Smart Engineers offers services in web development,
software engineering, data analytics, and cybersecurity, catering to a wide range of
sectors including healthcare, education, finance, and retail. Interns working in the Web
Development department gain exposure to full-stack development, UI/UX principles,
version control, and collaborative software engineering practices under the mentorship of
experienced professionals.
The company is also known for its supportive learning environment and real-time project
assignments, which help interns develop the technical and professional skills required in
today’s tech-driven job market.
Key Points about Prinston
1. Prinston is a leading IT consulting and training company based in Bangalore, India.
2. Founded by a team of experienced IT professionals.
3. Provides training and consulting services in software testing, agile methodologies,
Software Development and DevOps.
4. Has trained over 2,50,000+ professionals worldwide.
1
5. Offers a range of courses, from foundation to advanced levels.
6. Has a strong presence in India, USA, UK, Canada, and Australia.
7. Collaborates with top IT companies to provide industry-relevant training.
8. Has a team of experienced trainers with over 10 years of industry experience.
9. Offers internship opportunities to students and recent graduates.
10. Provides hands-on experience with real-time projects.
11. Focuses on developing skills in software testing, automation, Software Development
and agile methodologies.
12. Has a dedicated research and development team.
13. Develops and delivers customized training programs for clients.
14. Offers flexible training options, including online and offline modes.
15. Has a strong network of alumni and industry connections.
16. Provides placement assistance to its trainees.
17. Has a reputation for delivering high-quality training and consulting services.
18. Continuously updates its curriculum to match industry demands.
19. Encourages innovation and creativity among its trainees.
20. Aims to bridge the gap between academia and industry requirements.
2
2.INTRODUCTION
Web development is the work involved in developing websites for the Internet or
intranets. While traditional web development encompasses various technologies, the
MERN Stack has emerged as one of the most popular technology stacks for building
modern, dynamic web applications.web development begins with three fundamental
technologies:
HTML (HyperText Markup Language): The standard markup language that
defines the structure of web content
CSS (Cascading Style Sheets): The language that describes the presentation of
web pages
JavaScript: The programming language that enables interactive web pages
What is MERN Stack?
MERN Stack is a collection of JavaScript-based technologies used to develop full-
stack web applications. MERN stands for:
MongoDB: A NoSQL document database for storing application data
Express.js: A back-end web application framework for Node.js
React: A front-end JavaScript library for building user interfaces
Node.js: A JavaScript runtime environment for executing server-side code
Components of MERN Stack Development
MongoDB
MongoDB is a document-oriented NoSQL database that stores data in flexible, JSON-
like documents. Unlike traditional relational databases like MySQL:
MongoDB uses collections instead of tables
Documents instead of rows
Fields instead of columns
This schema-less approach makes MongoDB ideal for applications with evolving data
requirements and provides horizontal scalability for handling large amounts of data.
3
Express.js
Express.js is a minimal and flexible Node.js web application framework that provides
robust features for web and mobile applications:
Simplifies routing
Handles HTTP requests
Manages APIs
Implements middleware functionality
Connects to databases like MongoDB
Express serves as the middleware that handles the communication between the front-
end React application and the MongoDB database.
React
React is a JavaScript library maintained by Facebook for building interactive user
interfaces:
Uses a component-based architecture
Implements a virtual DOM for efficient rendering
Enables the creation of reusable UI components
Offers unidirectional data flow
Integrates with state management libraries like Redux or Context API
React has become the industry standard for creating dynamic, single-page applications
(SPAs) that provide a seamless user experience.
Node.js
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine that allows
developers to run JavaScript on the server:
Enables event-driven, non-blocking I/O operations
Provides excellent performance for real-time applications
Offers a vast ecosystem of packages via npm (Node Package Manager)
4
Supports asynchronous programming
Node.js serves as the backbone of the MERN stack, powering the server-side of
applications.
Benefits of MERN Stack Development
Single Language: JavaScript is used across the entire application, simplifying
development
JSON Data Flow: Data flows seamlessly between all parts of the application in
JSON format
Open Source: All components are free and open-source with strong community
support
Scalability: Easily scales horizontally to handle increased load and user base
Real-time Applications: Excellent for building real-time applications like chat
apps or collaboration tools
Fast Development: Accelerates development with reusable components and
modular architecture
5
3. Skills Learnt / Outcomes
Skills I Learned:
HTML fundamentals:
o Basic tags (<html>, <head>, <body>, <div>, <span>, <p>, <h1>-<h6>,
<a>, <img>, <ul>, <ol>, <li>, <table>, <form>)
o Semantic HTML5 elements (<header>, <footer>, <nav>, <section>,
<article>)
CSS fundamentals:
o Selectors (element, class, ID)
o Box model (margin, padding, border)
o Display properties (block, inline, flex, grid)
o Positioning (relative, absolute, fixed)
o Media queries for responsive design
JavaScript basics and advanced concepts:
o Functions and callback functions
o Arrays and array methods
o Objects and DOM manipulation
o Asynchronous JavaScript (Promises, async/await)
React.js:
o Components and props
o State management
o Hooks and lifecycle methods
Node.js:
o Server setup and routing
o Express.js framework
o API development
MongoDB Compass:
6
o Database creation and management
o CRUD operations (Create, Read, Update, Delete)
o MongoDB queries:
insertOne() and insertMany()
find() and findOne()
updateOne() and updateMany()
deleteOne() and deleteMany()
Aggregation pipeline
o Data indexing and optimization
Key Outcomes:
Developed responsive web pages with HTML/CSS/JavaScript
Built interactive UI components using React.js
Created RESTful APIs with Node.js
Implemented database operations using MongoDB
Collaborated with team members using Git version control
Created a mini Project
7
4.MINI PROJECT
A Simple E-Commerce Site
Source Code:
App.js
import logo from './logo.svg';
import './App.css';
import Welcome from './Welcome.jsx';
import Home from './Home.jsx';
function App() {
return (
<div className="App">
<Welcome />
<p>
This is an Simple E-Commerce Website.
</p>
<Home />
</div>
);
}
export default App;
Home.jsx
import React from 'react'
import axios from 'axios'
import { Sampledata } from './Sampledata'
function Home() {
return (
<div>
<p>this is the Home page</p>
<div className="wrapper">
{
Sampledata.map((e)=>{
return (
<div className="product">
8
<p>Title:{e.title}</p>
<p>Price:{e.price}</p>
<imgsrc={e.image} alt="simple" width={200} height={200}/>
<p>rating:{e.rating.rate}</p>
<p>review by:{e.rating.count}</p>z
<p>Description:{e.description}</p>
<button className='order_nw'
onClick={()=>{
axios.post("http://localhost:8000/addproducts",e).then(
(res)=>{alert(res.data)}
).catch();
}}
>Order Now </button>
</div>
)
})
}
</div>
</div>
)
}
export default Home;
Index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;}
9
5.OUTPUT SCREENSHOTS
6.
CONCLUSION
As a student passionate about web development, my internship experience at Prinston Smart
Engineers transformed my understanding of modern web technologies. When I first began my
academic journey, I started with the foundations—HTML, CSS, and JavaScript. These skills
gave me the ability to create basic websites for class projects, but I wanted to build more
sophisticated applications.
My internship at Prinston Smart Engineers introduced me to the MERN stack, and it completely
changed my perspective on what's possible in web development. Working with MongoDB
showed me how flexible document-based databases can be compared to the traditional SQL
databases we covered in class. Learning Express.js gave me practical experience in creating
efficient APIs. React challenged me to think in components and states, which was a significant
leap from the vanilla JavaScript we used in school. And Node.js allowed me to use my
JavaScript knowledge for server-side programming, creating a cohesive development
experience.
What I value most about my internship experience with the MERN stack is how it bridged the
gap between academic learning and industry application. Using JavaScript throughout the entire
10
application simplified the development process and made me more productive. The practical
skills I gained working on real projects at Prinston Smart Engineers complemented my
theoretical knowledge from university courses.
I've discovered that employers highly value the comprehensive skill set that comes with MERN
stack proficiency. Being able to contribute to all aspects of an application—from database
design to server architecture to user interface development—has made me a more confident
developer as I prepare to enter the job market after graduation.
For fellow students interested in web development, I strongly recommend mastering the
fundamentals of HTML, CSS, and JavaScript before diving into the MERN stack. This
foundation will make the learning curve less steep and help you understand the "why" behind
these technologies, not just the "how."
As I continue my education and prepare for a career in web development, I'm grateful for the
hands-on experience I gained during my internship. Working with the MERN stack at Prinston
Smart Engineers has given me practical skills that extend far beyond what could be learned in a
classroom alone, positioning me well for future opportunities in the ever-evolving field of web
development.
11
