Skip to content

Update frontend #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LeticiaTiemi wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update frontend #13

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 16 additions & 19 deletions frontend.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
# Desafio Frontend

# O desafio
## O desafio

A ideia é simples, você deverá desenvolver 2 telas consultando uma API (Graphql), conforme a seção "Instruções", com esforço estimado de 12h~16h. O prazo pode ser estendido até 1 semana a partir da criação, mas também aumentará o rigor com que o código será avaliado.

**Dica:** tente atingir os objetivos básicos para depois partir para a seção bônus.

# Instruções
## Instruções

1. Crie um repositório privado na sua conta do github usando o padrão: `<seu-nome>-taqtile-case-front`.
1. Convide os membros da Taqtile como colaboradores: `Raquelmms`, `bia-lima`, `Japoncio3k` e `VituHonda`.
1. Crie um projeto [React](https://create-react-app.dev/docs/getting-started).
1. Crie um projeto React.
1. Consuma a API https://rickandmortyapi.com/graphql
1. Desenvolva a listagem de personagens (em forma de lista ou cards). Como exibição padrão, a listagem deve trazer todos os personagens com as seguintes informações:

Expand All @@ -24,32 +22,31 @@ A ideia é simples, você deverá desenvolver 2 telas consultando uma API (Graph
- nome do personagem;
- todos os episódios que ele apareceu (apenas o nome).

1. A tela de detalhes deverá possuir um botão ou link para retornar a listagem.
1. A tela de detalhes deverá possuir um botão ou link para retornar a listagem, além da navegação própria do navegador.

# Regras
## Regras

- Você pode discutir este exercícios com outras pessoas, mas não peça para ninguém escrever ou revisar seu código.
- A tela de listagem e a tela de detalhe devem ser telas distintas, com paths próprios.
- Você pode e deve usar IA para consultas e codificação assistida. Os prompts relevantes e arquivos de configuração de IA (CLAUDE.md, skills, etc) devem ser commitados junto com a solução para avaliação.
- Você deve usar uma biblioteca de estilização (por exemplo, o `tailwindcss`).
- Você pode nos contatar a qualquer momento para tirar suas dúvidas ou para qualquer outra necessidade.
- Você pode usar o Google para qualquer necessidade de consulta.
- Você pode usar qualquer biblioteca que julgar necessário.
- Para exibição da tela de detalhes não é necessário implementar nenhum mecanismo de rotas. Mas também não há problemas de adotar um pacote para este fim. No entanto, o detalhe deve ser exibido em uma tela em branco ou sobrepondo a listagem (modal).
- Não será necessário persistir a posição do scroll da listagem ao retornar do detalhe para a listagem.
- Realizar commits a cada tarefa concluída. Não faça apenas um commit no final.

# Bônus
## Bônus

- Utilização do `tailwindcss`.
- Demonstrar algum comportamento responsivo (desktop vs. mobile) com apenas um breaking point: 768px.
- Utilização de conceitos de atomic design.
- Comportamento adequado do botão "back" do browser ao voltar do detalhe para a listagem.

**Importante:** Ao tentar contemplar os itens de bônus, tenha em mente que não estamos avaliando a perfeição, e sim o equilíbrio entre objetivo principal, esforço esperado (12~16h) e a compreensão de conceitos. Os itens desta seção devem ser utilizados para facilitar o desenvolvimento e não trazer mais complexidade ao desafio.
- Testes automatizados.
- Otimizações de performance.
- Qualquer melhoria relevante que considerar.

# Critérios de avaliação
## Critérios de avaliação

- Não esperamos que você seja super familiarizado com React, Typescript, ou nada que utilizamos como stack padrão em nossa empresa.
- Fazer perguntas é positivo. Não penalizaremos por questionarem. No nosso ambiente de trabalho, preferimos que a pessoa gaste um tempo para entender o que deve ser feito, do que despender o dia inteiro implementando algo errado.
- Buscamos levantar indícios que você entende conceitos como separação de responsabilidades, reatividade, reaproveitamento de código, composição, eventos, promises.
- Buscamos levantar indícios que você entende conceitos como separação de responsabilidades, reatividade, reaproveitamento de código, composição, eventos, promises, arquitetura de solução. Além de entusiasmo por tecnologias emergentes.
- Como você conduziu a IA: como aplica visão crítica sobre o que ela gera e como estrutura o ambiente de IA para manter a solução sustentável.
- A API pode retornar erro. Seu código deverá tratar de forma amigável tais exceções. Exemplo: timeout, problemas de conexão, erro de rota, etc.
- Esperamos que seu código seja limpo, fácil de ser compreendido e testado. Comente seu código mas lembre-se que excesso de comentários também é fonte de poluição.
- Se você considerar este desafio muito complexo ou se sente travado, sinta-se à vontade em pedir nossa ajuda. Preferimos candidatos que atinjam seu objetivo, mesmo com auxílio, do que simplesmente desistir.
Expand All @@ -66,7 +63,7 @@ A ideia é simples, você deverá desenvolver 2 telas consultando uma API (Graph
- Completude do desafio
- Manutenibilidade

# FAQ
## FAQ

### Posso usar Next, Gatsby ou outro framework?

Expand Down