{"id":32563048,"url":"https://github.com/blevs/react-formik-users","last_synced_at":"2026-07-12T00:31:03.232Z","repository":{"id":36875041,"uuid":"201324193","full_name":"Blevs/react-formik-users","owner":"Blevs","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-04T06:39:49.000Z","size":3225,"stargazers_count":1,"open_issues_count":24,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-29T02:56:36.524Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Blevs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-08T19:28:55.000Z","updated_at":"2019-08-12T15:50:43.000Z","dependencies_parsed_at":"2023-01-17T06:30:33.679Z","dependency_job_id":null,"html_url":"https://github.com/Blevs/react-formik-users","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Blevs/react-formik-users","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blevs%2Freact-formik-users","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blevs%2Freact-formik-users/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blevs%2Freact-formik-users/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blevs%2Freact-formik-users/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Blevs","download_url":"https://codeload.github.com/Blevs/react-formik-users/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blevs%2Freact-formik-users/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35378722,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-11T02:00:05.354Z","response_time":104,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-29T02:56:21.891Z","updated_at":"2026-07-12T00:31:03.179Z","avatar_url":"https://github.com/Blevs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Module Project: Advanced Form Management - User Onboarding\n## Project Description\n\nWe've seen many different styles of form management by now -- simple to complex. Today we are going to unleash your inner form-wizard! 🧙\n\n## Set Up The Project\n\n- [ ] Start off by installing a blank React app by using Create React App.\n- [ ] Add the following as dependencies inside your React app:\n  - `formik`\n  - `yup`\n  - `axios`\n- [ ] Create a component file called `Form.js`, import it into your `App.js` file, and place the component in your JSX there.\n\n## STEP 1 - Create Your Formik Form\n\nWe 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:\n\n- Name\n- Email\n- Password\n- Terms of Service (checkbox)\n- A Submit button to send our form data to the server.\n\n## STEP 2 - Implement Form Validation and Error Messaging\n\nForm 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:\n\n- 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.\n\n## STEP 3 - Make a POST Request\n\nBeing able to `POST` data is a key skill of any developer, no matter your skill level.\n\n- Craft a `POST` request using `axios` that sends your form data to the following endpoint: _https://reqres.in/api/users_\n- Verify using a `console.log()` that you are receiving a successful response back\n\n(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!)\n\n## STEP 4 - Display Returned Data to Screen\n\nWhen you get your data back, you will want to do something with it, right? Let's display a list of users in our app.\n\n- Set up a state property called `users` that is initialized with an empty array\n- 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\n- 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\n\n## Stretch Goals\n\nThe following are stretch goals that you should attempt _after_ you meet MVP for your project:\n\n- Add basic styling to your form in your app. Make it look pretty with any styling method you choose.\n- 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.\n- Create 3 new inputs inside your Formik form of your choice along with corresponding validation and error messaging\n- 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.\"_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblevs%2Freact-formik-users","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblevs%2Freact-formik-users","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblevs%2Freact-formik-users/lists"}