Endereço surge: Jogo do Tarot
- Indice
- Imagens
- Estrura de Pastas e Arquivos
- Página Desktop Inicial
- Página Desktop dos Cards
- Página Desktop de Cards Embaralhado
- Página Desktop Popup do Card escolhido
- Página Mobile inicial - Responsive
- Página Mobile Cards - Responsive
- Página Mobile de Cards Embaralhado - Responsive
- Página Mobile Popup do Card escolhido - Responsive
- Tecnologias usadas
- Como executar na sua máquina
- Getting Started with Create React App
Desafio para os futuros front-end's do @Personare
A nossa Product Owner pensou em um produto fantástico para ser desenvolvido, e um dos desafios é criação de um jogo de Tarot.
Então, essa é a sua missão!
Criar um jogo de Tarot, permitindo o sorteio de uma carta.
E as especificações são:
- Tela de apresentação exibindo todas as cartas com seu conteúdo visível, e com um botão para iniciar o jogo.
- Ao clicar no botão, as cartas deverão ser viradas - escondendo o conteúdo - e embaralhadas.
- Permitir que o usuário selecione apenas uma carta, clicando na mesma.
- Apresentar a carta selecionada, o nome da carta e uma descrição. (a descrição pode ser um lorem ipsum)
OBS: As imagens e nomes das cartas estão listadas no arquivo tarot.json, esse arquivo deve ser consumido via http request. A propriedade image de cada carta deve ser concatenada com a propriedade imagesUrl, para obter o endereço final da imagem. Utilize o valor da propriedade imageBackCard para obter a imagem do fundo da carta.
- Efetue o fork deste repositório e crie um branch com o seu nome. (ex: caue-alves).
- Após finalizar o desafio, crie um Pull Request.
- Aguarde algum contribuidor realizar o code review.
- Aplicação feita em React
- Possuir testes
- Gerar versão de produção
- Criar micro commits ou commits por features
- Detalhar nos comentários dos commits as decisões tomadas.
- Boa documentação
- Testes de componentes isolados
Se surgir alguma dúvida, consulte as perguntas feitas anteriormente.
Caso não encontre a sua resposta, sinta-se à vontade para abrir uma issue =]
🎥 O app deverá ser criado usando React
Na raiz do projeto, será necessário incluir um arquivo README.md com as instruções para construir seu projeto localmente. Opcionalmente você pode detalhar as razões pelas escolhas de ferramentas e técnicas aplicadas ao desafio.
🎥 O app deverá se comportar da mesma forma na última versão estável dos seguintes browsers: Chrome, Firefox, Edge
🎥 O app deverá ser responsivo
📒 Documentação: explicação para construir o app localmente, histórico e workflow de git
📌CSS
Como de costume, atualmente está sendo uma boa prática os frameworks possuírem um cli (client) para ajudar na utilização do mesmo, assim como os outros o React também adotou esse padrão e criou seu cli, o famoso create-react-app. Com ele conseguimos criar uma aplicação em React, com boa parte das configurações realizadas (podem ser customizadas), com isso, conseguimos focar mais no aprendizado e desenvolvimento.
Para realizarmos a instalação do cli podemos realizar de duas maneiras: com yarn ou npm.
Não irei abordar como instalar ambos gerenciadores de pacotes ou dependência, porém, o processo instalação pode facilmente ser encontrado na documentação oficial de ambos.
Para realizar a instalação com Yarn, podemos rodar o comando global add:
yarn global add create-react-appPara realizar a instalação com npm, podemos rodar o comando install -g ou i -g:
npm install -g create-react-appOu
npm i -g create-react-appObs: Em ambos os casos estamos instalando o create-react-app como global, para que possa ser rodado em qualquer lugar do nosso terminal e compartilhado a mesma versão em todos os projetos (em alguns casos o pessoal preferem utilizar uma versão para cada projeto).
Pronto, agora que já temos nosso cli instalado, podemos finalmente criar a nossa app, o processo pode ser feito de duas maneiras diferentes, sendo elas: com o create-react-app ou npx.
A única diferença é que com o create-react-app precisamos tê-lo instalado em nossa máquina, agora o npx irá executar o create-react-app sem instalá-lo na máquina local.
Para criar uma aplicação com o create-react-app podemos fazer de duas maneiras: Em uma pasta já existente ou em uma nova pasta.
Para criarmos a aplicação (estou chamando de aplicação para melhor entendimento do post), em uma nova pasta apenas rodamos o create-react-app seguido pelo noma da aplicação:
create-react-app minha-primeira-app
Assim como podemos criar uma nova pasta, também podemos utilizar uma pasta já existente para criar nossa aplicação em React. A diferença é que devemos navegar até a pasta pelo terminal (cd caminho_ate_a_pasta) e em vez de passar um nome para o create-react-app passamos um . (para referenciar a pasta atual):
create-react-app .
Além de utilizar o create-react-app já instalado na máquina, podemos pedir para o npx executá-lo e criar nossa aplicação, nesse caso a instalação do create-react-app não precisa e nem será feita:
npx create-react-app minha-primeira-app
Com a nossa aplicação criada, podemos subí-la de duas maneiras, através do yarn ou npm, isso vai depender da sua preferência ou gosto por um desses gerenciadores de pacote. Para subir a app utilizando o yarn precisamos apenas rodar o comando start:Obs: A opção de utilizar uma pasta já existente, também vale para o npx e deve ser feita da mesma maneira, apenas adicionando o npx na frente do comando, ou seja, precisamos navegar até a pasta (cd) para executar o comando e passar um . em vez de um nome.
yarn startDe forma semelhante ao yarn, com o npm precisamos também rodar o start:
npm startou
npm run startEm ambos os casos, assim que nossa app subir, o navegador será automaticamente aberto com uma página principal padrão (default) do React.
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify