Finished Project

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -1,64 +1,70 @@
-# Module Project: Advanced Form Management - User Onboarding
+# Getting Started with Create React App
 
-## Project Description
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
-We've seen many different styles of form management by now -- simple to complex. Today we are going to unleash your inner form-wizard! 🧙
+## Available Scripts
 
-## Instructions
+In the project directory, you can run:
 
-### Task 1: Set Up The Project
+### `npm start`
 
-- [ ] Start off by installing a blank React app by running `npx create-react-app <app-name> --use-npm`.
-- [ ] Run `cd <app-name>` to cd into the `<app-name>` directory.
-- [ ] Using `npm`, add the following as dependencies inside your React app:
-  - `yup`
-  - `axios`
-- [ ] Create a component file called `Form.js`, import it into your `App.js` file, and place the component in your JSX there.
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
 
-### Task 2: MVP
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
 
-#### Create Your Advanced Form
+### `npm test`
 
-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:
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-- [ ] Name
-- [ ] Email
-- [ ] Password
-- [ ] Terms of Service (checkbox)
-- [ ] A Submit button to send our form data to the server.
+### `npm run build`
 
-#### Implement Form Validation and Error Messaging
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
 
-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:
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
 
-- [ ] Using Yup, set up _at least_ two different validations along with custom error messages that will display on screen when validation fails.
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-#### Make a POST Request
+### `npm run eject`
 
-Being able to `POST` data is a key skill of any developer, no matter your skill level.
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
 
-- [ ] 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
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
 
-(Note: For those that are curious, we're using [reqres.in](https://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!)
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
 
-#### Display Returned Data to Screen
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
 
-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.
+## Learn More
 
-- [ ] 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. You can use the html pre tag and JSON.stringify() method to display your post request.
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
-### Task 3: Stretch Goals
+To learn React, check out the [React documentation](https://reactjs.org/).
 
-The following are stretch goals that you should attempt _after_ you meet MVP for your project:
+### Code Splitting
 
-- [ ] 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 form. Add a `role` value to your state and add a dropdown with different roles for your users.
-- [ ] Create 3 new inputs inside your 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."_
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
 
-## Submission Format
+### Analyzing the Bundle Size
 
-* [ ] Submit a link to your github repository in canvas.
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

README.old.md

@@ -0,0 +1,64 @@
+# 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! 🧙
+
+## Instructions
+
+### Task 1: Set Up The Project
+
+- [ ] Start off by installing a blank React app by running `npx create-react-app <app-name> --use-npm`.
+- [ ] Run `cd <app-name>` to cd into the `<app-name>` directory.
+- [ ] Using `npm`, add the following as dependencies inside your React app:
+  - `yup`
+  - `axios`
+- [ ] Create a component file called `Form.js`, import it into your `App.js` file, and place the component in your JSX there.
+
+### Task 2: MVP
+
+#### Create Your Advanced 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.
+
+#### 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 along with custom error messages that will display on screen when validation fails.
+
+#### 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](https://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!)
+
+#### 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. You can use the html pre tag and JSON.stringify() method to display your post request.
+
+### Task 3: 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 form. Add a `role` value to your state and add a dropdown with different roles for your users.
+- [ ] Create 3 new inputs inside your 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."_
+
+## Submission Format
+
+* [ ] Submit a link to your github repository in canvas.

cypress.json

@@ -0,0 +1 @@
+{}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/fixtures/profile.json

@@ -0,0 +1,5 @@
+{
+  "id": 8739,
+  "name": "Jane",
+  "email": "jane@example.com"
+}