References-Form

Getting Started

First, install node modules:

npm install

Add .env file to the root of the project and declare POST_URL (the url provided in the task),

Then, run the development server:

npm run dev

Required Node.js 18.17.0 or later.

Open http://localhost:3000 with your browser to see the result.

Description

Form that collects information from a tenant for checking references.

All the fields are required and the validation patterns need to be met in order to be able to send the information. Once the validation is passed the "Send" button gets enabled and the form can be submitted.

Validation:

• Inputs: name fields can only accept letters, if the user types a number or a special character a warning text gets rendered
• Dates: the end date needs to be after the start date, if the user selects a date that is before the start date a warning text gets rendered and the "Send" button is disabled.

Reference Form

Form fields

Name validation

Date validation

Currently employer

Reset form

Stack

• Next.js
• Typescript
• Tailwind
• React Hook Form
• Jest
• React Testing Library
• React-datepicker

React Hook Form

React Hook Form used for managing the form. All the inputs are wrapped in a <form> tag and registered to the form by passing register function as prop. Atom components receive register prop and it is spread to have the input registered in the form. Form Submit button does not accept onClick as it receives type='submit' and the submit functionality of the form is handled by passing onSubmit={handleSubmit(submit)} that comes from useForm.

Validation has been implemented via register by passing an object as a second argument where all the inputs are required and they have an specific pattern they need to meet in order to be valid eg:

register={register("employerName", {
  required: true,
  validate: (value: string) => {
    if (!nameRegex.test(value)) {
      return "Sorry, numbers and special characters are not allowed"
    }
    return true;
    }
  })}
  errorMessage=  {formState.errors.employerName?.message}

If the validation is not passed, a warning text gets rendered. The message is recevied from formState.errors.inputName.message.

For enabling the button isValid prop coming from formState is passed to the button component.

Once the form is validated and the submit button gets clicked, there is a check to see if the form has been submitted by using isSubmitted coming from formState. If isSubmitted===true, a 'Thank you!' message text gets rendered together with a 'Reset button' that handles reset method for reseting the form state.

Form submission

A POST endpoint is called in a funcion abstracted into a utility inside Util/API/postReferencesForm.ts. The endpoint URL is declared in a .env file and accessed via dotenv library for security reasons. The URL is passed to fetch function as follows process.env.POST_URL.

To be able to run and test the code a .env would need to be created in the root of the project and declare the POST_URL.

Types

All types and enums have been declared in a Types/types.ts

Atomic approach

Atomic approach has been used for structuring and ordering the componets separated in 'atoms', 'molecules' and 'organisms'.

Testing

Jest and React Testing Library have been used for testing. Testing has been added for some components but, as further implementation, it would be necessary to add more unit and integration testing for other functionalities and components.

For running tests: npm run test

Accessibility

Native HTML tags with WAI-ARIA Roles have been used for accessibility which would allow screen readers to navigate through the page.

An 89 overall score achieved in Lighthouse tool

Responsiveness

The app is responsive and adjusts to desktop, tablet and mobile viewports, some media queries have been added via Tailwind for adjusting the design to the screen size.

Mobile

Tablet

Desktop

Further implementation

• A button that would allow the user to add multiple Employer information
• Implement localStorage for storing the progress and allowing the user to resume the form where it was left
• Third party API integration for address elastic search eg. https://www.geoapify.com/solutions/address-lookup