A ideia é ver como você estrutura um projeto e como aplica o conceito de "clean code" e separação de responsabilidades.
O desafio é criar um wizard, como se fosse um cadastro em um e-commerce onde a cada novo step você precisa salvar o anterior no caso dele querer voltar para revisar ou editar algo.
1- Criar um projeto em react
2- Utilizar o styled-components
3- evitar utilizar componentes já prontos de bibliotecas.
Será avaliado o seu conhecimento em CSS tanto em harmonia das informações na tela quanto em responsividade.
Pode ser acessada online atráves do link: https://react-superbid.vercel.app/
Obs: ao final do cadastro é gerado um JSON com a finalidade de ser enviado para um possivel backend, que no momento não está conectado, porém é possivel visualizar o JSON criado ao finalizar o cadastro inspecionando a pagina e visualizando o console log.
-
Conectar o formulário de cadastro ao backend
-
Adicionar mais recursos extras de responsavidade para versão mobile
-
Adicionar verificações/validações aos inputs Ex: verificar se cpf/cpnj/email etc… é valido ou não
-
Adicionar mais campos/inputs ao formulário de cadastro caso necessario
-
Adicionar widget fixo no canto inferior da tela de (“Fale conosco em caso de dúvidas” ) que abra um chatbot por exemplo
-
Apos concluir o cadastro redirecionar para a pagina principal do marketplace
-
Caso você tenha mais alguma sugesão de melhoria sera muito bem vinda, entre em contato comigo ou faça um pull-request nesse repositório.
Esse projeto foi desenvolvido principalmente com as seguintes tecnologias:
Esse projeto foi utilizou das seguintes libs:
- vitejs
- styled-components
- react-dom
- react-svgr
-
Fonte: Nunito
-
Cores:
Cinza background → #F8F8F8 Preto fonte primário → #131415 Cinza fonte → #66696F Laranja primário → #EC660B Azul primário → #0050A0 Azul claro → #D6EAF5
Clone o projeto e acesse a pasta do mesmo.
$ git clone https://github.com/guilhermemm-dev/react-superbid
$ cd react-superbid
Para iniciá-lo, siga os passos abaixo:
# Instalar as dependências
$ yarn ou npm install
# Iniciar o projeto
$ yarn start ou npm run dev
O app estará disponível no seu browser pelo endereço http://localhost:3000.
Esse projeto está sob a licença MIT.