/User-Onboarding

Module Project: Advanced Form Management - User Onboarding

Project Description

We've seen many different styles of form management by now -- simple to complex. Today we are going to unleash your inner form-wizard! 🧙

Set Up The Project

  • Start off by installing a blank React app by using Create React App.
  • Add the following as dependencies inside your React app:
    • formik
    • yup
    • axios
  • Create a component file called Form.js, import it into your App.js file, and place the component in your JSX there.

STEP 1 - Create Your Formik Form

We want to create a form to onboard a new user to our system. We need at least the following pieces of information about our new user:

  • Name
  • Email
  • Password
  • Terms of Service (checkbox)
  • A Submit button to send our form data to the server.

STEP 2 - Implement Form Validation and Error Messaging

Form validation is one of the facets of an application that makes it feel polished and controlled from a user perspective. With that in mind, implement the following:

  • Using Yup, set up at least two different validations for each field along with custom error codes that will display on screen when validation fails.

STEP 3 - Make a POST Request

Being able to POST data is a key skill of any developer, no matter your skill level.

  • Craft a POST request using axios that sends your form data to the following endpoint: https://reqres.in/api/users
  • Verify using a console.log() that you are receiving a successful response back

(Note: For those that are curious, we're using reqres.in for this assignment's API. It's a free API that allows us to simulate a POST request for any data that we send it. Pretty awesome!)

STEP 4 - Display Returned Data to Screen

When you get your data back, you will want to do something with it, right? Let's display a list of users in our app.

  • Set up a state property called users that is initialized with an empty array
  • Every time you make a POST request, and get that new user data back, update your users state with the new user added to the array
  • Render users in your app. This can be done in the Form component, or you can pass the array down to another component and render the users there

Stretch Goals

The following are stretch goals that you should attempt after you meet MVP for your project:

  • Add basic styling to your form in your app. Make it look pretty with any styling method you choose.
  • Implement a dropdown menu in your Formik form. Add a role value to your Formik HOC and add a dropdown with different roles for your users.
  • Create 3 new inputs inside your Formik form of your choice along with corresponding validation and error messaging
  • Add to your existing handling so that, if a user inputs their email as waffle@syrup.com, they receive an error message in their form that says "That email is already taken."