VISVESWARAYA TECHNOLOGICAL UNIVERSITY

Jnana Sangama, Belagavi-590018

INTERNSHIP REPORT ON
“PORTFOLIO MANAGER”
Submitted in partial fulfillment of the requirements for the award of degree of

BACHELOR OF ENGINEERING
In
COMPUTER SCIENCE AND ENGINEERING
Submitted By

Nishanth Y
(1BY20CS126)

Under The Guidance of Under The Guidance of

Dr. Mahesh G Mr. Guruprasad Y K
Associate Professor Technical Advisor
Department of CSE Parheeksha Business Plugger

BMS INSTITUTE OF TECHNOLOGY AND MANAGEMENT

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

Avalahalli, Yelahanka, Bengaluru – 560064.

2023-2024
 VISVESWARAYA TECHNOLOGICAL UNIVERSITY
Jnana Sangama, Belagavi-590018

BMS INSTITUTE OF TECHNOLOGY &MANAGEMENT

YELAHANKA, BENGALURU-560064

DEPARTMENT OF COMPUTER SCIENCE &

ENGINEERING

CERTIFICATE

This is to certify that the internship work entitled “PORTFOLIO MANGER”

is a bonafide work carried out by Nishanth Y (1BY20CS126) in partial
fulfilment for the requirement of Bachelor of Engineering degree in
Computer Science and Engineering of Visvesvaraya Technological
University, Belagavi during the academic year 2023-24. It is certified that all
corrections/suggestions indicated for the internal assessment have been
incorporated in the report deposited in the departmental library.

Signature of the External Guide Signature of the Guide Signature of the HOD
Mr. Guruprasad Y K Dr. Mahesh G Dr. Thippeswamy G
Technical Advisor Associate Professor Professor & Head
Parheeksha Business Plugger Department of CSE Department of CSE
BMSIT & M BMSIT & M

Name of the Examiners Signature with Date

1.

2.
 DECLARATION

I hereby declare that the Internship report entitled “PORTFOLIO

MANAGER” submitted to the BMS Institute of Technology & Management,
Yelahanka, Bengaluru has been carried out by me and submitted in partial
fulfillment of the course requirements for the award of degree in Bachelor of
Engineering in Computer Science and Engineering of Visvesvaraya
Technological University, Belagavi, during the academic year 2023 - 2024. The
matter embodied in this report has not been submitted to any other university or
institution for the award of any other degree.

Signature of the Student

Nishanth Y
USN: 1BY20CS126
 ACKNOWLEDGEMENT
I am happy to present this report of the internship program. This Program would
not have been possible without the guidance, assistance, and suggestions of many
individuals. I would like to express my deep sense of gratitude and indebtedness to each
and every one who has helped during my internship program.

I express my heartfelt gratitude and sincere thanks to Dr. Sanjay H A, Principal

of BMSIT&M for his constant encouragement and inspiration.

I sincerely convey my thanks to Dr. Thippeswamy G, Head of the Department,

Computer Science and Engineering, BMSIT&M for his constant encouragement and
support.

I gracefully thank my Internal Guide, Dr. Mahesh G, Associate Professor,

Department of Computer Science and Engineering, BMSIT&M for his/her guidance,
support and advice.

I heartily thank my External Guide, Mr. Guruprasad Y K, Extern Guide for

Parheeksha Business Plugger his constant support, encouragement, and advice.

Finally, I would like to thank my parents, friends and all those who are involved in
successful completion of internship program.

Nishanth Y

(1BY20CS126)
Company Letter
 ABSTRACT

The "Portfolio Manager" project aims to develop a comprehensive platform using the MERN
(MongoDB, Express.js, React.js, Node.js) stack, enabling users to manage their portfolios
effectively. Users can edit their personal details, incorporate images for personalization, and
access a visually appealing interface for portfolio management.

The project faced challenges such as seamlessly integrating image uploading functionality
within the MERN architecture and implementing robust user authentication and
authorization using JSON Web Tokens (JWT). These challenges were overcome through
extensive research, leveraging libraries like Multer and Cloudinary, and implementing
secure authentication solutions.

The project leveraged RESTful APIs to facilitate communication between client-side and
server-side components, ensuring efficient data retrieval, manipulation, and storage.
MongoDB Cloud provided easy access to data through a connect URL.

Under the guidance of an experienced supervisor, the project fostered valuable learning
experiences in full-stack web development, enhancing proficiency in React.js, Node.js,
Express.js, MongoDB, user authentication, file handling, and RESTful API implementation.
Collaboration within a team environment fostered communication and project management
skills.

The "Portfolio Manager" project marks a significant milestone, offering insights,

experiences, and learning opportunities that will be applied to future software development
endeavors.
 Portfolio Manager 1

CHAPTER 1
ABOUT THE COMPANY

1.1 VISION OF COMPANY

Our vision is to be the premier provider of bespoke software solutions, empowering

businesses to thrive in the digital age through innovative websites and mobile applications.
We aspire to redefine the landscape of software development by delivering tailor-made
solutions that perfectly align with our clients' goals, driving growth, efficiency, and success
across industries.

1.2 OVERVIEW

Parheeksha is a website and mobile application development company specializing in

tailored solutions for each client's needs. Their experienced team of developers crafts
custom software solutions to meet specific customer goals. Parheeksha's services include
website design, mobile application development, software integration, database design,
content management systems, and more. With a dedication to client satisfaction and a
focus on innovation, Parheeksha delivers high-quality, personalized solutions to drive
success in the digital realm.

BMSIT&M, Dept CSE 2023-2024

 Portfolio Manager 2

CHAPTER 2
ABOUT THE DEPARTMENT

2.1 SOFTWARE DEVELOPMENT TEAM

The Developer is responsible for the actual building of the solution. The project team consists
of the full-time resources assigned to work on the deliverables of the project. This
includes the technical specialists, designers, programmers, etc. They are responsible for:
• Understanding the work to be completed.
• Planning the assigned activities in more detail if needed.
• Completing assigned work within the budget, timeline and quality expectations.
• Informing the project manager of issues, scope changes, risk and quality concerns.
• Proactively communicating status and managing expectations.

2.2 TEAM OBJECTIVE

Organization development is an ongoing, systematic process of implementing effective
organizational change. OD is known as both a field of science focused on understanding and
managing organizational change and as a field of scientific study and inquiry.
The objectives of Organizational development are:
• To increase the level of interpersonal trust among employees.
• To increase the employee’s level of satisfaction and commitment.
• To confront problems instead of neglecting them.
• To effectively manage conflict.
• To increase cooperation and collaboration among the employees.
• To increase the organization's problem solving.

BMSIT&M, Dept CSE 2023-2024

 Portfolio Manager 3

2.3 TEAM OPERATION

When a team is formed, it is extremely valuable to collocate the team into a project area.
This physical proximity of the team members will provide a number of benefits. It will allow
interpersonal relationships to develop more quickly leading to more effective and timely
communication of information.
This proximity will provide a greater opportunity for feedback and discussion of the design
requirements and design issues. Collocation facilitates better coordination and results
in less demanding infrastructure requirements (e.g., document distribution, meeting room
requirements, local area networks, workstation and software requirements, etc.). Finally, it
allows more rapid response to issues and enables processes and tasks.

2.3.1 PLANNING
In addition to organizing itself, one of the first steps in the development is to obtain a
thorough understanding of the task at hand. They need to understand the project objectives,
the specifications/customer requirements, design targets, cost, and schedule. This
information should be provided to the team(s) by the program manager or management team,
and the team(s) must thoroughly review these requirements.

2.3.2. TEAM BUILDING

As teams are formed, there is a need to recognize the interpersonal dynamics that exist in an
effort to make the team process effective. People assigned to the development team will
represent a variety of personalities and styles. The different perspectives that the people bring
to the team can enhance its vitality and creativit

BMSIT&M, Dept CSE 2023-2024

 Portfolio Manager 4

2.4 DEVELOPMENT PHASES

2.4.1 REQUIREMENT GATHERING AND ANALYSIS:
Business requirements are gathered in this phase. This phase is the main focus of the
project managers and stake holders. Meetings with managers, stake holders and users
are held in order to determine the requirements like; Who is going to use the system?
How will they use the system? What data should be input into the system? What data
should be output by the system?
These are general questions that get answered during a requirements gathering phase.
After requirement gathering these requirements are analyzed for their validity and the
possibility of incorporating the requirements in the system to be development is also
studied.

2.4.2 DESIGN
In this phase the system and software design is prepared from the requirement
specifications which were studied in the first phase. System Design helps in specifying
hardware and system requirements and also helps in defining overall system
architecture. The system design specifications serve as input for the next phase of the
model.

2.4.3 IMPLEMENTATION
On receiving system design documents, the work is divided in modules/units and actual
coding is started. Since, in this phase the code is produced so it is the main focus for the
developer. This is the longest phase of the software development life cycle.

2.4.4 TESTING
After the code is developed it is tested against the requirements to make sure that the
product is actually solving the needs addressed and gathered during the requirements
phase.

BMSIT&M, Dept CSE 2023-2024

 Portfolio Manager 5

CHAPTER 3

TASK PERFORMED/INTERNSHIP ACTIVITIES

3.1 DOMAIN TRAINING

Domain training refers to the process of acquiring knowledge and skills specific to a
particular domain or industry. It is an essential aspect of professional development, enabling
individuals to gain expertise in their chosen field and stay up-to-date with the latest trends,
technologies, and best practices.
Advantages of using the MERN stack:
Full-stack JavaScript: The MERN stack utilizes JavaScript for both front-end and back-
end development, allowing developers to leverage a single programming language across
the entire stack. This consistency reduces the learning curve and promotes code reusability,
leading to increased productivity and efficiency.
Modular Design: Each component of the MERN stack (MongoDB, Express.js, React.js,
and Node.js) is designed to be modular and interoperable. This modular approach allows
developers to choose specific tools and libraries based on project requirements, enabling
flexibility and customization.
Scalability: The MERN stack is well-suited for building scalable applications. MongoDB,
a NoSQL database, can handle large volumes of data and provides horizontal scalability.
Node.js, with its non-blocking I/O model, enables high-performance and scalable server-
side applications.
Rich Ecosystem: The MERN stack benefits from a vast and active community of
developers, which contributes to a rich ecosystem of libraries, tools, and resources. This
ecosystem facilitates rapid development, promotes code reuse, and provides access to a
wealth of community-driven solutions and best practices.
Isomorphic/Universal Rendering: React.js supports isomorphic or universal rendering,
which allows rendering the same code on both the client and server sides. This feature
improves performance, enhances search engine optimization (SEO), and provides a
seamless user experience.

BMSIT&M, Dept CSE 2023-2024

 Portfolio Manager 6

Fig 3.1:MERN Architecture

Rapid Development: The MERN stack leverages JavaScript, a high-level programming

language known for its versatility and ease of use. Combined with the extensive tooling and
libraries available, the MERN stack enables rapid development and prototyping, allowing
developers to iterate quickly and bring ideas to life faster.
Real-time Applications: The MERN stack is well-suited for building real-time
applications, such as chat applications, collaborative tools, and online gaming platforms.
Node.js, with its event-driven architecture, and technologies like WebSockets and
Socket.IO, facilitate efficient real-time communication between clients and servers.

By leveraging the advantages of the MERN stack, developers can build robust, scalable, and
high-performance web applications while benefiting from a consistent development
experience, a rich ecosystem, and a vibrant community of contributors.

BMSIT&M, Dept CSE 2023-2024

 Portfolio Manager 7

3.2 ABOUT PORFOLIO MANAGER PROJECT

The primary aim of the "Portfolio Manager" project is to provide users with a
comprehensive platform where they can effectively manage their portfolios. The key
objectives of the project are:
• Enable users to edit and update their personal details, including the ability to
incorporate images for personalization.
• Offer a user-friendly and visually appealing interface for users to view and manage
their portfolios.
• Implement secure user authentication and authorization mechanisms to ensure data
privacy and access control.
• Facilitate seamless communication between the client-side and server-side
components through RESTful APIs.
• Leverage the power of the MERN (MongoDB, Express.js, React.js, Node.js) stack
for efficient development and scalability.

Standards of the Project:

• Technology Standards:
o Adherence to the MERN stack principles and best practices.
o Utilization of industry-standard libraries and frameworks, such as Multer
for file uploads, Cloudinary for image management, and JSON Web Tokens
(JWT) for authentication and authorization.
o Implementation of RESTful API architecture for communication between
client and server components.
o Adoption of secure coding practices and data protection measures.
• Development Standards:
o Follows coding conventions and style guides for consistent and
maintainable codebase.
o Implements modular design principles for better code organization and
reusability.
o Adheres to version control practices using a distributed version control
system like Git.
o Incorporates testing strategies, such as unit testing and integration testing,
to ensure code quality and functionality.
BMSIT&M, Dept CSE 2023-2024
 Portfolio Manager 8

• User Experience Standards:

o Provides a user-friendly and intuitive interface for portfolio management.
o Ensures responsiveness and accessibility across various devices and
platforms.
o Implements error handling and validation mechanisms for smooth user
interactions.
o Follows design principles and guidelines for visual appeal and consistent
branding.
• Project Management Standards:
o Follows an agile or iterative development methodology for efficient project
planning and execution.
o Incorporates collaboration and communication practices within the
development team.
o Adheres to project documentation standards for effective knowledge
transfer and maintenance.
o Implements version control and release management procedures for
organized deployments.

3.3 PROJECT REQUIREMENTS

Software Requirements

Ø Software: VS Code IDE

Ø Language Preferred: MongoDB, ExpressJS, JavaScript
Ø App Development Framework: ReactJS

Hardware Requirements

Ø Processor: Intel Pentium dual core onwards Compatible Hardware.

Ø Platform: Web Browser

Ø Keyboard: Standard QWERTY Keyboard

BMSIT&M, Dept CSE 2023-2024

 Portfolio Manager 9

3.4 SYSTEM DESIGN:

FIG 3.2: SYSTEM DESIGN

The system follows a client-server architecture, where the client-side is built with React.js,
and the server-side is powered by Node.js and Express.js. MongoDB is used as the database
for storing user data and portfolio information.

Client-side (React.js):
• The user interface (UI) is developed using React.js, providing a responsive and
interactive experience for users to manage their portfolios.
• React components are organized into reusable and modular structures, promoting
code reusability and maintainability.
• React Router is used for client-side routing, enabling seamless navigation between
different views and pages of the application.
• State management is handled using React's built-in state management or a third-
party library like Redux or Context API, depending on the project's complexity.
• Axios or another HTTP client library is used to communicate with the server-side
API endpoints for data fetching and updating.

Server-side (Node.js and Express.js):

• The server-side application is built with Node.js and Express.js, providing a
lightweight and scalable backend architecture.
• Express.js is used for creating RESTful API endpoints, handling HTTP requests,

BMSIT&M, Dept CSE 2023-2024

 Portfolio Manager 10

and responding with JSON data.

• User authentication and authorization are implemented using JSON Web Tokens
(JWT), ensuring secure access to protected routes and resources.
• Middleware functions are employed for tasks such as request validation, error
handling, and logging.
• Integration with MongoDB is established using a MongoDB driver or an Object-
Data Mapping (ODM) library like Mongoose, facilitating data storage and retrieval
operations.
Database (MongoDB):
• MongoDB, a NoSQL database, is used for storing user data, portfolio information,
and any other relevant data required by the application.
• MongoDB's flexible schema design allows for easy adaptation to changing data
requirements.
• Cloud-hosted MongoDB services like MongoDB Atlas or mLab can be utilized for
scalability and reliabil

BMSIT&M, Dept CSE 2023-2024

 Portfolio Manager 11

3.5 SCREENSHOTS

Fig 3.3 Landing Page

Fig 3.4 Sign Up Page

BMSIT&M, Dept CSE 2023-2024

 Portfolio Manager 12

Fig 3.5 Sign In page

Fig 3.6 Dashboard Page

BMSIT&M, Dept CSE 2023-2024

 Portfolio Manager 13

Fig 3.7 Edit Profile Details.

Fig 3.8 Portfolio Page

BMSIT&M, Dept CSE 2023-2024

 Portfolio Manager 14

CHAPTER 4
SPECIFIC OUTCOMES

4.1 TECHNICAL OUTCOMES

I got the practical knowledge of the advanced JavaScript (HTML, CSS) concepts. I
underwent advanced Database work training session for Four weeks, which has increased
the depth of practical knowledge. Periodical interaction with the manager was carried out so
as to provide updates on the work that was done by me.
The assigned tasks were completed on time. During the internship training I learnt about new
Technologies used and how to use in projects. Some of the them are:
4.1.1. Full-stack Web Development: The project provided hands-on experience in full-
stack web development using the MERN (MongoDB, Express.js, React.js, Node.js) stack.
Developers gained proficiency in building end-to-end web applications, integrating front-
end and back-end components.
4.1.2. User Authentication and Authorization: Implementing secure user authentication
and authorization mechanisms using JSON Web Tokens (JWT) and role-based access
control (RBAC) was a significant technical outcome. Developers learned best practices for
protecting user data and managing access permissions.
4.1.3. File Handling and Image Management: The project involved incorporating image
uploading functionality, which required expertise in file handling and image management.
Developers leveraged libraries like Multer and Cloudinary to handle file uploads and storage
efficiently.
4.1.4. RESTful API Development: Building RESTful APIs using Express.js was a crucial
technical outcome. Developers learned how to design and implement API endpoints for data
retrieval, manipulation, and communication between client and server components.
4.1.5. Database Management: Working with MongoDB, a NoSQL database, allowed
developers to gain experience in data modeling, querying, and managing unstructured data
effectively.
4.1.6. Front-end Development with React.js: Developing the user interface using React.js
provided exposure to modern front-end development techniques, such as component-based
architecture, state management, and client-side routing

BMSIT&M, Dept CSE 2023-2024

 Portfolio Manager 15

4.2 NON-TECHNICAL OUTCOMES

The Internship program helped me in gaining self-confidence over the technical language
and also the communication on how to interact with the teammates. The project coordinators
were so helpful in teaching. This made me learn many things easily and effectively.
4.2.1. Problem-Solving and Critical Thinking: Overcoming challenges during the
development process fostered problem-solving and critical thinking skills. Developers
learned to analyze requirements, identify potential issues, and devise effective solutions.
4.2.2. Collaboration and Teamwork: Working in a team environment promoted
collaboration and teamwork skills. Developers learned to communicate effectively,
coordinate tasks, and leverage each other's strengths to achieve project goals.
4.2.3. Time Management and Project Planning: Adhering to project timelines and
managing tasks effectively required developers to enhance their time management and
project planning abilities.
4.2.4. Communication and Presentation Skills: Presenting the project, its objectives, and
learning outcomes helped developers improve their communication and presentation skills,
which are crucial in professional settings.
4.2.5. Adaptability and Continuous Learning: Encountering new technologies, tools,
and methodologies during the project encouraged adaptability and a mindset of continuous
learning, which are essential for staying relevant in the ever-evolving software industry.
4.2.6. Professional Growth and Confidence: Successfully completing the project and
overcoming challenges boosted developers' confidence and professional growth. They
gained a sense of accomplishment and readiness to take on more complex projects in the
future.

BMSIT&M, Dept CSE 2023-2024

 CONCLUSION

The "Portfolio Manager" project, developed using the MERN (MongoDB, Express.js,
React.js, Node.js) stack, has been a significant milestone in the journey of full-stack web
development. It has provided a comprehensive platform for users to effectively manage their
portfolios, allowing them to edit their personal details and incorporate images for
personalization.

Throughout the development process, various challenges were encountered, including

seamlessly integrating image uploading functionality and implementing robust user
authentication and authorization mechanisms. However, these challenges were overcome
through extensive research, leveraging industry-standard libraries and frameworks, and
employing secure coding practices.

The project leveraged the strengths of the MERN stack, enabling efficient data retrieval,
manipulation, and storage through RESTful APIs and MongoDB. The client-side user
interface, built with React.js, offered a visually appealing and user-friendly experience for
portfolio management.

Beyond the technical aspects, the project fostered valuable learning experiences in full-stack
web development, enhancing proficiency in React.js, Node.js, Express.js, MongoDB, user
authentication, file handling, and RESTful API implementation. Collaboration within a team
environment cultivated important soft skills such as communication, project management,
and problem-solving.

Looking ahead, the knowledge and skills acquired during the "Portfolio Manager" project
will serve as a solid foundation for future endeavors in software development. The
experience gained in overcoming challenges, leveraging technologies, and adhering to
industry standards will be invaluable in tackling more complex projects.
 REFERENCE

[1] "Getting MEAN with Mongo, Express, Angular, and Node" by Simon Holmes and
Clive Harfield (Book)
[2] "React Quickly" by Azat Mardan (Book)
[3] https://www.mongodb.com/docs/manual/ (MongoDB Documentation)
[4] https://expressjs.com/en/guide/routing.html (Express.js Routing Guide)
[5] https://reactjs.org/docs/getting-started.html (React.js Documentation)
[6] https://nodejs.org/en/docs/ (Node.js Documentation)
[7] https://jwt.io/introduction (JSON Web Tokens Introduction)
[8] https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
(Fetch API Documentation)
[9] https://redux.js.org/introduction/getting-started (Redux Getting Started Guide)
[10] https://www.smashingmagazine.com/2021/08/mern-stack-react-router-guides/
(MERN Stack with React Router Guides)
[11] Pro MERN Stack" by Vasan Subramanian (Book)
[12] "Full Stack React Projects" by Shama Hoque (Book)
[13] https://www.freecodecamp.org/news/mern-stack-react-node-tutorial/ (MERN Stack
Tutorial on FreeCodeCamp)
[14] https://www.smashingmagazine.com/2020/04/mern-stack-react-serverless-intro/
(MERN Stack with Serverless Introduction)
[15] https://github.com/gothinkster/react-redux-realworld-example-app (Real-World React
Redux Example App)
[16] https://www.pluralsight.com/courses/react-redux-react-router-es6 (Pluralsight Course
on React, Redux, and React Router)
[17] https://www.mongodb.com/developer/article/mongodb-schema-design-best-
practices/ (MongoDB Schema Design Best Practices)