{"id":19543259,"url":"https://github.com/codewithalamin/multi-step-form","last_synced_at":"2025-04-26T17:32:14.474Z","repository":{"id":206692524,"uuid":"714664925","full_name":"CodeWithAlamin/Multi-Step-Form","owner":"CodeWithAlamin","description":"Multi step form with React hook form, and Redux state management.","archived":false,"fork":false,"pushed_at":"2023-11-13T11:45:31.000Z","size":1297,"stargazers_count":4,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-30T10:38:27.319Z","etag":null,"topics":["form-validation","form-validation-js","form-validation-react","forms","frontend-mentor","frontendmentor-challenge","react-hook-form","reactjs","styled-components"],"latest_commit_sha":null,"homepage":"https://multi-step-form-codepapa.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodeWithAlamin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-05T14:44:56.000Z","updated_at":"2024-08-20T18:05:56.000Z","dependencies_parsed_at":"2023-11-11T17:25:00.314Z","dependency_job_id":"11a9499e-f566-4fb9-92b6-9bc49dfb10b2","html_url":"https://github.com/CodeWithAlamin/Multi-Step-Form","commit_stats":null,"previous_names":["codepapa360/multi-step-form","codewithalamin/multi-step-form"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FMulti-Step-Form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FMulti-Step-Form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FMulti-Step-Form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FMulti-Step-Form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeWithAlamin","download_url":"https://codeload.github.com/CodeWithAlamin/Multi-Step-Form/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224040798,"owners_count":17245820,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["form-validation","form-validation-js","form-validation-react","forms","frontend-mentor","frontendmentor-challenge","react-hook-form","reactjs","styled-components"],"created_at":"2024-11-11T03:18:08.650Z","updated_at":"2024-11-11T03:18:09.540Z","avatar_url":"https://github.com/CodeWithAlamin.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n\n  \u003cimg src=\"./public/images/favicon-32x32.png\" alt=\"logo\" width=\"30\" height=\"auto\"\u003e\n\n  \u003ch2\u003eMulti Step Form\u003c/h2\u003e\n\n  \u003ch3\u003e\n    \u003ca href=\"https://multi-step-form-alamin.vercel.app\"\u003e\n      \u003cstrong\u003eDemo Website\u003c/strong\u003e\n    \u003c/a\u003e\n  \u003c/h3\u003e\n\n  \u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://www.frontendmentor.io/solutions/multi-step-form-w-react-and-redux-toolkit-XaJTbJ92Xn\"\u003eSolution (FEM)\u003c/a\u003e\n    •\n    \u003ca href=\"https://github.com/CodeWithAlamin/Multi-Step-Form/issues\"\u003eReport Bug\u003c/a\u003e\n    •\n    \u003ca href=\"https://github.com/CodeWithAlamin/Multi-Step-Form/pulls\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/div\u003e\n\n  \u003chr\u003e\n\n\u003c/div\u003e\n\n\u003c!-- Badges --\u003e\n\u003cdiv align=\"center\"\u003e\n\n\u003c!-- Status --\u003e\n\u003cimg src=\"https://img.shields.io/badge/Status-Completed-success?style=flat\" alt=\"Status\" /\u003e\n\n\u003c!-- Liceensee --\u003e\n\u003cimg src=\"https://img.shields.io/badge/License-MIT-blue?style=flat\" alt=\"License\" /\u003e\n\n\u003ca href='https://www.twitter.com/CodeWithAlamin' target=\"_blank\"\u003e\u003cimg alt='Twitter' src='https://img.shields.io/badge/@CodeWithAlamin-100000?style=for-the-badge\u0026logo=Twitter\u0026logoColor=00C9F7\u0026labelColor=3F3F3F\u0026color=0092FA'/\u003e\u003c/a\u003e\n\u003ca href='https://www.linkedin.com/in/CodeWithAlamin' target=\"_blank\"\u003e\u003cimg alt='LinkedIn' src='https://img.shields.io/badge/@CodeWithAlamin-100000?style=for-the-badge\u0026logo=LinkedIn\u0026logoColor=00a0dc\u0026labelColor=2F2F2F\u0026color=0077b5'/\u003e\u003c/a\u003e\n\n\u003c/div\u003e\n\n\u003c!-- Brief --\u003e\n\u003cp align=\"center\"\u003e\nThis React project demonstrates a multi-step form. The form utilizes React Hook Form for data validation and Redux Toolkit for state management, enhancing user experience and data integrity.\n\u003c/p\u003e\n\n\u003c!-- Screenshot --\u003e\n\u003ca align=\"center\" href=\"https://multi-step-form-alamin.vercel.app\"\u003e\n\n![Screenshot](./public/thumbnail-preview.png)\n\n\u003c/a\u003e\n\n## Table of contents📚\n\n- [Key Features](#key-features)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [What I learned](#what-i-learned)\n- [Installation](#installation)\n- [Author](#author)\n- [Acknowledgments](#acknowledgments)\n- [License](#license)\n\n## Key Features🎉\n\nUsers should be able to:\n\n- Complete each step of the sequence\n- Go back to a previous step to update their selections\n- See a summary of their selections on the final step and confirm their order\n- Receive form validation messages if:\n  - A field has been missed\n  - The email address is not formatted correctly\n  - A step is submitted, but no selection has been made\n- See hover and focus states for all interactive elements on the page\n- View the optimal layout for the interface depending on their device's screen size\n\n## My process🛠️\n\n### Tech Stack🏗️\n\n- React\n- React Hook Form\n- Styled Components\n- Vite\n\n### What I Learned💡\n\n- **Breaking down complex forms into manageable steps:** I learned that multi-step forms can significantly improve user engagement and reduce form abandonment by breaking down complex data collection processes into smaller, more manageable steps.\n\n- **Implementing data validation with React Hook Form:** I gained experience in utilizing React Hook Form to effectively validate user inputs, ensuring data integrity and preventing invalid submissions.\n\n- **Leveraging Redux Toolkit for state management:** I explored the power of Redux Toolkit for managing the form's state, facilitating consistent data handling and easy updates.\n\n## Installation📥\n\n- Clone this repo:\n\n```sh\ngit clone https://github.com/CodeWithAlamin/Multi-Step-Form.git\n```\n\n- Install dependencies:\n\n```sh\nnpm install\n```\n\n- Build command:\n\n```sh\nnpm run build\n```\n\n- Live server:\n\n```sh\nnpm run dev\n```\n\n## Author👤\n\n\u003cb\u003eAlamin\u003c/b\u003e\n\n- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)\n- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)\n- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)\n- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)\n\nFeel free to contact me with any questions or feedback!\n\n## Star this project🌟\n\nShow your appreciation by starring this project on GitHub.🙂 Your support will motivate me to continue creating and sharing valuable open-source projects\n\n## Acknowledgments🙏\n\nI would like to express my gratitude to Frontend Mentor for providing the challenge and inspiration to build this project. Their platform and resources have been instrumental in my learning journey and the development of this project.\n\n## License📜\n\nThis project is licensed under the [MIT](./LICENSE.md) License - see the LICENSE file for details.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithalamin%2Fmulti-step-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithalamin%2Fmulti-step-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithalamin%2Fmulti-step-form/lists"}