User sign up form

React
Medium

Objective

Create a user sign-up form in React

Requirements

  1. Create a React component called SignUpForm

  2. The component should display a form with inputs for the user to enter their

    1. Name

    2. Email address

    3. Password

  3. Implement basic client-side validation

    1. All 3 elements are required

    2. Password must contain at least 7 characters, and include numbers, capital letters, lowercase letters, and symbols

  4. On successful form submission, display a success message

  5. For styling, use CSS or a UI library (e.g. bootstrap or tailwind, your choice)

    1. You should not use any React component libraries (ie formik)

  6. You can use either JavaScript or TypeScript

Evaluation Criteria

If I gave you this test, here's what I'd be looking for:

This is a middling-difficulty test, there's no design to follow and no APIs to deal with. For an average mid-weight developer, it should take an hour or two to complete.

  1. Completeness (the test should be implemented correctly)

  2. Validation

    1. All fields should be validated with suitable error messages

  3. General user experience

    1. Error messages should be clear when validation fails, ideally, all fields should be validated together (rather than the name field failing, then the user fills it in and the email field fails)

    2. Clear & obvious success message on completion

    3. The styling doesn't look terrible (though there was no design to follow, it still shouldn't look horrible)

    4. Accessibility best practices like a good use of labels and ARIA

  4. TypeScript (if used)

    1. Proper type annotations and interfaces

Click to reveal