The Simpsons Wiki

Este projeto é uma aplicação web desenvolvida com React, TypeScript e Vite que permite aos usuários explorar e pesquisar personagens da famosa série de TV "Os Simpsons".

A aplicação consome a The Simpsons API para exibir informações detalhadas sobre os personagens como: nome, imagem, gênero, local de origem, entre outros.

Demonstração

Você pode ver o projeto completo clicando aqui.

Funcionalidades

A aplicação oferece as seguintes funcionalidades principais:

• Listagem de Personagens: Exibe uma lista de personagens com suas respectivas imagens e informações.
• Paginação: Navegação entre as páginas de resultados da API através dos botões "Anterior" e "Próximo".
• Filtragem em Tempo Real: Campo de busca que permite filtrar os personagens exibidos na tela pelo nome.
• Disabled Buttons: Desabilita os botões de paginação quando não há mais resultados para exibir ou a paginação está no limite.
• Atributo Title: Adiciona um atributo title aos botões e alguns conteúdos do card para melhorar a acessibilidade.
• Componentes: Criação de componentes altamente reutilizáveis e com tipagem estática.
• Funções Utilitárias: Funções de propósito geral que oferecem serviços genéricos, como conversão de dados.
• Custom Hooks: Como useFetch para gerenciar a requisição à API.
  • Generics: Custom hook que pode ser reutilizado para qualquer tipo de requisição à API com auxilio do Generics <T>.
  • Error Handler: Tratamento de erros com try catch, para que a aplicação não quebre em caso de falha na requisição à API.
• Feedback Visual:
  • Loading: Indicador visual enquanto os dados estão sendo carregados.
  • Erro: Mensagem de erro amigável caso ocorra alguma falha na requisição à API.
  • Não Encontrado: Mensagem informativa quando a busca não retorna nenhum resultado.
  • truncateText: Adiciona reticências (...) ao texto quando ele ultrapassa um comprimento máximo.
  • charactersFilter: Filtra personagens por nome ao digitar no input.
• Design Responsivo: Interface adaptável a diferentes tamanhos de tela.

Estrutura do Projeto

A estrutura de diretórios do projeto é organizada da seguinte forma:

src/
├── components/      # Componentes de UI (Card, Loading, Error, etc.)
│   └── ui/          # Componentes genéricos reutilizáveis (Button, Input)
├── hooks/           # Custom hooks (useFetch)
├── types/           # Definições de tipos TypeScript
├── util/            # Funções utilitárias (charactersFilter, truncateText)
├── App.tsx          # Componente principal da aplicação
└── main.tsx         # Ponto de entrada da aplicação

Licença

Este projeto está sob a licença MIT, veja o arquivo LICENSE para mais detalhes.

Contato

Me siga nas redes sociais para ficar por dentro das novidades!

• LinkedIn
• GitHub
• Email