Module Portfolio Assessment Type

Collaborative Development (5CS024) 1 Individual Report

[Library Management System Developer (Frontend)]

Student ID: 2226422
Student Name: Sudan Shakya
Section: L5CG1
Group: E
Role : Developer
Instructor : Sujan Kharel
Submitted on : 2023-04-02
Word Count : 1832

Lecturer: Mr. Biraj Dulal

Acknowledgement

I would like to express my utmost gratitude to my lecturer Mr. Biraj Dulal and my tutor
Sujan Kharel for their time and effort that they gave me to complete this report. Their
guidance, ideology and experience really helped me to complete this task on time. I
would also like to thank Herald College Kathmandu for providing perfect learning
environment and places where I could code and learn with ease.
Table of Contents

Self-Development form ......................................................................................................... 1

Personal objectives – performance evaluation ................................................................... 1
Evidence of good collaboration ........................................................................................... 2
File communication and file sharing.................................................................................... 2
Issue tracking ..................................................................................................................... 3
Appendix A ......................................................................................................................... 4
Appendix B ........................................................................................................................12
References ........................................................................................................................23
Self-Development form
Student 2226422 Name Sudan Shakya
number
Project Library Management Date 2023/04/02
System
Role Software Developer Team L5CG1 (Group E)

Sprint (1 or 2) 1

Personal objectives – performance evaluation

Objectives Evidence provided Evaluation

Student /
tutor
Choosing for the For this project, our Team have discussed to use 9
appropriate ReactJS framework for the frontend design where
technologies Chakra UI is used for the most of the designing
task. For the State management and API calls, we
have used Redux Toolkit. On the backend, we
have decided to use NodeJS which express as its
framework. For the database, we have used
Mongo DB and for the ORM we have used
mongoose as it is much more compatible with
Mongo DB.
Appendix A
Tutor feedback:

1
 Implementing I have written frontend code to send and get the 9.5
functional data from the database using API which are
requirements developed by the backend developer. For the
version control of the code I have used git and
have uploaded to GitHub.

Tutor feedback:

/18. /20
5

Evidence of good collaboration

File communication and file sharing

As for the communication with the team, we have communicated with each other on
the Basecamp for most of the official and important changes. For the minor discussion
we have used messenger. All the documents and files of the project are uploaded on
the basecamp as well.

Evidences of Good communication and file sharing

Continuing Personal Development (CPD)

For this project, the choosing of technology taught me there are many technologies for
the web development. From there, I learned how the React components work. I learned
how to use the Redux tool kit library work. For the backend, I have also learned basic
of the Node.js such as developing basic APIs.
Evidences of Continuing Personal Development (CPD)
Appendix B

2
 Issue tracking

Regarding the issues tracking, the team have created several bugs and features
issues in the repository of the GitHub. After understanding the issues, I have solved
the problem and committed my works on the GitHub.

Issue tracking

3
 Appendix A

1. Choosing for the appropriate technologies

For the technology to select, there are many frameworks to be used in this modern web era.
Using vanilla JavaScript to maintain the website is too time consuming and very difficult to
maintain. So in order to make developer easy to use we use different framework. In the
current scenario, some of these best frameworks for frontend development are React, Vue
and Angular. Beside these framework some of the other interesting and uprising frameworks
are Svelte, Qwik and Solid. React is one of the best tool for the developing single page
application and the support library for this framework is really vast, we can find tons of
libraries that can help us to build the application quickly. (Hiren, 2022) Angular have steep
learning curve but is used to make large scaled apps. After selecting the React framework,
we need to choose a UI library there are options such as Material UI, Chakra UI, Ant Design,
and React Bootstrap and so on. Material UI is the most popular library but for me the
documentation of Chakra UI was better. At the backend there were much more options to
choose as many languages are used for this purpose. PHP, Python, Java, C#, Ruby,
JavaScript are some of the languages that are widely used for the web development. Python
with the framework such as Flask, Django helps to develop backend at ease. Java is OOP
language which is widely used to make industry language and when framework such as
Spring is used it really helps to build the backend development. PHP is one of the oldest
backend software specially made for the backend development. Despite all the languages
mentioned above, I have chosen JavaScript at backend as well due to its popularity at the
current time and the supportive community found on the internet. Node Js allows developer
to run JavaScript code in OS level. Express JS is one of the most loved framework for the
Node Js which is used to make APIs with ease. (Kaarle, 2021)

Moving to the database to choose from there are many options but it comes down to SQL
or No SQL. SQL are the primitive databases which have been for decades and are used
everywhere. (Cody, 2023) SQL such as PostgreSQL, MySQL, Maria DB and so are great
options but for this project I wanted to try No SQL (Mongo DB) as it was easy to change the
data or Schema when needed and would have brought less error than the SQL database.
Mongo DB supports JSON data which is best while using node at the backend. (Ravikiran,
2023)

4
 2. Implementing practical requirement.

Codes and its explanation

Figure 1: route management

Here I have defined the routes for the browser, when the use that path a certain React component is
rendered. I have created path for both User and Admin for now and a page that renders h1 tag of 404
when users goes to the path that does not exist.

5
Figure 2: login logic

Here is the logic for the login of the user or admin, the useLoginMutation hook allows
us to make an API call. The useCooskies hook is used to setCookies on the browser.
The use Form Hook allows us to submit the data from the form which follows the
type of login Payload. After getting the data we dispatch it to store the data locally.
And then we navigate to either admin or home depending upon the user.

6
Figure 3: book registration

In the above program, I have used useParams hook in order to get the id of the book that we are trying to
edit. The postBook and updateBook are the function used to make POST request and UPDATE request
to the server. After making request if the process was success then a toast (alert) a popped up.

7
Figure 4: admin and user route

In the above code, I have created a route that check if the use is admin or user depending upon those
factor, we provide each with different route which allows them to do their own defined actions. Also I have
used local storage to get the authentication data and cookies as well to verify the user.

8
 Use of Version control (Screenshots of logs)

Figure 5: git log

This is the git log history where I have committed in the local repository.

9
Figure 6: github commit

These are the commit history in the frontend repository of the project in the Git Hub.

10
Figure 7: github repository

Repository in the GitHub where the code is accesed by everyone this repository is also shared by
my team members as well.

11
 Appendix B

1. Evidences of Good communication and file sharing

Figure 8: file sharing in basecamp

All the documents that are shared during our first sprint are shown above, we can see all the diagrams ,
codes and wireframes present there.

12
Figure 9: communication with team-1

13
Figure 10: communication with team-2

The above two pictures show the communication with my teammates I had on the basecamp where we
discussed our task and presented our views on the project.

14
Figure 11: to-dos

Above is the to-do page of the basecamp where the project manager have created all the to-do task where
we have ticked all the completed task of the sprint 1.

Figure 12: invitation github

15
Figure 13: github team

In the above picture, I have invited my friends for the collaboration on the GitHub.

16
Figure 14: unofficial discussion

This is our unofficial messenger group where we talk about minor errors and have casual conversation.
Where I have giving them brief description of error that is occurring as well as checking on the UI of the
project.

17
18
 2. Evidences of Continuing Personal Development (CPD)

In the sprit 1 we have chosen the MERN stack development, I was mostly doing the frontend task where
I learned basic and advance concept of the React. I had the basic idea of how the React works from my
some basic projects I did on my spare time. But in this project I have learned other advance concepts of
the React where I have used Redux Toolkit for the Stage-management and API calls. These are totally
new topics for me and learning them were really big help for me.

https://frontendmasters.com/courses/complete-react-v8/wrapping-up/

Figure 15: react course completion

The above course helped me learn basic of React.

https://frontendmasters.com/courses/git-in-depth/wrapping-up-git-in-depth/

19
Figure 16: git course completion

This course allowed me to learn git from the basic where I learned the working mechanism of the git.

Beside these courses I also learned basic of Node.JS so that I could help my backend developer when
needed. I learned how to design an api and use them to change the database.

Figure 17: react documentation

20
React Beta docs was lifesaver for me because it is the one that is updated with the latest trend in the
React. The other official docs was outdated and was complex to learn as well.
https://www.youtube.com/watch?v=30LWjhZzg50&t=6598s
The above YouTube link taught me the typescript which helped me learn why to use typescript and how
to write typescript.
https://chakra-ui.com/
The documentation of the chakra ui was well made and helped to make UI much easily. Since I had the
knowledge of CSS it was not difficult to use the Chakra UI as well.

21
 3. Evidences of Issue tracking

Figure 18: issue tracking-1

Figure 19: issue tracking-2

22
Figure 20: issue tracking-3

Above images shows the issues that have been created in my repository by me and my
team where we have found out the bugs and fixed them.

References
Cody, A., 2023. The Pros and Cons of 8 Popular Databases. [Online]
Available at: https://www.keycdn.com/blog/popular-databases
[Accessed 30 march 2023].
Hiren, D., 2022. Best Frontend Frameworks for Web Development in 2023. [Online]
Available at: https://www.simform.com/blog/best-frontend-frameworks/
[Accessed 31 march 2023].
Kaarle, V., 2021. The Most Popular React UI Component Libraries. [Online]
Available at: https://www.sitepoint.com/popular-react-ui-component-libraries/
[Accessed 30 March 2023].

23
Ravikiran, A. S., 2023. Your Guide To The Best 8 Backend Languages For 2023. [Online]
Available at: https://www.simplilearn.com/tutorials/programming-tutorial/backend-languages
[Accessed 30 march 2023].

24
25