{"id":31195678,"url":"https://github.com/siddami/multi-step-form","last_synced_at":"2025-09-20T03:50:35.118Z","repository":{"id":302488854,"uuid":"1011839161","full_name":"Siddami/multi-step-form","owner":"Siddami","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-02T16:34:13.000Z","size":94,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-02T17:31:54.024Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://multi-step-form-nu-rose.vercel.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/Siddami.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,"zenodo":null}},"created_at":"2025-07-01T12:14:15.000Z","updated_at":"2025-07-02T16:34:16.000Z","dependencies_parsed_at":"2025-07-02T17:32:47.900Z","dependency_job_id":"a9275ec3-0666-4055-9b1f-0fa6cfb4cf3c","html_url":"https://github.com/Siddami/multi-step-form","commit_stats":null,"previous_names":["siddami/multi-step-form"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Siddami/multi-step-form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fmulti-step-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fmulti-step-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fmulti-step-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fmulti-step-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Siddami","download_url":"https://codeload.github.com/Siddami/multi-step-form/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fmulti-step-form/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276042131,"owners_count":25575000,"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","status":"online","status_checked_at":"2025-09-20T02:00:10.207Z","response_time":63,"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-09-20T03:50:33.149Z","updated_at":"2025-09-20T03:50:35.112Z","avatar_url":"https://github.com/Siddami.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Multi-Step Registration Form\n\nThis project is a modern, accessible multi-step registration form built with [Next.js](https://nextjs.org/), [React Hook Form](https://react-hook-form.com/), and [Zod](https://zod.dev/) for schema validation. It features step-by-step user input, validation, and a review/confirmation step.\n\n## Thought Process \u0026 Dependencies\n\n### Why Shadcn UI?\n\nI chose [shadcn/ui](https://ui.shadcn.com/) for its composable, accessible, and unstyled React components. This allowed me to quickly scaffold the UI with a consistent design system, while still giving me full control over styling via Tailwind CSS. The flexibility of shadcn/ui made it easier to build custom layouts and interactive elements like the step indicator.\n\n### Why Zod?\n\n[Zod](https://zod.dev/) was selected for schema validation because of its TypeScript-first approach and seamless integration with React Hook Form via the `zodResolver`. Zod enables robust, declarative validation logic that is easy to maintain and extend as the form grows.\n\n### Other Dependencies\n\n- **React Hook Form**: For performant, scalable form state management and validation.\n- **Lucide React**: For clean, modern icons in the UI (e.g., step indicator icons).\n- **Tailwind CSS**: For utility-first styling and rapid prototyping.\n\n## Challenges \u0026 Customization\n\n### Step Indicator Customization\n\nOne of the main challenges was customizing the step indicator to be both visually appealing and accessible. The default shadcn/ui components provided a good starting point, but I needed to:\n\n- Implement a progress bar that visually tracks the user's progress.\n- Show icons and labels for each step, with clear distinction between completed, current, and upcoming steps.\n- Ensure keyboard and screen reader accessibility.\n\nThis required writing a custom [`StepIndicator`](components/StepIndicator.tsx) component and carefully managing state transitions and ARIA attributes.\n\n### Validation \u0026 User Experience\n\nIntegrating Zod with React Hook Form required careful mapping of validation errors to user-friendly messages. Ensuring that validation only triggered for the current step, and not the entire form, was another challenge that was solved by dynamically triggering validation for relevant fields.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiddami%2Fmulti-step-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiddami%2Fmulti-step-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiddami%2Fmulti-step-form/lists"}