Sobre o projeto
Desenvolvi este projeto com o intuito de criar um portfólio que demonstre toda a minha experiência em desenvolvimento front-end, a qual venho acumulando ao longo de alguns anos.
A proposta do projeto consiste em criar um aplicativo de memorização espaçada, projetado para auxiliar na memorização de diversos tipos de conteúdo, com foco especial em estudos de idiomas. A ideia para esse aplicativo surgiu quando comecei a aprender inglês.
O funcionamento do aplicativo é o seguinte: cada vez que o usuário adiciona uma palavra e sua tradução, o aplicativo armazena esses dados. Posteriormente, o usuário pode testar sua memória em relação a essas palavras por meio de jogos. Após acertar ou errar, o usuário pode escolher quando deseja revisar a palavra novamente.
Para a base tecnológica do projeto, optei pelo Next.js, um framework web que é fácil de trabalhar e escalável.
Para a implementação do back-end e do banco de dados, escolhi o Firebase, devido à sua ampla gama de funções integradas, como autenticação por email e senha, além de ser de fácil integração, o que acelerou o desenvolvimento.
Quanto à estilização, decidi utilizar o Tailwind CSS devido à sua alta produtividade, configuração flexível, reutilização de componentes e facilidade na criação de layouts responsivos.
Para a criação de jogos baseados em IA, fiz uso da API da OpenAI, que oferece uma forma simples de adicionar inteligência artificial a projetos de diversas naturezas.
Para testes, contei com o Jest e o Testing Library React.
No que diz respeito ao versionamento de código, utilizei o Git em conjunto com o GitHub e o gerenciador de pacotes npm para a instalação de dependências e outros pacotes do projeto.
Por fim, para hospedar o site, escolhi a plataforma da Vercel, que é a criadora do Next.js, tornando o processo de deploy mais simples.
Todo o código do projeto está nesse repositório no GitHub .
Acesse o aplicativo através deste link: relembra-ai.vercel.app .
Funcionalidades
- Cadastro de usuário
- Login e autenticação de usuário
- CRUD completo
- Adição automática de imagem em novos cards
- Jogo de adivinhação de palavras cadastradas
- Lógica de repetição espaçada adaptativa
- Gráficos de acompanhamento do progresso de aprendizado
- Edição e exibição do perfil do usuário
- Sistema de níveis que aumenta conforme usuário realiza atividades
- Jogo de adivinhação de palavras com alternativas geradas por IA
Tecnologias
- ReactJs
- NextJs
- TailwindCSS
- Firebase
- Unsplash API
- Axios
- Date-fns
- OpenAi
- React Icons
- recharts
- jest
- Testing Library React
Figma
Criei o design completo do app usando o Figma. Confira-o neste link .