{"id":17683185,"url":"https://github.com/nemanjam/multistep-form-server-actions-demo","last_synced_at":"2025-03-30T19:48:59.199Z","repository":{"id":258558595,"uuid":"874165036","full_name":"nemanjam/multistep-form-server-actions-demo","owner":"nemanjam","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-17T11:15:24.000Z","size":7175,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-05T22:46:16.644Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/nemanjam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2024-10-17T11:10:52.000Z","updated_at":"2024-10-17T11:15:28.000Z","dependencies_parsed_at":"2024-10-20T14:07:29.668Z","dependency_job_id":null,"html_url":"https://github.com/nemanjam/multistep-form-server-actions-demo","commit_stats":null,"previous_names":["nemanjam/multistep-form-server-actions-demo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjam%2Fmultistep-form-server-actions-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjam%2Fmultistep-form-server-actions-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjam%2Fmultistep-form-server-actions-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjam%2Fmultistep-form-server-actions-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nemanjam","download_url":"https://codeload.github.com/nemanjam/multistep-form-server-actions-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246372501,"owners_count":20766627,"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":[],"created_at":"2024-10-24T09:44:36.663Z","updated_at":"2025-03-30T19:48:59.180Z","avatar_url":"https://github.com/nemanjam.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Multistep form\n\n## Demo\n\nRegister flow is on the `/register` route.\n\nhttps://multistep-form.arm1.nemanjamitic.com/register\n\n## Screenshots\n\nhttps://github.com/user-attachments/assets/0c5ceb52-017f-4e8c-a0af-22f5230d2f0b\n\n## Installation and running\n\n```bash\n# install dependencies\nyarn install\n\n# run in dev mode, visit http://localhost:3000/register\nyarn dev\n\n# build\nyarn build\n\n# run in prod mode\nyarn start\n\n```\n\n## Notes\n\n- I built it using server actions and the latest Next.js, Shadcn, Tailwind, React Hook Form, Zod.\n- The form performs a real request to the server action, so it requires a Node.js runtime. That is why I used Docker and Github Actions to deploy the live demo.\n- The server action is connected to the form via the `action` attribute to allow submission with JavaScript disabled. I used React state for navigating form steps, which of course requires JavaScript. If JavaScript is a requirement, I can implement separate routes and forms for each page. Each form would call its own server action, and the data would need to be handled and merged on the server.\n- The server action does nothing except log the status and forward the data to the client, which displays it in a toast popup.\n- This project has been updated and reused as a starter project: [shadcn-ui/next-template](https://github.com/shadcn-ui/next-template) (and mirror: [shadcn-ui/ui/blob/main/templates/next-template](https://github.com/shadcn-ui/ui/blob/main/templates/next-template))\n- In few places I used on-off values for colors, otherwise I would need to restructure entire semantic colors palette (all components are dependent on the palette) which would require much more work.\n- The folder/file structure and naming can be improved and refactored once I have more context about the rest of the app.\n- The widths on large screens are approximate, as I used screenshot mockups, they can be further adjusted.\n- Form is validated `onBlur`, can be modified to `onChange` or `onSubmit`.\n\n#### Tailwind breakpoints\n\n- mobile - 0 - sm (`min-w-80` = 320px)\n- tablet - sm - lg\n- desktop - lg - max (`max-w-screen-2xl` = 1536px)\n\nFor the main content width, it uses the default Tailwind container class, which sets the `max-width` to the `min-width` of the breakpoint. This is a reasonable default, but it can be adjusted to match different preferences if needed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnemanjam%2Fmultistep-form-server-actions-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnemanjam%2Fmultistep-form-server-actions-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnemanjam%2Fmultistep-form-server-actions-demo/lists"}