Vamos criar um jogo da memória? Que tal testar suas habilidades com uma combinação de React JS, Typescript, Vite e Tailwind CSS? Juntos, vamos desenvolver um jogo da memória inspirado em um dos animes mais icônicos de todos os tempos: Dragon Ball Z.

🤓 Antes de começar

Este mini projeto já contém todas as informações dos cards que serão utilizados no jogo, dentro do diretório /src/utils/data.ts. As imagens necessárias encontram-se no diretório /public/images. Sinta-se à vontade para utilizá-las ou substituí-las por outras imagens de sua preferência.

🔨 Requisitos

• Utilize React JS + TypeScript + Vite + Tailwind CSS.
• Crie uma tela inicial de login para armazenar o nome do jogador.
• Crie uma tela de jogo exibindo um header e os cards.
• O header deve exibir o nome do jogador e um timer contando os segundos.
• Os cartões começam virados para baixo e, ao clicar neles, são revelados.

• Se a próxima carta revelada combinar com o par, elas permanecem visíveis; caso contrário, a carta é virada novamente.

  👀 Dicas:

  • Busque reutilizar componentes.
  • Fique à vontade para utilizar qualquer gerenciador de estado.
  • Em dúvida sobre como criar animação das cartas? Dá uma olhadinha no React Card Flip.

🔨 Desafio extra para quem quer ir além

• Quando todas as cartas forem selecionadas, o timer é interrompido e uma mensagem de resultado é exibida, juntamente com a opção de recomeçar o jogo por meio de um botão.
• Crie uma página de erro 404 criativa que deve ser renderizada ao tentar acessar uma rota inexistente.

💻 Setup do projeto

O projeto com a estrutura inicial já estará disponível para você na branch principal do repositório. Sua responsabilidade será apenas implementar a lógica de acordo com o passo a passo acima.

🔍 Dicas

• Estude sobre componentização, estados e passagem de props.
• Estude sobre criação de rotas no React.
• Estude sobre tipagem de dados com TypeScript.
• Estude sobre Tailwind CSS e utilize com frequência a documentação.

🎨 Design Sugerido

Temos uma sugestão de design no Figma. Entretanto, fique à vontade para montar a aplicação conforme sua criatividade.

Figma

🔗 Link do design

👉🏽 Sobre esse mini-projeto

O que você irá aprender

• Tecnologias:
  • React JS;
  • React Router Dom;
  • TypeScript;
  • Tailwind CSS;
  • React Card Flip;