{"id":26235838,"url":"https://github.com/sub-dev/multi-step-form-nextjs","last_synced_at":"2026-04-27T14:04:06.395Z","repository":{"id":259271741,"uuid":"876903540","full_name":"Sub-Dev/multi-step-form-nextjs","owner":"Sub-Dev","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-31T20:37:46.000Z","size":980,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-29T14:15:32.067Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://multi-step-form-nextjs-iota.vercel.app","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/Sub-Dev.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-10-22T18:40:23.000Z","updated_at":"2024-10-31T20:37:50.000Z","dependencies_parsed_at":"2024-10-28T14:57:01.716Z","dependency_job_id":null,"html_url":"https://github.com/Sub-Dev/multi-step-form-nextjs","commit_stats":null,"previous_names":["sub-dev/multi-step-form-nextjs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Sub-Dev/multi-step-form-nextjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sub-Dev%2Fmulti-step-form-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sub-Dev%2Fmulti-step-form-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sub-Dev%2Fmulti-step-form-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sub-Dev%2Fmulti-step-form-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sub-Dev","download_url":"https://codeload.github.com/Sub-Dev/multi-step-form-nextjs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sub-Dev%2Fmulti-step-form-nextjs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32339303,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T23:26:28.701Z","status":"online","status_checked_at":"2026-04-27T02:00:06.769Z","response_time":128,"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-03-13T03:18:07.529Z","updated_at":"2026-04-27T14:04:06.366Z","avatar_url":"https://github.com/Sub-Dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📝 Multi-step Form Solution\n\n![Design preview for the Multi-step form coding challenge](./public/desktop-preview.jpg)\n\nEsta é uma solução para o [Multi-step form challenge no Frontend Mentor](https://www.frontendmentor.io/challenges/multistep-form-YVAnSdqQBJ). Os desafios do Frontend Mentor ajudam a melhorar as habilidades de codificação através da construção de projetos realistas.\n\n## 📑 Índice\n\n- [🔍 Visão Geral](#visão-geral)\n  - [🎯 O Desafio](#o-desafio)\n  - [📸 Screenshot](#screenshot)\n  - [🔗 Links](#links)\n- [💻 Meu Processo](#meu-processo)\n  - [🛠️  Tecnologias Utilizadas](#tecnologias-utilizadas)\n  - [📚 O que Aprendi](#o-que-aprendi)\n- [⚙️ Como Executar](#como-executar)\n- [👤 Autor](#autor)\n- [🌎 English Version](#english-version)\n\n## 🔍 Visão Geral\n\n### 🎯 O Desafio\n\nOs usuários devem ser capazes de:\n\n- Completar cada etapa do sequência do formulário\n- Voltar para uma etapa anterior para atualizar suas seleções\n- Ver um sumário de suas seleções na etapa final e confirmar seu pedido\n- Ver o layout ideal para a interface dependendo do tamanho da tela do dispositivo\n- Ver os estados de hover e focus para todos os elementos interativos na página\n- Receber mensagens de validação de formulário se:\n  - Um campo foi deixado em branco\n  - O endereço de email está em formato incorreto\n  - Um passo é enviado, mas nenhuma seleção foi feita\n\n### 📸 Screenshot\n\n![first-step](./public/firststep.png)\n![second-step](./public/secondstep.png)\n![third-step](./public/thirdstep.png)\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg alt=\"first-step-mobile\" src=\"./public/firststep-mobile.png\" width=\"100%\"\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg alt=\"second-step-mobile\" src=\"./public/secondstep-mobile.png\" width=\"100%\"\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg alt=\"fourth-step-mobile\" src=\"./public/fourthstep-mobile.png\" width=\"100%\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### 🔗 Links\n\n- URL da Solução: [Frontendmentor](https://www.frontendmentor.io/solutions/multi-step-form-using-next-js-9UUcrB_4Nl)\n- URL do Site: [DEMO](https://multi-step-form-nextjs-iota.vercel.app/)\n\n## 💻 Meu Processo\n\n### 🛠️ Tecnologias Utilizadas\n\n- [Next.js](https://nextjs.org/) - Framework React\n- [React](https://reactjs.org/) - Biblioteca JS\n- [TypeScript](https://www.typescriptlang.org/) - Superset JavaScript\n- [Tailwind CSS](https://tailwindcss.com/) - Para estilos\n- Mobile-first workflow\n- Componentes React reutilizáveis\n- Gerenciamento de estado com React Hooks\n\n### 📚 O que Aprendi\n\nDurante o desenvolvimento deste projeto, adquiri diversos conhecimentos importantes:\n\n#### Gerenciamento de Estado\n\n```typescript\nconst [currentStep, setCurrentStep] = useState(1);\nconst [selectedPlan, setSelectedPlan] = useState\u003c{\n  name: string;\n  price: number;\n}\u003e({ name: \"Arcade\", price: 9 });\n```\n\nAprendi a gerenciar estados complexos em React, mantendo dados consistentes entre diferentes componentes do formulário multi-etapas.\n\n#### Responsividade com Tailwind\n\n```tsx\n\u003cdiv className={`bg-white rounded-lg relative flex flex-col justify-between\n  ${isMobile ? 'p-4 h-[75vh] w-full' : 'p-10 h-full w-full rounded-r-lg'}`}\u003e\n```\n\nAprimorei minhas habilidades com Tailwind CSS, criando layouts responsivos e adaptáveis para diferentes tamanhos de tela.\n\n#### Validação de Formulários\n\n```typescript\nconst validateForm = () =\u003e {\n  const emailPattern = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n  if (!formData.email || !emailPattern.test(formData.email)) {\n    setErrors((prev) =\u003e ({ ...prev, email: \"Email is invalid\" }));\n    return false;\n  }\n  return true;\n};\n```\n\nImplementei validações de formulário personalizadas com feedback visual para o usuário.\n\n#### Componentização\n\nAprendi a criar componentes reutilizáveis e modulares, melhorando a manutenibilidade do código:\n\n- Separação de componentes por responsabilidade\n- Uso de interfaces TypeScript para props\n- Compartilhamento de estados entre componentes\n\n#### Detecção de Dispositivo\n\n```typescript\nuseEffect(() =\u003e {\n  const handleResize = () =\u003e setIsMobile(window.innerWidth \u003c 640);\n  handleResize();\n  window.addEventListener(\"resize\", handleResize);\n  return () =\u003e window.removeEventListener(\"resize\", handleResize);\n}, []);\n```\n\nImplementei detecção responsiva de dispositivos usando React Hooks.\n\n#### Boas Práticas\n\n- Uso do \"use client\" para componentes client-side\n- Tipagem forte com TypeScript\n- Gerenciamento de eventos e efeitos colaterais\n- Padrões de UI/UX para formulários multi-etapas\n\nEste projeto me permitiu aplicar conceitos avançados de desenvolvimento front-end e melhorar minhas habilidades com o ecossistema React/Next.js.\n\n## ⚙️ Como Executar\n\n1. Clone o repositório:\n\n```bash\ngit clone https://github.com/Sub-Dev/multi-step-form-nextjs.git\n```\n\n2. Instale as dependências:\n\n```bash\nnpm install\n# ou\nyarn install\n```\n\n3. Execute o servidor de desenvolvimento:\n\n```bash\nnpm run dev\n# ou\nyarn dev\n```\n\n4. Abra [http://localhost:3000](http://localhost:3000) no seu navegador para ver o resultado.\n\n## 👤 Autor\n\n\u003ctable\u003e\n \u003ctr\u003e\n \u003ctd alinhar=\"centro\"\u003e\n \u003ca href=\"https://github.com/Sub-Dev\" target=\"_blank\"\u003e\n \u003cimg src=\"https://avatars.githubusercontent.com/u/68450692?v=4\" alt=\"Anthony-Marin\" height=\"30\" width=\"30\"/\u003e\n \u003c/a\u003e\n \u003c/td\u003e\n \u003ctd\u003e\n \u003cstrong\u003eAnthony Marin\u003c/strong\u003e (Sub-Dev) - \u003ca href=\"https://github.com/Sub-Dev\"\u003ePerfil no GitHub\u003c/a\u003e\n \u003c/td\u003e\n \u003c/tr\u003e\n\u003c/table\u003e\n\n- Frontend Mentor - [@Sub-Dev](https://www.frontendmentor.io/profile/Sub-Dev)\n\n## 🙏 Agradecimentos\n\nAgradecimentos especiais à comunidade de código aberto pelos recursos e ferramentas inestimáveis ​​que tornaram este projeto possível.\n\n## 📝 Licença\n\nEste projeto está licenciado sob a Licença MIT.\n\n---\n\n\u003ch2 align=\"center\"\u003e🌎 English Version 🌎\u003c/h2\u003e\n\n# 📝 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- [🔍 Overview](#overview)\n  - [🎯 The Challenge](#the-challenge)\n  - [📸 Screenshot](#screenshot-1)\n  - [🔗 Links](#links-1)\n- [💻 My Process](#my-process)\n  - [🛠️ Built with](#built-with)\n  - [📚 What I Learned](#what-i-learned)\n- [⚙️ How to Run](#how-to-run)\n- [👤 Author](#author-1)\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![first-step](./public/firststep.png)\n![second-step](./public/secondstep.png)\n![third-step](./public/thirdstep.png)\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg alt=\"first-step-mobile\" src=\"./public/firststep-mobile.png\" width=\"100%\"\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg alt=\"second-step-mobile\" src=\"./public/secondstep-mobile.png\" width=\"100%\"\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg alt=\"fourth-step-mobile\" src=\"./public/fourthstep-mobile.png\" width=\"100%\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### 🔗 Links\n\n- Solution URL:  [Frontendmentor](https://www.frontendmentor.io/solutions/multi-step-form-using-next-js-9UUcrB_4Nl)\n- Live Site URL: [DEMO](https://multi-step-form-nextjs-iota.vercel.app/)\n\n## 💻 My Process\n\n### 🛠️ Built with\n\n- [Next.js](https://nextjs.org/) - React framework\n- [React](https://reactjs.org/) - JS library\n- [TypeScript](https://www.typescriptlang.org/) - JavaScript superset\n- [Tailwind CSS](https://tailwindcss.com/) - For styles\n- Mobile-first workflow\n- Reusable React components\n- State management with React Hooks\n\n### 📚 What I Learned\n\nDuring the development of this project, I gained several important insights:\n\n- Complex state management in React\n- Responsive design with Tailwind CSS\n- Form validation with visual feedback\n- Component modularization\n- Mobile-first development\n- TypeScript type safety\n- React Hooks best practices\n\n## ⚙️ How to Run\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/Sub-Dev/multi-step-form-nextjs.git\n```\n\n2. Install dependencies:\n\n```bash\nnpm install\n```\n\n3. Run the development server:\n\n```bash\nnpm run dev\n```\n\n4. Open [http://localhost:3000](http://localhost:3000) in your browser.\n\n## 👤 Autor\n\n\u003ctable\u003e\n \u003ctr\u003e\n \u003ctd alinhar=\"centro\"\u003e\n \u003ca href=\"https://github.com/Sub-Dev\" target=\"_blank\"\u003e\n \u003cimg src=\"https://avatars.githubusercontent.com/u/68450692?v=4\" alt=\"Anthony-Marin\" height=\"30\" width=\"30\"/\u003e\n \u003c/a\u003e\n \u003c/td\u003e\n \u003ctd\u003e\n \u003cstrong\u003eAnthony Marin\u003c/strong\u003e (Sub-Dev) - \u003ca href=\"https://github.com/Sub-Dev\"\u003eGithub\u003c/a\u003e\n \u003c/td\u003e\n \u003c/tr\u003e\n\u003c/table\u003e\n\n- Frontend Mentor - [@Sub-Dev](https://www.frontendmentor.io/profile/Sub-Dev)\n\n## 🙏 Acknowledgements\n\nSpecial thanks to the open source community for the invaluable resources and tools that made this project possible.\n\n## 📝 License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsub-dev%2Fmulti-step-form-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsub-dev%2Fmulti-step-form-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsub-dev%2Fmulti-step-form-nextjs/lists"}