Capstone Project

Front End (React)

Issue Tracker

[CP-FER-002]

Page Break
REVISION HISTORY

Date sion Description Author

r-09-2021 .0 Initial Version ont End (React) team

Page Break
 ● (If not done already) è Before starting the assignment, do the following.
a. Create a folder Batch-18_FED-React in your “Wipro OneDrive”.
b. Under the above created folder, create the folder as mentioned below
■ CapstoneProject
1. Issue Tracker
The proposed system should have provision to view the list of issues and allow only the
registered and authenticated users to add, edit, delete the issues and view the issue detail. The
user interface to the system should be implemented using React. The data about the issues
should be managed in a JSON server. The client application should interface with the JSON
Server through http to retrieve and store data.

Note:
1. The features given below are the minimum basic features that are required to be
implemented. But you need not limit yourself. You can try to make it as close to the
real system and it is left to your imagination and the domain knowledge you possess.
2. To have a responsive user interface and make the user interface better, you should
use Bootstrap. Also, make the UI as modern as possible by using Bootstrap Cards,
Carousel etc. Do not use table for Issue List.
3. Appropriate input fields should be used to make it user friendly. For example, where
date is inputted, you should use a date field and not a string field.
4. Validations should be done, wherever applicable, and make it user friendly.
5. Wherever list of records are viewed, there should be Search filter provided to only
display a subset of records, so that user can quickly see it when there are many
records to be viewed.
6. While viewing issue list, when different fields of the issues are displayed,
customization should be provided to display only a subset of the fields. – See the
Appendix at the end of the document for a Note on Customization of fields.
7. It is mandatory to use React routing and lazily load the routes. Modal dialog boxes
for Add, Edit Form should NOT be used.
8. Output screenshots (JPG format preferred) of the various features of the
application should be submitted. As the application should be responsive, the output
screenshots should include, as it appears on the desktop as well as it appears on the
mobile. The output as seen on the mobile need not be from actual mobile but as
simulated on the Google Chrome browser.
9. React Component DOM test cases has to be implemented for various features of the
application. The test cases are mandatory.
10. It is important to submit the output screenshots of the execution of React TDD Jest
test cases before it can be taken up for evaluation.
11. Note: Do not zip output screenshots while uploading to Wipro OneDrive.
Following functionalities should be implemented in the system.
1. Registration and authentication
2. About
3. Issue Tracker
Registration and Authentication
Users should be able to register to identify themselves to the system so that they can sign in and
perform add, edit and delete operations. Viewing of issue list summary should be allowed even
without signing in.
1. Register
2. Sign In
3. View registration details

Register

To register with the system, the following input details should be obtained.
1. Email ID
2. Password (for local authentication)
3. First name
4. Last name
5. Location
6. Mobile Number

Note:
A. Email ID should be used as the user ID for signing in.
B. The user registration data should be maintained in JSON server apart from the issues
data information.

Sign In

User should provide his/her email ID and sign in. If the user is already registered, the system
should allow to sign in. Otherwise, it should display an error saying that the user is not
registered. Authentication should be implemented using local authentication (maintaining user
credentials in the backend server, i.e., JSON Server).

Note: Normally authentication is implemented on the server side but since only JSON server is
used for simple data management purpose, you can implement authentication by managing user
data (name, password, email etc.) as a JSON object in the JSON server.  When register user is
done, the registration details are accepted on the UI and stored in JSON server. When “Sign In”
is done, the email ID and password is accepted and validated with the details already stored
in the JSON server as part of register user.

View registration details

The user should be able to view the details he/she had provided during registration.
About
Users should be able to view the purpose of the application.
Issue Tracker
Users should be able to perform the following operations.
1. View Issue List (Summary)
2. View Issue Detail
3. Add Issue
4. Update Issue
5. Delete Issue
6. Chart – Top viewed issues

Note:
A. Viewing of issues (Summary) should be allowed even without signing in. Add, Edit,
Delete operations and View Issue Detail should be allowed only for authenticated
users.

B. Users using the application may or may not sign in. It is optional but when the user
attempts to perform add or edit operation or view issue detail, the component should
prompt the user to sign in before performing these operations. Use the router
transition concepts.

View Issue List (Summary)

The list of issues being tracked should be displayed. Few fields of the issue can be displayed.
Provision should be provided to customize which fields can be displayed.
There should also be an option to navigate from this page to add an issue or select an issue to
update or delete.

View Issue Detail

Clicking on an issue in “View Issue List” page should navigate to display the complete details
about the issue.

Add Issue
While adding the issue, the following input details can be accepted.
● Issue Description
● Severity (A list of severities should be displayed for user to select)
[Assume the list of severities to be – Minor, Major, Critical]
● Status (A list of statuses should be displayed for user to select)
[Assume the list of statuses to be – Open, In Progress, Closed]
● Created Date
● Resolved Date
Issue ID should be generated with a unique ID before adding the issue.

Note: Use the router transition concepts to notify, if the user accidentally moves out of the “Add
Issue form page” after inputting some data in the form.

Update Issue

When the list of issues are displayed, one issue can be selected to update at a time. The issue
description, severity, status, created date and resolved date can be allowed to be updated.

Note: Issue ID should be used as the key to look for issue details and it cannot be modified.

Delete Issue (s)

When the list of issues are displayed, one or more issues can be selected to delete at a time.

Chart – Top viewed issues

The details of the issue which has been viewed often (through the “View Issue detail”) is
considered as a top viewed issue. Provision should be there to display a chart of the top viewed
issues. It can be top 3, 5, 10, etc., which should be customizable.
You can refer chart.js - https://www.chartjs.org/ (OR) react-chartjs-2 -
https://www.npmjs.com/package/react-chartjs-2 to understand how to display a chart.

2. Capstone Project submission

[ To provide share access, steps for one way of sharing is provided. There are other possible
ways, main objective is to share the folder ].

After the implementation and testing of your application is complete, do the following:
a. Create a zip of the React source folder where you would have implemented all the
above mentioned features. [ DO NOT include “node_modules” and its sub folders in
the zip. ]
 b. Upload React source folder zip and output screenshots [ Do NOT zip output
screenshots ] to the OneDrive Folder – CapstoneProject [ Created as per the steps
mentioned at the top ].

Fill the Checklist as mentioned in the Checklist document present in

18_CapstoneProject_Channel in MS Teams Group, 18_FED_React_Group and upload to
the OneDrive Folder – CapstoneProject.
c. Click on the vertical triple dot next to the folder CapstoneProject and click on Copy
Link.
d. A message Link copied will be displayed. In that message box, below there will be a
setting like “People in Wipro with the link can edit” setting. Click on it.
e. Uncheck the “Allow editing” check box to make it read only and click on Apply.
f. It will come back to Link copied message box. The setting should now be “People in
Wipro with the link can view”. Click on Copy button and then Paste in Notepad and
note down the link.
g. Fill the below mentioned form link providing the following details:
1. Employee Number (After filling, check if the employee number is correct)
2. Your Wipro Email ID (Not AD User Name)
3. Capstone Project Submitted Link (Link noted down in Step f)

https://forms.office.com/Pages/ResponsePage.aspx?id=5MSKJWoUHkGdyHmp4S_W2lZz
6WgOMRBJtj_Cn7Jdmf5UME8xQk5ZUzhES1NYSkY3TDFDOUFPVUE2TyQlQCN0PWcu

Note:
1. DO NOT include “node_modules” and its sub folders in the source code zip.
Remove it, if present in the zip, before uploading to OneDrive.
2. Make sure to fill the details in the form correctly without any spelling mistakes
in the email ID and provide the proper Wipro email ID. If you do not fill
correctly, your submission will NOT be considered.
Page Break

3. Appendix
Note on Customization of fields

Some employees are not able to understand the meaning of customization of fields. Go through
the below mentioned note to understand what it means.

Note that the UI below is provided only to give an explanation of customization of fields. The
explanation is given by showing a table UI as an example. You should NOT use a table to
display the issue list. The UI that needs to be done for Capstone Project should be a good looking
responsive UI (Bootstrap Card Layout).
“Customization of fields” means on loading the application, it should display all the fields  like
below.
 

 
               
You should provide a user interface for user to customize to say which fields, the user wants
to see at any point of time. If you see below, the user has customized to see only
 DATECREATED, TITLE and DATERESOLVED.  The UI you provide for customization is up to
you.

Note that the user interface to provide for customization has not been intentionally shown as we
want each employee to think on their own and come up with a solution. In the earlier batches,
different employees have thought in different ways and provided different type of UI. You can
decide what type of UI you want to provide for customization.