{"id":16201910,"url":"https://github.com/di-void/multi-step-form","last_synced_at":"2026-04-02T04:47:28.773Z","repository":{"id":165558275,"uuid":"635074442","full_name":"di-void/multi-step-form","owner":"di-void","description":"Advanced multi-step Form demo project.","archived":false,"fork":false,"pushed_at":"2023-05-22T11:27:21.000Z","size":227,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-13T20:35:25.235Z","etag":null,"topics":["jotai","react-hook-form","reactjs","tailwindcss","typescript","zustand"],"latest_commit_sha":null,"homepage":"https://advanced-form.netlify.app","language":"TypeScript","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/di-void.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-01T23:00:48.000Z","updated_at":"2023-07-28T06:52:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"7fb93f7c-ccab-4675-8581-b687af45f412","html_url":"https://github.com/di-void/multi-step-form","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/di-void%2Fmulti-step-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/di-void%2Fmulti-step-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/di-void%2Fmulti-step-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/di-void%2Fmulti-step-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/di-void","download_url":"https://codeload.github.com/di-void/multi-step-form/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247712683,"owners_count":20983679,"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":["jotai","react-hook-form","reactjs","tailwindcss","typescript","zustand"],"created_at":"2024-10-10T09:44:51.619Z","updated_at":"2025-12-30T20:23:09.437Z","avatar_url":"https://github.com/di-void.png","language":"TypeScript","readme":"# Frontend Mentor - Multi-step form solution\n\nThis is a solution to the [Multi-step form challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/multistep-form-YVAnSdqQBJ). Frontend Mentor challenges help you improve your coding skills by building realistic projects.\n\n## Table of contents\n\n- [Frontend Mentor - Multi-step form solution](#frontend-mentor---multi-step-form-solution)\n  - [Table of contents](#table-of-contents)\n  - [Overview](#overview)\n    - [The challenge](#the-challenge)\n    - [Screenshot](#screenshot)\n    - [Links](#links)\n  - [My process](#my-process)\n    - [Built with](#built-with)\n    - [What I learned](#what-i-learned)\n    - [Continued development](#continued-development)\n    - [Useful resources](#useful-resources)\n  - [Author](#author)\n  - [Acknowledgments](#acknowledgments)\n\n## Overview\n\n### The challenge\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- View the optimal layout for the interface depending on their device's screen size\n- See hover and focus states for all interactive elements on the page\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\n### Screenshot\n\n![screenshot](./src/screenshot.png)\n\n### Links\n\n- Solution URL: [Solution on Frontend Mentor](https://www.frontendmentor.io/solutions/advanced-multistep-form-w-reacttstailwindcss-XTPp0zjE0G)\n- Live Site URL: [Click Me and See ^\\_~](https://advanced-form.netlify.app)\n\n## My process\n\n### Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- Flexbox\n- Mobile-first workflow\n- [Zustand](https://github.com/pmndrs/zustand) - For state management\n- [React](https://reactjs.org/) - JS library\n- [TailwindCSS](https://tailwindcss.com/docs/installation) - For styles\n\n### What I learned\n\nI learned how to make use of custom hooks to encapsulate logic properly.\n\n```js\nexport const useAddons = () =\u003e {\n  const { bill, billingMode, updateAddon, addOnsCheckedState, nextPage, plan } =\n    useStore(\n      (state) =\u003e ({\n        bill: state.bills,\n        billingMode: state.billingMode,\n        updateAddon: state.updateAddon,\n        addOnsCheckedState: state.addOns,\n        nextPage: state.nextPage,\n        plan: state.plan,\n      }),\n      shallow\n    );\n```\n\n### Continued development\n\nI may or may not add animations. I also wanted to attach the Personal Info Form to state initially but I figured since it's not so important after you've passed that screen, it's forgoable 🤷🏾‍♀️.\nI was also gunning for a clean and well structured code in this project and I think I was able to achieve that to some extent :)\n\n### Useful resources\n\n- [Typescript's official docs](https://www.typescriptlang.org/docs/handbook/utility-types.html) - I was quite heavy on the typescript this time so it was a given I referred to the docs every now and then.\n- [Zustand's Github Repo](https://github.com/pmndrs/zustand) - I use zustand all the time so I refer to this one often. Poimandres ^\\_~\n\n## Author\n\n- Github - [This is my Github account ^\\_^](https://github.com/Di-void)\n- Frontend Mentor - [@Multimarix](https://www.frontendmentor.io/profile/Multimarix)\n- LinkedIn - [Don Akhirebhulu](https://www.linkedin.com/in/don-akhirebhulu-675082242/)\n\n## Acknowledgments\n\nThanks [Frontend Mentor](https://www.frontendmentor.io) and thank You 💙\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdi-void%2Fmulti-step-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdi-void%2Fmulti-step-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdi-void%2Fmulti-step-form/lists"}