Sobre o projeto Frontend Funcionalidades Requisitos Executando o projeto Tecnologias e Ferramentas Roadmap Author
A proposta desse projeto era construir uma aplicação fullstack que permitisse ao usuário se cadastrar e receber um email de confirmação para e autenticação.
Caso queira acessar o repositório com o projeto backend acesse o link a seguir:
📑 Repositório Backend
https://agi-fe-challenge.vercel.app/
O objetivo do frontend desse projeto era criar um formulário de cadastro de um novo usuário e consequentemente da sua empresa, e enviar um email para o endereço cadastrado, permitindo que o mesmo tivesse acesso a uma experiência de avaliação na plataforma.
O fluxo de cadastro segue 5 etapas que coletam os dados do usuário e da empresa, permitindo uma experiência de avaliação personalizada na plataforma da Agidesk.
Nesse cadastro existem poucos requisitos para permitir o cadastro do usuário:
- O usuário precisa utilizar um endereço de e-mail corporativo.
- Para garantir essa validação, é feito uma reuisição para nossa api com a lista dos provedores não permitidos para o cadastro.
- Todos os campos são obrigatórios, exceto a cor que pode ser alterada futuramente pela plataforma.
🚨 Antes de executar o projeto é necessário que o backend esteja configurado e rodando!! 📣
1 - Para rodar pela primeira vez o seu projeto será necessário a criação de uma pasta.
$ mkdir <nome-da-pasta>
2 - Agora entre na pasta criada.
$ cd <nome-da-pasta>
3 - Vamos clonar o repositório
$ git clone https://github.com/Fred-Reis/agi-fe-challenge
4 - Execute o comando a seguir para a criação da pasta node_modules
$ npm install
5 - Para iniciar o projeto execute o seguinte comando
$ npm run dev
Se você chegou até até aqui significa que tudo correu bem 🙏🏼 então você será capaz de acessar o fomulário no seu browser 😱 através da seguinte URL:
http://localhost:3000
Nessa aplicação foram implentados testes (cobertura parcial) de integração (E2E) usando Cypress.
Nesse teste foi coberto todo o fluxo de cadastro do usuário
🚨 Apenas lembrando que para executar os testes o backend do projeto deve estar rodando!! 📣
Para rodar o teste execute os comandos a seguir na raiz do projeto frontend:
$ npx cypress open
Em seguida uma janela deve abrir com o dashboard do cypress, escolha a opção de E2E
e o seu browser de preferência
na janela a seguir escolha o signUp.cy.ts
e em seguida voce verá a aplicação sendo executada.
Algumas das tecnologias e ferramentas utilizadas no backend.
Algumas das funcionalidades que devem ser implementadas em breve
- Internacionalização com i18n
- Permitir que o usuário insira sua cor personalizada para customizar a plataforma
- Implementar login social com Gmail e Outlook.
- Hospedar os assets em um servidor CDN para reduzir o tamanho do bundle da aplicação
- Implementar validações e exibição de erros
- Implementar Skeleton
- Fazer o deploy da aplicação
Author: Frederico Reis
Feito com