A ticket-ordering frontend app in React that:
- Collects user input.
- Uses correct input types for each field.
- Validates the fields according to the validation rules provided below.
- Preserves the state between steps.
- Displays the collected information on the last step.
- Includes unit tests for one module of your choice.
- Makes the provided E2E tests pass.
- Has the UI styled with design system scalability in mind. Use this Figma mockup as a reference.
Each step of the form should also contain the "Submit" and "Back" buttons.
data-testid
attributes are used to identify those elements.
The inputs on the form steps have the following data-testid
attributes:
<form ...>
<input data-testid="firstName" ... />
<input data-testid="lastName" ... />
<input data-testid="age" ... />
<button data-testid="submit" />
</form>
<form ...>
<input data-testid="phone" ... />
<input data-testid="email" ... />
<button data-testid="submit" />
<button data-testid="back" />
</form>
<form ...>
<input data-testid="seat" ... />
<input data-testid="food" ... />
<input data-testid="allergies" ... />
<button data-testid="submit" />
<button data-testid="back" />
</form>
On the results page we see the values collected by the form.
Each element containing the value has a data-testid
field with the corresponding field name
:
<div data-testid="<field name>">value</div>
<button data-testid="back" />
Form steps have the following validations:
firstName
is a required field.- Validation message:
First name is a required field
- Validation message:
firstName
should not contain numbers.- Validation message:
First name should not contain numbers
- Validation message:
lastName
is a required field.- Validation message:
Last name is a required field
- Validation message:
lastName
should not contain numbers.- Validation message:
Last name should not contain numbers
- Validation message:
age
is a required field.- Validation message:
Age must be a number
- Validation message:
age
should be a positive number.- Validation message:
Age should be positive
- Validation message:
email
is a required field.- Validation message:
Email is a required field
- Validation message:
email
should have correct email format.- Validation message:
Email should have correct format
- Validation message:
phone
is a required field.- Validation message:
Phone number is a required field
- Validation message:
seat
is a required field.- Validation message:
Seat is a required field
- Validation message:
food
is a required field.- Validation message:
Food is a required field
- Validation message:
allergies
is a required field.- Validation message:
Allergies is a required field
- Validation message:
npm install
# Run your app here
npm run test
- Fulfills the requirements in the task description above.
- Ensures that state management is well organized.
- Unit test one module.
- Avoids duplication and extracts re-usable modules where it makes sense.
- Cleaned up code as if it was used in production.