Este projeto de jogo de Tarot foi desenvolvido para qualquer pessoa interessada em explorar e desfrutar da experiência do Tarot online. Ele é voltado para entusiastas do Tarot, curiosos e jogadores que desejam se envolver com as cartas de forma interativa. A aplicação proporciona uma maneira divertida e envolvente de aprender sobre as diferentes cartas e seus significados, permitindo que os usuários experimentem o jogo de Tarot de maneira virtual.
✔ 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)
- Cards interativos
- Preview em tempo real
- Design responsivo
- Multiplataforma
- HTMl5
- Javascript
- TailwindCSS
- React + ViteJS
Clone o projeto
git clone: https://github.com/Rvferrao/TAROT-PROJECT/tree/mainEntre no diretório do projeto
cd TAROT-GAMEInstale as dependências
npm installInicie o servidor
npm run dev: inicie dessa forma para modificações no projeto.
npm run preview: inicie uma prévia do projeto.Para utilizar os testes primeiro instale a ferramente de testes Cypress:
npm install cypressLogo após instalar verifique se o projeto está rodando e abra a ferramenta:
npx cypress openo cypress será executado pelo navegador de sua escolha, na tela de escolha selecione a forma de teste E2E.
O primeiro teste verifica se o elemento h1 contém o texto correto. Ele localiza o elemento através do atributo data-test e verifica se o texto "TAROT GAME" está presente, clicando no elemento em seguida.
O segundo teste verifica se o botão principal está funcionando corretamente. Ele encontra o elemento do botão através do atributo data-test e o clica usando a opção force: true.
Em seguida, temos um bloco describe que agrupa outros testes relacionados aos cartões do jogo. Dentro desse bloco, temos um teste que verifica se apenas um cartão está aberto, clicando no botão principal e, em seguida, clicando em um ou mais cartões.
O próximo teste dentro do bloco verifica se os cliques nos cartões não os viram novamente, garantindo que os cartões não sejam abertos repetidamente.
Por fim, temos um teste que reinicia o jogo, clicando novamente no botão principal.
Esses testes permitem verificar se os elementos do aplicativo estão sendo exibidos corretamente, se as interações estão funcionando adequadamente e se o fluxo do jogo está sendo seguido corretamente. Eles ajudam a identificar problemas e garantir a qualidade do aplicativo.
-
Integração de tecnologias: Aprendi como integrar JavaScript, HTML5, React, Vite.js, TailWindCSS e Cypress.
-
Foco em UX: Pude destacar a importância da interatividade e experiência do usuário no design do jogo.
-
Testes automatizados: A implementação de testes com Cypress ajudou a garantir a qualidade do projeto.
A plataforma escolhida foi a vercel por alguns fatores que facilitaram na hora de subir a aplicação:
- Implantação simples e automática de aplicativos web conectados a repositórios Git.
- Escalabilidade automática para lidar com picos de tráfego.
- Pré-renderização estática de páginas para melhorar o desempenho.
- Integração contínua nativa para automação de testes, construções e implantações.
- Suporte a domínios personalizados e SSL gratuito.
- Recursos de análise e monitoramento para otimização e tomada de decisões informadas.