REACT

NATIVE WORKSHOP: REACT FUNDAMENTALS

Assignment: React Fundamentals

Objective:
Duration Develop a Travel Management web application using HTML5 and React. The travel
management application should be focused on two types of customers Regular and
(8 hours) Corporate. Following are the key functional features:

Requirements:

Customer should be having attributes name, age, type, description, mobile

number and distance travelled.
Customer can avail discounts as per the following:
Regular customer: If this is a loyal customer then flat 5% discount is
applicable otherwise normal charges.
Corporate customer: If number of employees are more than 10
then flat 15% discount is applicable otherwise 10%.
A travel agent can perform following operations:
Create a customer Regular or Corporate.
Delete a customer.
Edit a customer.
Show details of a customer.
Clicking on Add New button should display an Add Customer form. Once
travel agent saves the required information, Add Client form should be
disappeared.
Clicking on Delete button should display a Delete Customer confirmation
pop-up and on accepting the confirmation, customer record should be
removed from the system.

Clicking on Details button should display the customer details in Add

Customer form (Add Customer label should get changed to Customer
Details, and Save & Reset buttons should be hidden).
Clicking on Update button should display the customer details in Add
Customer form (Add Customer label should get changed to Update
Details).
Save button on Add Customer form creates a new customer.
Save button on Update Customer form updates an old customer.
If distance travelled is mentioned in the Add Customer form then total
charges (including discount) should be displayed in the Customer list.
Application state should be persistence in nature. If user opens the
application again, browser should display the last state (before closing) of
the application including respective screen and number of records.

NFRs:

Local storage must be used for saving application state.

Use of jQuery is not allowed.

Wireframes:

P a g e 2 | 3

Deliverables:

Html files containing markup.

CSS files containing styles for page and form elements.
JS files containing documented JavaScript code.

P a g e 3 | 3