From 5d360747611f0f45cb05504005340f3850a1ba33 Mon Sep 17 00:00:00 2001 From: Pedro Augusto Godoi Medeiros <87546291+PedroAugMedeiros@users.noreply.github.com> Date: Wed, 6 Jul 2022 10:32:57 -0300 Subject: [PATCH 1/3] Update README.md --- README.md | 97 ++++++++++--------------------------------------------- 1 file changed, 17 insertions(+), 80 deletions(-) diff --git a/README.md b/README.md index 99f35d74..d85d7cc8 100644 --- a/README.md +++ b/README.md @@ -1,86 +1,23 @@ -# frontend-test +# Projeto -Desafio para Frontend Developer na DoroTech +Projeto de Front-End, consumindo a api The Rick And Morty API(https://rickandmortyapi.com), desenvolvido com conceito Mobile First -# Frontend na DoroTech +# Tecnologias + + ReactJs, React Router, React Hooks, JavaScript, TypeScript, HTML, CSS, StyledComponents, Axios. -Somos uma empresa com clientes que atuam em vários segmentos do mercado, com diferentes tecnologias, culturas e desafios. +## Documentações + ReactJs(https://pt-br.reactjs.org)
+ React Router(https://reactrouter.com)
+ React Hooks(https://pt-br.reactjs.org/docs/hooks-overview.html)
+ JavaScript(https://developer.mozilla.org/pt-BR/docs/Web/JavaScript)
+ TypeScript(https://www.typescriptlang.org/docs/)
+ HTML(https://developer.mozilla.org/pt-BR/docs/Web/HTML)
+ CSS(https://developer.mozilla.org/pt-BR/docs/Web/CSS)
+ StyledComponents(https://styled-components.com/docs)
+ Axios(https://axios-http.com/ptbr/docs/intro)
-Gostamos de compor nossos times com profissionais multidisciplinares, que tenham alta capacidade de aprendizado, sejam detalhistas, resilientes, questionadores e curiosos. -Você, como **Frontend Developer**, será o responsável por implementar, dar manutenção, aplicar correções e propor soluções em projetos de software. +# Como rodar -## Orientações -Para executar o desafio de **Frontend Developer**, você **deverá utilizar framework React**, seguindo o [passo a passo](https://github.com/dorotech/frontend-test#etapas) para a execução, atendendo aos [critérios de aceitação](https://github.com/dorotech/frontend-test#crit%C3%A9rios-de-aceita%C3%A7%C3%A3o). +# Link -## Desafio -Nossa equipe é apaixonada por **Rick and Morty**, o seu desafio será criar uma aplicação utilizando a API pública da série [https://rickandmortyapi.com/](https://rickandmortyapi.com/), para exibir a lista de personagens. -Veja a documentação [https://rickandmortyapi.com/documentation/#rest](https://rickandmortyapi.com/documentation/#rest). - -Os requisitos da aplicação: - -- Como usuário, desejo visualizar na página inicial, uma lista de 20 personagens, contendo **foto**, **nome** e **status**. -- Como usuário, desejo clicar em um personagem da lista, para visualizar informações detalhadas. -- Como usuário, desejo filtrar os personagens por **nome**, **espécie** e **status**. -- Seja criativo no layout: filtros, icones e menus são bem vindos. - -## Etapas - -#### 1 - Fazer um fork desse repositório - -![https://github.com/dorotech/frontend-test/raw/main/img/print-tutorial-1.png](https://github.com/dorotech/frontend-test/raw/main/img/print-tutorial-1.png) - - -#### 2 - Criar um branch com o seu primeiro e último nome -```bash -git checkout -b joao-silva -``` - -#### 3 - Escreva a documentação da sua aplicação -Você deve, substituir o conteúdo do arquivo **README.md** e escrever a documentação da sua aplicação, com os seguintes tópicos: -- **Projeto**: Descreva o projeto e como você o executou. Seja objetivo. -- **Tecnologias**: Descreva quais tecnologias foram utilizadas, enumerando versões (se necessário) e os links para suas documentações, qual guia de estilos de código você utilizou com o link para a sua documentação, quais bibliotecas instalou e porque. -- **Como rodar**: Descreva como iniciar a sua aplicação -- **Link** para acessar o projeto. - -#### 4 - Faça uma Pull Request -Após implementada a solução, crie uma [pull request](https://github.com/dorotech/frontend-test/pulls) com o seu projeto para esse repositório, avise o recrutador. - -## Critérios de Aceitação -Para que seu teste tenha o mínimo necessário que atenda aos requisitos esperados, ele deve: -- Atender ao que foi proposto no [Desafio](https://github.com/dorotech/frontend-test#Desafio). -- Utilização de pré-processadores CSS (Sass, Less). -- Interfaces responsivas para desktop, tablets e smartphones. -- Compatibilidade entre browsers. -- Padrão de escrita CSS (BEM, OOCSS, SMACSS). -- Código TS escrito com base em algum guia de estilos: [AirBnB Standards](https://github.com/airbnb/javascript) ou [TypeScript Google Guide](https://google.github.io/styleguide/tsguide.html). -- Utilizar padrões semânticos em mensagens de commit. (Gostamos do padrão de commits do repositório [AngularJS](http://karma-runner.github.io/3.0/dev/git-commit-msg.html)) -- Projeto feito upload: [Firebase hosting](https://firebase.google.com/docs/hosting/quickstart?hl=pt-br) ou [GitHub Pages](https://pages.github.com/). -- Caso você nao consiga completar tudo e tenha algum receio, não se preocupe, iremos avaliar o que foi entregue, mesmo com pendências. -- O diferencial para este desafio: layout, ux e ui, bem como implementação de boas práticas de segurança, performance e/ou estrutura. - - -## Dicas e Informações Valiosas - -#### O que gostaríamos de ver em seu teste: -- Upload do projeto em um seviço de hospedagem. -- Convenção de nome em classes, objetos, variáveis, métodos e etc. -- layout encantador -- Faça commits regulares. Eles são melhores do que um commit gigantesco. Gostaríamos de ver commits organizados e padronizados, então capriche neles! -- uso de libs como bootstrap, material -- Hooks é bem-vindo. -- Animações, coidado com UX e Sobras. -- Projeto feito usando TypeScript -- **Bônus** Dark Mode, implementação sendo um botão que mude o padrão de cores da pagina para escuro e claro com 1 click. -- **Bônus 2** QueryParams para buscas, quando uma busca e realizada, exibir na url o parametro da busca realizado, caso recaregar a pagina com a url, usar o parametro para preencher os itens da pagina. - -**Observação:** Nenhum dos itens acima é obrigatório. - -#### O que o seu Teste não deve ter: -- Saber que não foi você quem implementou o projeto. -- Varias bibliotecas instaladas sem uso. -- Falta de organização de código. -- Falta de documentação. -- Nome de variáveis sem sentido ou padrão de nomes. -- Histórico de commits desorganizado e despadronizado. - -## Boa Sorte!! From 184831b882adcd4e9cac03c70882c613f1e26b0c Mon Sep 17 00:00:00 2001 From: Pedro Augusto Godoi Medeiros <87546291+PedroAugMedeiros@users.noreply.github.com> Date: Wed, 6 Jul 2022 13:17:15 -0300 Subject: [PATCH 2/3] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d85d7cc8..e8af3b78 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Projeto +# Projetos Projeto de Front-End, consumindo a api The Rick And Morty API(https://rickandmortyapi.com), desenvolvido com conceito Mobile First From 0f268448c4e4ceb537f3881df4f7f8f5545de807 Mon Sep 17 00:00:00 2001 From: Pedro Augusto Godoi Medeiros <87546291+PedroAugMedeiros@users.noreply.github.com> Date: Wed, 6 Jul 2022 15:49:58 -0300 Subject: [PATCH 3/3] Update README.md --- README.md | 24 ++---------------------- 1 file changed, 2 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index e8af3b78..3ef81888 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,3 @@ -# Projetos - -Projeto de Front-End, consumindo a api The Rick And Morty API(https://rickandmortyapi.com), desenvolvido com conceito Mobile First - -# Tecnologias - - ReactJs, React Router, React Hooks, JavaScript, TypeScript, HTML, CSS, StyledComponents, Axios. - -## Documentações - ReactJs(https://pt-br.reactjs.org)
- React Router(https://reactrouter.com)
- React Hooks(https://pt-br.reactjs.org/docs/hooks-overview.html)
- JavaScript(https://developer.mozilla.org/pt-BR/docs/Web/JavaScript)
- TypeScript(https://www.typescriptlang.org/docs/)
- HTML(https://developer.mozilla.org/pt-BR/docs/Web/HTML)
- CSS(https://developer.mozilla.org/pt-BR/docs/Web/CSS)
- StyledComponents(https://styled-components.com/docs)
- Axios(https://axios-http.com/ptbr/docs/intro)
- -# Como rodar - -# Link +# Pedro Augusto Desafio Front End +# Projeto https://github.com/PedroAugMedeiros/ProjectRickMortyUniverses