• ✅ Typescript
• ✅ Testes unitários
• ✅ Testes e2e
• ✅ Mobile friendly
• ✅ Validação de formulário
• ✅ Deploy da aplicação no vercel
• ✅ Paginação
• ✅ Sistema de busca
• ✅ Wishlist
• ✅ Tema vermelho, azul e preto

• TypeScript
• React Router
• React Input Mask
• Styled Components
• Jest
• Cypress
• React Testing Library
• Storybook
• Eslint
• Joi
• Prettier
• Husky
• Styled Media Query
• Styled Icons

Acesse o Deploy da aplicação pelo link abaixo e veja o site funcionando:

marvel-store-self.vercel.app

Primeiro, clone o repositório e instale as dependências com o comando yarn. Após isso, basta rodar:

yarn start

Abra http://localhost:3000 no seu site e veja o resultado.

• start: roda a aplicação no localhost:3000
• build: cria a versão de build para produção
• lint: roda o linter em todos os componentes e páginas
• test: roda o jest para testes em todos os componentes e páginas
• test:watch: roda o jest em modo watch
• storybook: inicia o storybook no localhost:6006
• test:e2e: inicia a aplicação, depois inicia o cypress

• Experiência customizada para celular, contando com menu sanduíche e adaptação de todas as tabelas/componentes

• Mensagens personalizadas
• Input Mask que completa a resposta do usuário. Ex: quando digita o cpf automaticamente insere os '.' e só permite digitar números
• Validação é feita assim que o usuário dá o submit.
• O botão de submit só habilita quando todos os campos estão preenchidos

Nome

• Campo obrigatório
• Valida a entrada para que tenha no mínimo 3 dígitos

Sobrenome

• Campo obrigatório
• Valida a entrada para que tenha no mínimo 3 dígitos

CPF

• Campo obrigatório
• Valida a entrada para que tenha no mínimo 11 dígitos
• Valida a formatação do CPF 000.000.000-00

Email

• Campo obrigatório
• Valida a entrada para que tenha no mínimo 5 dígitos
• Precisa conter nessa ordem: [email protected]

Senha

• Campo obrigatório
• Valida a entrada para que tenha no mínimo 8 dígitos
• Precisa ter no mínimo: 8 dígitos, 1 maiúscula, 1 minúscula, 1 número, 1 caracter especial

• Validação através de token no Localstorage
• A cada 1h o token é expirado e é necessário refazer o login
• Proteção das rotas que exigem autenticação, não é possível consumir nenhum conteúdo sem estar logado antes

• ✅ Documentação de todo o design system da plataforma
• ✅ Todos os estilos de botão, input, modal, etc representados na plataforma
• ✅ Possibilidade de edição e manipulação do componente de forma isolada

• Integração cypress + typescript
• Integração cypress + eslint
• Uso de comandos para atividades repetidas (Ex: Login, Signup...) e tipagem dos comandos customizados para aparecerem no autocomplete
• Escrita de um teste-exemplo e2e para logar e validar se os componentes da homepage estão renderizados

• Criação do tema vermelho (principal), azul e preto

• Salvar comics como favorito
• Página exclusiva para consultar todas os itens salvos
• Possibilidade de criar diferentes contas e ter uma wishlist personalizada para cada usuário criado