O Anime Catalog é uma aplicação de catálogo de animes, desenvolvida com o intuito de consumir e explorar informações de animes e aplicar boas práticas de código e experiência do usuário. A aplicação possui uma tela inicial que lista os animes animes em destaque e também alguns animes por categoria. Ela também possui uma tela de detalhe que trás mais informações sobre o anime e é possível assistir o trailer do anime.
Para o gerenciamento do projeto utilizei o github project, lá centralizei as tarefas que precisavam ser desenvolvidas e criei branch para cada uma. Segue link do github project: Link
- Layout responsivo
- Listar animes da API Kitsu
- Tela home para exibição dos animes
- Tela de detalhes dos animes
- Modal pra reprodução do trailer
- Padronização de código utilizando ESlint e Prettier
- Padronização de commits utilizando Husky
Para o desenvolvimento da página de detalhes optei o usar o SSG(Static Site Generation) porque como as informações do animes não tendem a mudar com frequência, servir a página estática vai ajudar na performance e experiência do usuário. O cache está configurado para 1 dia.
O projeto foi desenvolvido utilizando as seguintes tecnologias:
- ReactJS
- Next.js
- Ant. Design
- Less
- Vercel
- Typescript
- Axios
- Husky
- API Kitsu
- VS Code with ESLint and Prettier
Para clonar e executar esta aplicação na sua máquina é necessário ter instalado:
Para configurar a aplicação também é preciso ter:
- Criar arquivo .env.local e adicionar a chave
BASE_URLcom a url da api kitsu:https://kitsu.io/api/edge
# Clonar o repositório
$ git clone https://github.com/felipeAndrade04/animes-catalog.git
# Entrar no diretório
$ cd animes-catalog
# Instalar as dependências
$ yarn install ou npm install
# Duplicar o arquivo .env.local.example, renomear para .env.local e substituir as informações de acesso no seu devido local.
# Iniciar o projeto
$ yarn dev ou npm run dev
Desenvolvido por Felipe Andrade
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent