Desafio Zapt

🌎 Preview

https://desafio-zapt-henna.vercel.app/

🤘 Baixando o projeto

1. Clone o repositório e abra a pasta dele:

git clone https://github.com/guilhermebellotti/desafio-zapt.git && cd desafio-zapt

1. Instale as dependência com yarn ou npm:

yarn install

3. Depois de clonar e instalar o repositório, rode o projeto em localhost:

yarn dev

🥳 Informações adicionais

Pontos em destaque para esse projeto:

• Componentes prontos para receber informações de alguma API
• Componentes acoplados em uma estrutura (Layout)
• Variáveis de cores padronizadas (para uso global)
• Uso do styled-components para escrita do CSS
• Pequenos ajustes na responsividade
• Pequenas interações nos botões
• Padronização de código com ESLint e Prettier

Comandos

Todos os comandos abaixo só vão funcionar dentro da pasta do projeto.

Para rodar o projeto em localhost no modo de desenvolvimento, execute o comando abaixo:

yarn dev

Se quiser testar o projeto em localhost no modo de produção (server), execute o comando abaixo. Mas lembre-se: é necessário rodar o comando yarn build antes!

yarn start

Para 'fechar' o projeto (build), execute o comando abaixo:

yarn build

Tente encontrar erros/verificar a qualidade do código executando o comando abaixo:

yarn lint

---

Conteúdo informado para o desafio

Desafio Zapt

Repositório onde tem o desafio para o processo seletivo da Zapt.

Introdução

A ideia é que você aprenda, se divirta e mostre o seu melhor nesse exercício.

Exercício

Segue um link para o Figma, onde terão 3 pequenas seções para serem feitas.

Vocês podem escolher 1, 2 ou 3 para fazer, lembrando que aqui Qualidade é melhor que Quantidade!

Requisitos - o que será analisado?

• Escrita (HTML, CSS e JavaScript) e suas boas práticas
• Organização e qualidade de código
• Estrutura do projeto e escalabilidade
• Commits organizados e bem escritos

Como deve ser feito?

• Você pode utilizar qualquer tecnologia que se sentir confortável
• Você pode utilizar qualquer plugin se achar necessário (no dia-a-dia a gente não reinventa roda, aqui também não precisa)
• Você pode entregar cada componente como uma página separada
• Você pode entregar todos os componentes numa mesma página
• Você precisa deixar claro todos os passos para rodar o projeto
• Enfim, nos surpreenda!

O que usamos por aqui?

Caso você tenha interesse em se aproximar da nossa Stack, usamos:

• Typescript em basicamente tudo
• React e styled-components para construção das nossas interfaces
• ESLint, Prettier e Jest para garantir padronização e qualidade de código

Como entregar o teste?

1. Crie um fork deste projeto
2. Faça as devidas modificações
3. Envie um PR para esse repositório

Dúvidas?

Qualquer dúvida, não deixe de nos enviar um email em [email protected] ou [email protected].