Raise Rally Crowding Funding

Service-Developer

Module Portfolio Assessment Type

Collaborative Development (5CS024) 2 Individual Report

Student ID: 2358554

Student Name: Sabin Chaulagain

Section: L5CG17

Group: L5CG17 Group 4

Tutorial: Nuraj Rajbhandari

Total word Count:2414

Acknowledgement:

I would like to express my sincere gratitude to Mr. Nuraj Rajbhandari for his
invaluable guidance and support during the learning process of collaborative
work and efficient usage testing our work being a client. His expertise and
insights have greatly enriched my understanding and skills in this subject.
Contents
1. Self-appraisal form............................................................................................. 1
1.1Personal objectives – performance measurement.........................................1
2. Collaboration Document................................................................................. 3
2.1. Evidence of good collaboration:...............................................................3
2.2. CPD (Continuing Professional Development)...........................................3
2.3. Issue Tracking.......................................................................................... 3
2.3. Work to deadlines.................................................................................... 4
3. Appendix A...................................................................................................... 5
3.1 Implementing Functional requirements........................................................5
3.2. Use of Version Control............................................................................... 11
3.3. Bug Fix...................................................................................................... 14
4. Appendix B................................................................................................... 16
4.1. Evidence of Good communication and File Sharing...................................16
4.2. Evidence of CPD (Continuous Personal Development)..............................18
4.3. Issue Tracking in Jira..............................................................................20
References........................................................................................................... 25

Table of Figures:

Figure 1:Profile Update Admin............................................................................... 5

Figure 2:Profile Update Backers.............................................................................6
Figure 3:Backer Dashboard................................................................................... 7
Figure 4:Product Dashboard.................................................................................. 8
Figure 5: Company Performance........................................................................... 9
Figure 6:Commit.................................................................................................. 11
Figure 7:PRs......................................................................................................... 12
Figure 8:Git-Log................................................................................................... 13
Figure 9:Bug on Registration page......................................................................14
Figure 10:First Bug Solved.................................................................................. 14
Figure 11:Second Bug Fixed................................................................................ 15
Figure 12: Bug Completed................................................................................... 15
Figure 13: Good Collaboration between Developer.............................................16
Figure 14: Good Collaboration with all members of team....................................17
Figure 15:Stand-Up meeting................................................................................17
Figure 16:CPD with Solo-learn............................................................................. 18
Figure 17: CPD from Youtube..............................................................................19
Figure 18: CPD with Documentation....................................................................20
Figure 19: Issue Solved in Jira..............................................................................20
Figure 20:Issue solved in Git-hub........................................................................21
Figure 21: Issue in Company Description............................................................22
Figure 22: Company Description height fixed......................................................23
Figure 23: Sprint Retrospective...........................................................................24
 1.Self-appraisal form
Student id 2358554 Name Sabin Chaulagain

Project title: Raise Rally Crowding Date 2024/05/20

Funding Service

Role Developer Team L5CG17 (Group 4)

Sprint (1 or 2) Second sprint

1.1Personal objectives – performance measurement

Objectives Evidence provided Evaluation

Student /
tutor

As the second sprint commenced, the volume of 8

functional requirements increased substantially.
1. Implementi Both frontend and backend developers
ng immediately initiated their tasks. For frontend
functional development, we adopted a self-assignment
requirement approach, considering the need for extensive
data discussion. Once tasks were completed, we
diligently pushed the code to the feature branch
for testing. Throughout this process, we,
alongside our Business Analyst (BA) and
backend developer, handled all aspects of the
work. Leveraging Git Bash, we successfully
managed code pushes to GitHub, ensuring
seamless collaboration and version control. This
streamlined workflow empowered us to efficiently
address project requirements while maintaining
effective communication and coordination among
team members.

Evidence for the functional requirement fulfillment

and version controlling is given on below link:

Appendix A

Tutor feedback:

1) Bug fixing Initially, as front-end developers, we opted not to 8.5

run our web application, assuming our familiarity
with it. Instead, our Business Analyst (BA) took
charge and ran the web application, identifying

1
 several bugs and errors. Upon discovery, we
engaged in a collaborative effort to address these
issues. We either resolved the bugs ourselves or
referred to Bootstrap and React-Vite
documentation for guidance. After successfully
resolving each bug, we meticulously prepared the
code and pushed it to our Git repository for
version control. Subsequently, our BA conducted
further testing to ensure bug resolution. This
process not only included addressing technical
issues but also involved refining grammar and
enhancing overall code clarity.

Evidence for the bug fixing:

Tutor feedback:

3) Various mediums such as Slack, Gmail Chat, and 13

Google Meet facilitated effective collaboration
within our team. Google Meet served as our
primary communication tool for conducting daily
stand-up meetings, ensuring regular updates and
alignment among team members. On the other
hand, Google Chat was utilized for exchanging
text messages, providing a convenient platform
for quick communication and task coordination.

Evidence for the good collaborations:

Appendix B

Tutor feedback:

4) Sprint- All the members of our teams besides PM we 5

Retrospective have completed sprint-2 retro.

Appendix C

Tutor feedback:

/40 /40

2
 2. Collaboration Document
2.1. Evidence of good collaboration:
In the absence of our Project Manager (PM) and with minimal involvement from
them, the frontend developers encountered a significant challenge during the
second sprint: the lack of wireframes, typically the responsibility of the Business
Analyst (BA). Despite this obstacle, we persevered and successfully completed
sprint 2 within the designated timeframe. This achievement was made possible
through the collaborative efforts of the BAs, backend developers, and frontend
developers. Despite the absence of wireframes, effective collaboration and clear
task delegation from both backend and frontend developers ensured our
progress.

Utilizing Google Meet for daily stand-up meetings, along with Slack and Google
Chat for ongoing communication, proved instrumental in addressing any
emerging issues or facilitating discussions among team members. Despite the
challenges posed by the absence of wireframes and limited PM involvement, our
collective determination and coordinated efforts enabled us to successfully
navigate sprint 2 and deliver on our objectives.

2.2. CPD (Continuing Professional Development)

Continuing professional development (CPD) is crucial for staying updated and
enhancing skills in the ever-evolving field of web development. To facilitate this, I
rely on various resources such as YouTube video tutorials, documentation from
official sources like React, Bootstrap, and Axios, and interactive learning
platforms like Solo-Learn. When encountering challenges, I first consult the
relevant documentation to gain insight into the problem and potential solutions.
For instance, if I encounter issues with Axios, I refer to its documentation to
understand its usage and troubleshoot errors effectively. Additionally, I utilize
YouTube tutorials to grasp complex concepts visually and receive practical
demonstrations. If I encounter persistent bugs, I revisit the documentation to
delve deeper into the underlying concepts and identify potential solutions.
By leveraging these resources in a systematic manner, I ensure continuous
learning and proficiency in web development practices.

2.3. Issue Tracking

During sprint 2, as a frontend developer, I faced numerous challenges related to
dashboard management for various user roles such as admin, backers, and
company users. The primary focus was on efficiently retrieving and displaying
personalized information for each user from the API endpoints. However, I
encountered difficulties with the API endpoints, particularly when retrieving user
details through GET requests and updating user information via PATCH requests.
In such instances, I relied on troubleshooting techniques and utilized tools like

3
Postman to analyze the API responses and identify potential issues. This
approach helped me gain insights into the underlying problems and effectively
manage the information flow between the frontend and backend systems. By
leveraging Postman for API testing and debugging, I could verify the correctness
of API calls and ensure seamless integration with the frontend dashboard.
Overall, despite encountering challenges, actively troubleshooting, and utilizing
tools like Postman facilitated the resolution of issues and enabled smooth
management of user information within the dashboard.

2.3. Work to deadlines.

During sprint 2, our team encountered various hurdles, notably time constraints
and the absence of wireframes from the business analyst (BA). Despite these
challenges, as a frontend developer, I collaborated closely with both the backend
team and another frontend colleague to ensure we met our deadlines. The
unexpected health issues of our project manager (PM) posed additional
challenges, leading to increased responsibilities for our BA. However, we adapted
swiftly and supported each other effectively throughout the sprint. By
maintaining open communication and leveraging our combined skills and
expertise, we successfully navigated through the obstacles and completed sprint
2 on schedule. Our ability to overcome these challenges highlights the strength
of our teamwork and our unwavering commitment to delivering top-notch
results, even in the face of adversity. Furthermore, the extensive documentation
available for tools like Axios, Bootstrap, and React-Vite played a crucial role in
facilitating our frontend development tasks and contributed significantly to our
successful completion of sprint 2 on time.

4
3. Appendix A
3.1 Implementing Functional requirements.
As in Functional Requirements in Jira I was assigned for dashboard management
for backers, admin and company.

Figure 1:Profile Update Admin

Description: The ProfileUpdate_admin component is a React functional

component that handles profile updates for admin users. It utilizes useState and
useEffect hooks for state management and side effects. Upon initialization, it
fetches admin user details via an HTTP GET request using the user's email ID.
The component renders input fields for username, old password, and new
password, with validation for the latter. It updates the profile via an HTTP PATCH
request and displays form errors as needed, providing an efficient and user-
friendly admin profile update interface.

5
 Figure 2:Profile Update Backers

The ProfileUpdate_backers component facilitates updating backer user profiles in

React. It employs React hooks like useState and useEffect for state management
and side effects. Upon component initialization, it retrieves backer details via an
HTTP GET request. User inputs for old and new passwords are validated against a
regex pattern. Profile updates trigger PATCH requests to the backend API. The UI
dynamically responds to loading states and displays form errors when necessary.

6
 Figure 3:Backer Dashboard

The BackerDashboard component utilizes React and Axios to fetch backer details
and funded projects from a backend API. It dynamically renders project cards
with key information like name, description, goal amount, status, and dates.
Through the "View Details" option, users can access further project information.
The component ensures efficient data fetching and presentation, enhancing user
experience in managing and tracking funded projects. Its implementation
reflects a seamless integration of frontend and backend functionalities, providing
users with a comprehensive view of their project contributions and statuses.

7
 Figure 4:Product Dashboard

The BackerDashboard component in React is designed to display funded

products associated with a backer. It utilizes custom hooks to fetch backer
details and contributions from the backend API based on the user's email. The
fetched data is then processed to retrieve relevant product information and
displayed in a table format. Additionally, it features a search functionality for
filtering products based on user input. This component facilitates efficient
management and viewing of funded products for backer users.

8
 Figure 5: Company Performance

The CompanyPerformance component in React is responsible for displaying the

performance metrics of a company's products. It fetches product data from the
backend API and calculates total goal amount, total raised amount, and total
products. Users can search for specific products using the search bar, which
dynamically filters the displayed products. The component presents performance
metrics in a visually appealing manner and provides detailed information about
each product in a table format.

9
The Company_Moderate component in React serves as a moderation interface
for managing company data. It integrates functionalities for searching
companies, toggling their active and verified statuses, and displaying them in a
tabular format. Upon entering a search query, the component dynamically
updates the displayed companies based on the search term, leveraging Axios for
making asynchronous HTTP requests to fetch and update data from the backend
API. The useEffect hook ensures that the component fetches data upon
initialization and whenever the search term changes, optimizing user experience
by minimizing unnecessary network requests. Additionally, the component
utilizes useState to manage local state variables such as the search term,
loading status, and fetched company data, ensuring efficient state management
and rendering. The handleToggleActive and handleToggleVerified functions
enable administrators to modify company attributes such as active and verified
statuses, triggering PATCH requests to update the backend accordingly. By
providing a comprehensive moderation interface, the Company_Moderate
component facilitates efficient company management and moderation tasks,
enhancing the overall usability and functionality of the application.

I successfully completed the other functional requirements within the

designated timeframe, as evidenced by my commits. These commits
demonstrate my dedication to meeting project milestones and delivering
on time. By adhering to the project schedule, I ensured that all essential

10
features were implemented efficiently and effectively, contributing to the
overall progress and success of the project.

3.2. Use of Version Control : Version control was employed to

enable smooth communication and file exchange between the project
manager (PM), business analyst (BA), and frontend and backend
developers. We kept track of, controlled, and synchronized all project files
and code changes in a single repository by utilizing version control tools
like Git. This approach made sure that all project participants had access
to the most recent information, facilitating efficient team coordination,
communication, and collaboration. Version control also made it possible
for us to have an accurate record of project development, track changes,
and manage conflicts—all of which improved responsibility and openness
throughout the development process.

11
 Figure 6:Commit.

Figure 7:PRs

Pull Requests (PRs) are essential components of the collaborative development

process in version control systems like Git. They represent proposed changes to
a codebase and facilitate code review, feedback, and integration into the feature
branch for testing. In the provided image, each PR likely corresponds to a
specific set of changes or feature implementation. By creating and merging PRs,
you've contributed to the project's development and ensured that your code
undergoes review and validation by peers before being merged into the main
codebase.

12
 Figure 8:Git-Log

The log in the picture shows the steps you took while working on Pull Requests
(PRs). It includes things like when you made the PRs.

13
3.3. Bug Fix

Figure 9:Bug on Registration page

In Sprint 1, I addressed a bug on the registration page where the company

description box kept expanding uncontrollably. I resolved this by limiting its size
and added an admin checkbox to allow guest users to become admins. In Sprint
2, I removed the admin checkbox since guest users automatically gained admin
privileges, ensuring a smoother user experience.

Figure 10:First Bug Solved

14
This was the first bug, and I, solved the bug on time.

Figure 11:Second Bug Fixed

Figure 12: Bug Completed

During the testing phase led by our BA, a bug was identified in our web
application, which I hadn't initially noticed. After being reminded by the BA, I
referred to the Bootstrap documentation to resolve the issue. This proactive
approach enabled me to swiftly address the bug and ensure the smooth
functioning of our application.

15
4. Appendix B
4.1. Evidence of Good communication and File Sharing

Figure 13: Good Collaboration between Developer

16
Figure 14: Good Collaboration with all members of team.

Figure 15:Stand-Up meeting.

17
4.2. Evidence of CPD (Continuous Personal
Development)

Figure 16:CPD with Solo-learn

18
Figure 17: CPD from Youtube

19
 Figure 18: CPD with Documentation

4.3. Issue Tracking in Jira

Figure 19: Issue Solved in Jira

20
Figure 20:Issue solved in Git-hub

21
Figure 21: Issue in Company Description

22
Figure 22: Company Description height fixed.

23
5. Appendix C
Sprint Retrospective

Figure 23: Sprint Retrospective

References
https://vitejs.dev/guide/api-plugin.html

24
https://axios-http.com/docs/api_intro

https://www.youtube.com/watch?v=siTUv1L9ymM

25