{"id":25461067,"url":"https://github.com/mewmewdevart/lesserformcountdown","last_synced_at":"2025-11-03T11:30:39.543Z","repository":{"id":276215657,"uuid":"928599030","full_name":"mewmewdevart/LesserFormCountdown","owner":"mewmewdevart","description":"💼 | Minha solução para o desafio técnico da vaga de Javascript Developer na Lesser.","archived":false,"fork":false,"pushed_at":"2025-02-15T01:30:28.000Z","size":1084,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-15T02:22:50.187Z","etag":null,"topics":["challenge","desafio-lesser","e2e","lesser","playright","svelte","tailwind","typescript"],"latest_commit_sha":null,"homepage":"https://lesser-form-countdown.vercel.app","language":"Svelte","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/mewmewdevart.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":"2025-02-06T22:36:41.000Z","updated_at":"2025-02-15T01:30:52.000Z","dependencies_parsed_at":"2025-02-06T23:29:29.350Z","dependency_job_id":"7265cde0-4d7a-4bb2-822a-a4f77e09fef4","html_url":"https://github.com/mewmewdevart/LesserFormCountdown","commit_stats":null,"previous_names":["mewmewdevart/lesserformcountdown"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mewmewdevart%2FLesserFormCountdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mewmewdevart%2FLesserFormCountdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mewmewdevart%2FLesserFormCountdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mewmewdevart%2FLesserFormCountdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mewmewdevart","download_url":"https://codeload.github.com/mewmewdevart/LesserFormCountdown/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239413137,"owners_count":19634169,"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":["challenge","desafio-lesser","e2e","lesser","playright","svelte","tailwind","typescript"],"created_at":"2025-02-18T05:22:25.650Z","updated_at":"2025-02-18T05:22:26.573Z","avatar_url":"https://github.com/mewmewdevart.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  Lesser Form Countdown (Em desenvolvimento)\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003cb\u003e\u003ci\u003e\n    💼 | Minha solução para o desafio técnico da vaga de Javascript Developer na Lesser.\n  \u003c/i\u003e\u003c/b\u003e\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"GitHub code size in bytes\" src=\"https://img.shields.io/github/languages/code-size/mewmewdevart/LesserFormCountdown?color=054DFC\" /\u003e\n    \u003cimg alt=\"Main language\" src=\"https://img.shields.io/github/languages/top/mewmewdevart/LesserFormCountdown?color=054DFC\"/\u003e\n    \u003cimg alt=\"License\" src=\"https://img.shields.io/github/license/mewmewdevart/LesserFormCountdown?color=054DFC\"/\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"#\" target=\"_blank\"\u003eAcesse o Site\u003c/a\u003e \n\u003c/p\u003e\n\n## Sumário\n\n1. [Desafio](#desafio)\n2. [Sobre o Projeto](#sobre-o-projeto)\n3. [Funcionalidades](#funcionalidades)\n4. [Tecnologias Utilizadas](#tecnologias-utilizadas)\n5. [Estrutura do Projeto](#estrutura-do-projeto)\n6. [Instruções de Uso](#instruções-de-uso)\n    - [Pré-requisitos](#pré-requisitos)\n    - [Rodando o Projeto Localmente](#rodando-o-projeto-localmente)\n7. [Testes](#testes)\n9. [Referências](#referências)\n10. [Licença](#licença)\n\n\n## Desafio\n\nO Desafio Tecnico da Lesser consiste em criar um site que exibe um formulário com campos para \"Nome\", \"Telefone\" e \"Email\". O usuário deve preencher o formulário e enviá-lo dentro de um limite de 15 segundos. O site deve exibir um contador regressivo e modais de sucesso ou falha, dependendo do tempo de envio. Além disso, o site deve incluir uma página de candidato que exibe os dados preenchidos, com navegação entre as páginas sem interromper a contagem do tempo.\n\n## Sobre o Projeto\nFoi a minha primeira vez usando Svelte \u0026 Playwright! :)\nA minha solução foi criar uma interface mais intuitiva e alinhada ao propósito da empresa de reconectar as pessoas com atividades que nutrem o espírito. Para isso, adaptei o desafio para um contexto imersivo: o usuário assume o papel de um cadete prestes a embarcar em uma expedição intergaláctica. Ele tem 15 segundos para registrar sua identidade no sistema da nave Lesser-X. Se preencher os dados corretamente a tempo, a nave decola com ele a bordo; caso contrário, a decolagem ocorre da mesma forma — mas sem o cadete. Foi necessário ajustar esse contexto ao enunciado do desafio sem desrespeitar as regras estabelecidas.\n\nUma das escolhas técnicas que fiz foi utilizar o BEM para nomenclatura de algumas classes de estilização e usar emojis como ilustração para representar elementos gráficos na interface, em vez de imagens tradicionais. Isso permitiu trabalhar com elementos ilustrativos sem aumentar o peso do projeto, mantendo a performance otimizada.\n\nTambém tive a oportunidade de escrever testes E2E usando Playwright, o que foi um desafio tão difícil quanto divertido. A cada novo cenário testado, surgia a vontade de cobrir ainda mais possibilidades, e esse processo acabou revelando problemas no fluxo de interação do site que antes passavam despercebidos. Isso demandou mais tempo do que o esperado, mas aprimorou a resolução e a prevenção de problemas.\n\nAlém disso, enfrentei desafios técnicos durante o desenvolvimento, como o próprio Svelte sinalizando erros por não reconhecer o svelteHTML, e problemas com a nova atualização do Tailwind — um problema que nem as IAs conseguiram me ajudar a resolver (haha). Acabei tendo que usar apenas CSS para estilizar alguns trechos, pois incluir esses elementos na configuração do Tailwind estava causando bugs no projeto. Outro desafio foi o Modal, que entrava em conflito com alguns avisos de acessibilidade. Tive que fazer ajustes para que ele funcionasse corretamente com os elementos solicitados no desafio.\nIsso me levou a horas de debugging, pesquisas em issues no GitHub do framework e diversos testes envolvendo a instalação e remoção de pacotes no package.json. No entanto, apesar das dificuldades, foi uma experiência enriquecedora. Sem experiência prévia com Svelte, precisei aprender na prática, equilibrando a leitura da documentação com tentativa e erro — o que tornou o aprendizado ainda mais valioso.\nGostaria de ter mais tempo na minha rotina para implementar novas funcionalidades e aplicar uma organização melhor ao projeto, mas estou satisfeita com o resultado (ainda que passível de melhorias). Obrigada pela experiencia! \n\n## Funcionalidades\n- **Formulário Interativo**: Campos para \"Nome\", \"Telefone\" e \"Email\".\n- **Contador Regressivo**: Exibe o tempo restante em formato `mm:ss`.\n- **Modais de Feedback**:\n  - **Sucesso**: Exibido quando o formulário é enviado dentro do tempo limite.\n  - **Falha**: Exibido quando o tempo acaba antes do envio.\n- **Página do Candidato**: Exibe os dados preenchidos após o envio bem-sucedido.\n- **Navegação**: Botões para alternar entre a página do formulário e a página do candidato sem interromper a contagem.\n- **Validação**: Desabilita o botão de envio se os campos não estiverem preenchidos corretamente.\n\n## Tecnologias Utilizadas\n- **SvelteKit**: Framework para construção de aplicações web modernas.\n- **TailwindCSS**: Framework CSS utilitário para estilização rápida e responsiva.\n- **DaisyUI**: Biblioteca de componentes para TailwindCSS, utilizada para criar modais e botões estilizados.\n- **TypeScript**: Adiciona tipagem estática ao JavaScript para maior segurança e produtividade.\n- **Playwright**: Ferramenta de teste end-to-end para garantir a funcionalidade do projeto.\n\n\n## Estrutura do Projeto\n```\nmy-app/\n├── src/\n│   ├── components/\t\t# Componentes usados durante o desenvolvimento (timer, modal, header etc)\n│   ├── stores/\t\t\t# Gerenciamento de estado (tempo e dados do candidato)\n│   ├── routes/\n│   │   ├── +page.svelte       # Página principal com o formulário\n│   │   ├── candidate/\n│   │   │   └── +page.svelte   # Página do candidato\n│   │   └── +layout.svelte     # Layout comum para as páginas\n│   └── app.html               # Template HTML base\n├── tests/\n│   └── browser.spec.ts        # Testes end-to-end com Playwright\n├── playwright.config.ts       # Configuração do Playwright\n├── tailwind.config.cjs        # Configuração do TailwindCSS\n```\n\n\n\n## Instruções de Uso\n\n### Pré-requisitos\n\n❗️ | Certifique-se de ter as seguintes ferramentas instaladas em sua máquina antes de prosseguir:\n\n- Node.js (v18 ou superior)\n- PNPM (gerenciador de pacotes)\n\n### Rodando o Projeto Localmente\n1. Clone o repositório:\n   ```sh\n   git clone https://github.com/mewmewdevart/LesserFormCountdown.git\n   cd LesserFormCountdown\n   ```\n2. Instale as dependências:\n   ```sh\n   pnpm install\n   ```\n3. Execute o projeto:\n   ```sh\n   pnpm run dev\n   ```\n4. Acesse o site em: `http://localhost:5173`.\n\n![Captura de tela de 2025-02-10 23-19-55](https://github.com/user-attachments/assets/6a78d34f-c1f1-4ab5-bdf9-426aae8d1464)\n\n\nhttps://github.com/user-attachments/assets/9e7b9eaf-42ed-4c67-a8db-c4dcb736bd8b\n\n\n## Testes\nPara garantir que todas as funcionalidades estão funcionando corretamente, execute os testes com Playwright:\n```sh\nnpx playwright test browser.spec.ts\n```\n\nOs testes cobrem todos os cenários críticos do projeto, garantindo que a aplicação funcione conforme o esperado. Abaixo estão os principais cenários testados:\n1. **Início do Desafio e Contador Regressivo**:\n   - Verifica se o contador regressivo é exibido corretamente após o início do desafio.\n   - Confirma que o tempo é decrementado a cada segundo.\n2. **Validação do Formulário**:\n   - Testa se os campos do formulário são validados corretamente.\n   - Verifica se o botão de envio é desabilitado para entradas inválidas.\n3. **Envio do Formulário Dentro do Tempo Limite**:\n   - Confirma que, ao enviar o formulário dentro dos 15 segundos, a modal de sucesso é exibida.\n   - Verifica se os dados do candidato são salvos corretamente.\n4. **Exibição da Modal de Falha**:\n   - Testa se a modal de falha é exibida quando o tempo acaba antes do envio do formulário.\n5. **Navegação Entre Páginas**:\n   - Verifica se a navegação entre a página do formulário e a página do candidato ocorre sem interromper a contagem regressiva.\n   - Confirma que a página do candidato exibe os dados corretamente após o envio bem-sucedido.\n6. **Fechamento das Modais**:\n   - Testa se as modais de sucesso e falha podem ser fechadas clicando no botão de fechar (`X`) ou fora da modal.\n7. **Acesso à Página do Candidato**:\n   - Verifica se a página do candidato exibe uma mensagem de aviso caso o desafio não tenha sido concluído com sucesso.\n   - Confirma que os detalhes do candidato são exibidos corretamente após o envio bem-sucedido.\n\n\n\n## Referências\n- [SvelteKit Documentation](https://kit.svelte.dev/)\n- [TailwindCSS Documentation](https://tailwindcss.com/docs)\n- [DaisyUI Documentation](https://daisyui.com/)\n- [Playwright Documentation](https://playwright.dev/)\n\n\n\n## Licença\nEste projeto está licenciado sob a [MIT License](LICENSE).\n\n\n\n\u003cp align=\"center\"\u003e\n  Desenvolvido com muito ☕ por\n  \u003ca href=\"https://linktr.ee/mewmewdevart\" target=\"_blank\"\u003eLarissa Cristina Benedito\u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmewmewdevart%2Flesserformcountdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmewmewdevart%2Flesserformcountdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmewmewdevart%2Flesserformcountdown/lists"}