A

PROJECT BASED INTERNSHIP REPORT

ON

“DESIGN A WEB BASED APPLICATION TO BUILD

A PORTFOLIO”

SUBMITTED TO THE SAVITRIBAI PHULE UNIVERSITY, PUNE

IN PARTIAL FULFILMENTN OF THE REQUIREMENTS FOR
THE AWARD OF THE

THIRD YEAR ENGINEERING (INFORMATION TECHNOLOGY)

BY

MISS. KHUSHI VILAS VAIRAL -T190108578

Under the Guidance of

DR. B.L.GUNJAL

DEPARTMENT OF INFORMATION TECHNOLOGY

AMRUTVAHINI COLLEGE OF ENGINEERING,
SANGAMNER A/P: GHULEWADI, SANGAMNER,
AHMEDNAGAR, PIN - 422608 YEAR 2023-24
 DEPARTMENT OF INFORMATION TECHNOLOGY

AMRUTVAHINI COLLEGE OF ENGINEERING,

SANGAMNER A/P: GHULEWADI, SANGAMNER, AHMEDNAGAR,
PIN - 422608 YEAR 2023-24

CERTIFICATE

This is to certify that Internship Report entitled

“DESIGN A WEB BASED APPLICATION TO BUILD A

PORTFOLIO”

is submitted as partial fulfillment of curriculum of the T.E. of Information Technology

BY

MISS. KHUSHI VILAS VAIRAL -T190108578

Dr. B.L.Gunjal Prof. P.S. Hase Dr.B.L.Gunjal

(Internship Guide) (Internship Co-ordinator) ( HOD IT)

 Savitribai Phule Pune University

CERTIFICATE
This is to certify that

MISS. KHUSHI VILAS VAIRAL -T190108578

Student of T.E. Information Technology was examined in Internship Report entitled

“DESIGN A WEB BASED APPLICATION TO BUILD

A PORTFOLIO”

On

…/…/2024

At

DEPARTMENT OF INFORMATION TECHNOLOGY

AMRUTVAHINI COLLEGE OF ENGINEERING, SANGAMNER

YEAR 2023-24

Dr.B.L.Gunjal Prof.R.B.Pawar

(Internal Examiner) (External Examiner)

 Certificate by Guide

This is to certify that

MISS. KHUSHI VILAS VAIRAL -T190108578

Has completed the Internship work under my guidance and I have verified the work
for its originality in documentation, problem statement, literature survey and conclusion
presented in Internship work.

Place: Sangamner Dr. B.L.Gunjal

Date: AVCOE, Sangamner

 Acknowledgement

It is our proud privilege and duty to acknowledge the help and guidance received
from several people in the preparation of this report. It would not have been possible to
prepare this report in this form without their valuable help, co-operation and guidance.

First and foremost, we wish to record our sincere gratitude to the management of this
college and to our respected Principal Dr.M.A.Venkatesh for his constant support and
encouragement in the preparation of this report and for the availability of library and
laboratory facilities needed to prepare this report.We express our sincere gratitude to our
guide, Dr. B.L.Gunjal for guiding us in investigations of these Internship activities and in
carrying out experimental work. I would like to thank the H.O.D. of the Information
Technology Department Dr.B.L.Gunjal for motivating us.
Also, Our numerous discussions were extremely helpful. We hold her in esteem for
guidance, encouragement and inspiration received from her. They make us more studious
andbolder. Thanks for their guidance. We enjoyed working with her and got inspired from
her. Last but not the least we wish to thank our parents for financing our studies and
helping us throughout for achieving perfection and excellence. Their personal help in
making this report and Internship worth presentation is gratefully acknowledged.

Dr. B.L.Gunjal Prof. P.S. Hase Dr.B.L.Gunjal

Internship Guide Internship Co-ordinator HOD IT

I
 Abstract

This project proposes the design of a web-based application tailored to facilitate the creation
and management of professional portfolios. In an increasingly digital-centric professional
landscape, individuals across various fields require a platform to showcase their work, skills, and
accomplishments effectively. The proposed application aims to streamline the portfolio-building
process by offering intuitive user interfaces, customizable templates, and seamless integration of
multimedia content.

This project involves the design and development of a web-based application utilizing the
MERN (MongoDB, Express.js, React.js, Node.js) stack to facilitate the creation and management
of professional portfolios. The application aims to provide users with a robust platform for
showcasing their skills, experiences, and achievements in a visually appealing and interactive
format. Leveraging the MERN stack, the application enables seamless integration of various
multimedia content types, including text, images, videos, and documents.

Key features include user authentication, customizable portfolio templates, rich text editing
capabilities, and social media integration for enhanced visibility. The development process entails
rigorous planning, iterative design, and agile development methodologies to ensure scalability,
performance, and usability. By harnessing the power of the MERN stack, this web-based portfolio
application offers users a comprehensive toolset to effectively represent their professional identity
and advance their career aspirations in the digital real

II
 Table of Contents

Sr. No. Contents Page No.

1
1. Introduction
2
2. Methodologies
3
3. Benefits of Internship
4
4. Learning Objectives
5
5. Proposed Work
6
6. System Analysis
7
7. Software Requirements
8
8. Technologies Used
10
9. Actual System Screenshots
12
10. Applications
13
11. Advantages
14
12. Disadvantages
15
13. Future Scope
16
14. Conclusion

15. References 17

III
 Chapter 1

Introduction

In today's highly competitive job market and creative industries, having a professional portfolio is
essential for showcasing one's skills, experiences, and achievements. As the demand for digital
presence continues to rise, the need for a user-friendly and customizable platform to build and
manage portfolios becomes increasingly evident. This project proposes the design and development
of a web- based application utilizing the MERN (MongoDB, Express.js, React.js, Node.js) stack,
tailored specifically for individuals and professionals to create, personalize, and showcase their
portfolios effectively.

The MERN stack is a powerful combination of technologies known for its flexibility, scalability, and
performance, making it an ideal choice for building modern web applications. MongoDB, a No-SQL
database, provides a scalable and flexible data storage solution, while Express.js simplifies the
development of backend services with its minimalist and unopinionated framework. React.js, a
popular JavaScript library for building user interfaces, offers a component-based architecture for
creating dynamic and interactive frontend experiences. Finally, Node.js enables server-side
JavaScript execution, facilitating seamless communication between the frontend and backend
components of the application..

Overall, the proposed web-based portfolio application built on the MERN stack promises to address
the growing need for a modern, intuitive, and feature-rich platform for building and managing
professional portfolios, catering to the diverse needs of individuals across various industries and
disciplines.

1
 Chapter 2
Methodologies

In a MERN (MongoDB, Express.js, React.js, Node.js) stack internship involves working with a
full-stack React technology stack.

• Understand the Basics: -

 Get a solid understanding of MongoDB, a NoSQL database used to store data in a flexible, JSON-
like format.
 Learn Express.js, a web application framework for Node.js that simplifies the process of building
web applications and APIs.

• Set Up Your Development Environment: -

 Install and configure the necessary tools, such as Node.js, npm (Node Package Manager), and
MongoDB.

• Build a Simple CRUD Application: -

 Create a basic application that performs CRUD (Create, Read, Update, Delete) operations using
the MERN stack.

• Work with MongoDB: -

 Learn how to interact with MongoDB using Mongoose, a MongoDB object modeling tool for
Node.js.
 Understand the principles of data modeling and schema design.

• Create React Components: -

 Develop React components to build the user interface.

 Understand state management in React using tools like useState and useEffect.

• Integrate Frontend with Backend: -

 Connect your React frontend with the Express.js backend.

 Implement API calls from the frontend to retrieve and update data.

2
 Chapter 3
Benefits of Internship

• Full-Stack Development Skills:

MERN stack covers both frontend and backend technologies, allowing you to become a proficient
full-stack developer. This versatility makes you more marketable in the job market.

• In-Demand Technologies:
MongoDB, Express.js, React.js, and Node.js are widely used and in demand in the industry.
Acquiring skills in these technologies can increase your employability and open up opportunities
for web development positions.

• Collaboration and Teamwork:

MERN stack development often requires collaboration with cross-functional teams. Interning in
this environment helps you develop teamwork and communication skills, essential for
professional success.

• Understanding of Modern Development Practices:

MERN stack promotes modern development practices and tools. Through the internship, you'll
gain insights into agile methodologies, version control systems like Git, and deployment
strategies.

• Database Management Skills:

Working with MongoDB enhances your skills in NoSQL database management. You'll learn
about data modeling, schema design, and how to interact with databases using tools like
Mongoose.

• Backend Development with Node.js and Express.js:

Node.js and Express.js provide a scalable and efficient platform for building server-side
applications. Interning with these technologies gives you a strong foundation in backend
development.

3
 Chapter 4
Learning Objectives

• Understanding of MERN Stack Components:

Gain a solid understanding of MongoDB for database management. o Familiarize yourself with
Express.js for building the backend server. o Learn React.js for building dynamic and interactive
user interfaces.
Understand Node.js for server-side JavaScript execution.

• Database Management and Modeling:

Learn how to design and model databases using MongoDB.
Understand the principles of NoSQL databases and how they differ from traditional relational
databases.

• Building RESTful APIs:

Gain proficiency in designing and implementing RESTful APIs using Express.js
Understand how to handle HTTP requests, route endpoints, and manage data interactions.

• React Component Development:

Develop skills in building reusable and efficient React components.
Understand state management and the use of hooks for managing component logic.

• Problem-Solving and Debugging:

Develop effective problem-solving skills when encountering issues in development.
Learn to use debugging tools to identify and fix bugs in your code.

4
 Chapter 5
Proposed Work

Tours and Travel Website using MERN stack is a project that basically implements
basic CRUD operation using MERN stack (MongoDB, Express JS, Node JS, React JS). The
users can read, add, update, and delete their bookings in the table using the web interface.

1. Project Scope Definition

- Clearly define the objectives and features of the portfolio application.

- Determine the target audience and their requirements.
- Identify key functionalities such as user authentication, portfolio creation, editing, and sharing.

2. Technology Stack Selection

- Choose the MERN stack for development: MongoDB (database), Express.js

(backen framework),React.js (frontend framework), and Node.js (runtime environment).
- Assess the suitability of each component based on project requirements, scalability, and developer
expertise.

3. Portfolio Creation and Editing

- Allow users to create, edit, and delete their portfolios.

- Provide a user-friendly interface for adding project details, descriptions, images, and other relevant
information.
- Implement validation to ensure data integrity and consistency.

4. Deployment and Testing

- Deploy the application on a cloud platform like Heroku, AWS, or Azure.

- Perform thorough testing including unit tests, integration tests, and end-to-end tests to ensure
application functionality and stability.
- Conduct user acceptance testing (UAT) to gather feedback and make necessary improvements.

5
 Chapter 6
System Analysis

 Client-Side (React.js):
o Users interact with the application through the user interface built using React.js.
o React.js sends requests to the server for data or actions.

 Server-Side (Express.js and Node.js):

o Express.js handles the incoming requests, processes them, and interacts with the database
(MongoDB) if needed.
o Node.js executes the server-side logic, making decisions based on the received requests,
and prepares responses.

 Database (MongoDB):
o MongoDB stores and retrieves data based on the requests from the server.

o It follows thedefined data models and structures.

6
 Chapter 7
Software Requirements

o Software Requirements:

• Operating system: - Windows 10 / 64 bit

• Coding Language: - HTML, CSS, Bootstrap, React,

• Database: - MongoDB.

• Connectivity (Frontend to Backend): - Postman API

• Editor: - Visual Studio

o Hardware Requirements:

• System: - Laptop (intel I3)

• Storage: 512 GB SSD

• RAM: - 8 GB RAM

7
 Chapter 8
Technologies Used

• MongoDB:

o MongoDB is a NoSQL database that stores data in a flexible, JSON-like format called
BSON (Binary JSON).

o It is designed to be scalable, high-performance, and easily accessible.

o As an intern, you might be involved in tasks related to data modeling, querying, and
interacting with the database.

• Express.js:

o Express.js is a web application framework for Node.js, designed to build robust and
scalable web applications.

o It simplifies the process of creating APIs and handling HTTP requests.

o Interns working with Express.js might be involved in building server-side logic, handling
routes, and middleware.

• React.js:

o React.js is a popular JavaScript library for building user interfaces.

o It allows you to create reusable UI components, making it easier to develop and maintain
complex web applications.

o Interns in a MERN stack internship might work on the frontend, creating interactive and
dynamic user interfaces using React.js.

• Node.js:

o Node.js is a JavaScript runtime that allows you to execute JavaScript code on the server
side.

o It's event-driven and designed to build scalable network applications.

o Interns might work on server-side scripting, handling server logic, and integrating with
databases and APIs.

8
• Version Control:

o Git: Version control is crucial for collaborative software development. Git is a distributed
version control system widely used in the industry.
o Platforms like GitHub or GitLab are often used for hosting repositories.

• Package Managers:

o npm (Node Package Manager): npm is the default package manager for Node.js. It is used for
managing and sharing JavaScript libraries and tools.

• Frontend Build Tools:

o Webpack: Webpack is a module bundler that takes your JavaScript, CSS, and other files and
bundles them together for the browser. It's commonly used in React projects to manage assets
and optimize code.

• Backend APIs:

o Postman APIs: Many MERN stack applications use Postman APIs for communication
between the frontend and the backend. Understanding REST principles and HTTP methods
isessential.

9
 Chapter 9
Screenshots

10
11
 Chapter 10

Applications

1. Define the Purpose and Audience

- Determine the primary purpose of the portfolio (e.g., showcasing design work, writing samples,
photography, etc.).
- Identify the target audience (e.g., potential employers, clients, peers).

2. Create Wireframes

- Sketch out the layout of the application, including the homepage, portfolio pages, about me section,
contact page, etc.
- Determine the placement of elements such as navigation menus, headers, footers, and content
sections.

3. Develop the Frontend

- Use HTML, CSS, and possibly JavaScript to build the frontend of the application.
- Ensure responsiveness for different screen sizes and devices (e.g., desktop, tablet, mobile).

4. Implement Backend Functionality (Optional)

- If needed, integrate backend technologies like Node.js, Django, or Flask to handle dynamic
content or user interactions.
- Set up databases to store user data or portfolio items.

5. Deploy the Application

- Choose a web hosting provider and deploy the application to make it accessible online.
- Configure domain settings if using a custom domain name.

12
 Chapter 11

Advantages

1. Global Accessibility:

A web-based portfolio can be accessed from anywhere with an internet connection, allowing you to
showcase your work to a worldwide audience.

2. Easy Updates:

Unlike traditional printed portfolios, web-based portfolios can be easily updated with new projects,
achievements, or skills, ensuring that your portfolio is always current and reflective of your latest work.

3. Multimedia Integration:

Web portfolios can incorporate various multimedia elements such as images, videos, animations, and
interactive content to showcase your work more effectively than a static print portfolio.

4. Analytics:
By integrating analytics tools, you can track visitor behavior, such as which projects are being viewed
most frequently or how visitors are navigating through your portfolio. This data can help you understand
your audience better and optimize your portfolio for maximum impact.

5. Integration with Social Media and Networking Platforms:

Web portfolios can easily be linked to your social media profiles or professional networking platforms,
making it easier for potential clients or employers to find and connect with you.

13
 Chapter 12

Disadvantages

1. Technical Challenges :

Developing and maintaining a web-based portfolio requires technical expertise. You may encounter
challenges related to coding, hosting, domain management, and troubleshooting technical issues.

2. Accessibility Limitations :
Although web portfolios are generally accessible from any device with an internet connection, they
may not be fully accessible to users with disabilities without proper implementation of accessibility
standards.

3. Security Concerns :

Web-based portfolios are susceptible to security threats such as hacking, data breaches, and malware
attacks. It's essential to implement robust security measures to protect sensitive information and
maintain the integrity of your portfolio.

4. Dependency on Internet Connection :

Users need a stable internet connection to access your web portfolio. If they are in an area with poor
internet connectivity or experiencing network issues, they may have difficulty viewing your portfolio,
impacting their overall experience.

5. Privacy Concerns :

Publishing your portfolio online exposes your work to a wide audience, including competitors and
potential copyright infringement. You may need to carefully consider which projects to showcase and
implement measures to protect sensitive information or intellectual property.

14
 Chapter 13

Future Scope

1. Growing Digitalization :

As more industries and professions become digitized, the demand for digital portfolios will increase.
Professionals in fields such as design, photography, writing, programming, and marketing will continue
to rely on web portfolios to showcase their work to potential clients, employers, and collaborators.

2. Advancements in Technology :

Emerging technologies such as virtual reality (VR), augmented reality (AR), and interactive web design
frameworks offer exciting possibilities for enhancing web-based portfolios. Integrating these
technologies can create more immersive and engaging portfolio experiences, setting them apart from
traditional static portfolios.

3. Mobile Optimization :

With the increasing use of smartphones and tablets, optimizing web portfolios for mobile devices will
become even more critical. Future web-based portfolio designs will prioritize responsive and mobile-
friendly layouts to ensure seamless accessibility across a wide range of devices and screen sizes.

4. Personalization and AI :

AI-powered tools can analyze user behavior and preferences to personalize portfolio content and
recommendations. Future web-based portfolio applications may leverage AI algorithms to suggest
relevant projects, tailor portfolio layouts to individual preferences, and provide real-time feedback on
portfolio performance.

5. Integration with Online Marketplaces and Job Platforms :

Web-based portfolio applications may integrate with online marketplaces and job platforms to
streamline the process of showcasing work, applying for opportunities, and connecting with clients or
employers. Seamless integration with platforms like LinkedIn, Behance, Dribbble, and GitHub can
enhance visibility and networking opportunities for portfolio creators.
15
 Chapter

14

Conclusion

In conclusion, leveraging the MERN (MongoDB, Express.js, React.js, Node.js) stack to design a web-
based application for building portfolios offers a robust and versatile platform for professionals across
various industries. The MERN stack provides a comprehensive toolkit for developing dynamic,
interactive, and scalable web applications tailored to showcase an individual's skills, achievements, and
creative work effectively.

By utilizing MongoDB as the database, Express.js as the web application framework, React.js as the
frontend library, and Node.js as the runtime environment, developers can create feature-rich portfolio
platforms with seamless data management, intuitive user interfaces, and high performance. Here are key
takeaways regarding the conclusion:

1. Scalability :
2. Flexibility :
3. Speed of Development :
4. Real-time Updates :
5. Community Support and Resources :

In summary, designing a web-based application for building portfolios using the MERN stack offers a
powerful and scalable solution for professionals seeking to showcase their talents, attract opportunities,
and establish their online presence effectively. By harnessing the capabilities of MongoDB, Express.js,
React.js, and Node.js, individuals can create immersive, personalized, and visually compelling portfolio
experiences that resonate .

16
 Chapter 15

References

 Websites:

 https://uxfol.io/p/nldanne/036ee860

 https://dev.to/themodernweb/responsive-website-using-css-and-js-full-of-animations-
3ico

 https://www.frontendmentor.io/solutions/multipage-portfo-site-using-html-css- and-
react-js-pcNxbOW6jx

 YouTube Links:

 https://youtu.be/0dOSLhPzSGI?si=mrZbfuXr4wXbSNpE

 https://youtu.be/309beMyhXtg?si=Mn7kkC-vE6731zh1

 https://youtu.be/nOpey8qggeQ?si=nwSNlbTAN-fg_5FB

17