Star Wars Characters

Descrição do Projeto

O Star Wars Characters é uma aplicação frontend que permite aos fãs da saga Star Wars explorar informações detalhadas sobre personagens do universo Star Wars. Utilizamos a API https://swapi.dev/ para obter dados em tempo real e a API https://starwars-visualguide.com/#/ para carregar imagens relacionadas aos personagens. O projeto foi desenvolvido usando a biblioteca React.js para criar uma interface de usuário interativa e responsiva.

Nota: As informações sobre filmes, planetas, naves, veículos e espécies ainda não estão disponíveis na primeira versão do projeto.

Design do Projeto

O design completo deste projeto está disponível no Figma. Você pode acessá-lo através do seguinte link:

Design do Star Wars Characters no Figma

O design no Figma oferece uma visão detalhada do visual e da estrutura do projeto, ajudando na compreensão e implementação das características visuais.

Funcionalidades Principais

• Pesquisar e visualizar informações sobre personagens, incluindo:
  • Nome
  • Ano de nascimento
  • Gênero
  • Cor dos olhos
  • Filmes em que o personagem aparece

Como Iniciar

1. Clone este repositório: git clone https://github.com/luizgsv/star-wars.git
2. Navegue até o diretório do projeto: cd star-wars
3. Instale as dependências: npm install
4. Inicie o servidor de desenvolvimento: npm start

A aplicação estará disponível em http://localhost:3000 em seu navegador.

Aviso

Para visualizar o projeto com a fonte correta de acordo com o design, certifique-se de baixar e instalar as fontes que estão localizadas na pasta /src/Assets/Fonts. As fontes desempenham um papel importante na aparência e na estética do projeto, e a instalação delas garantirá uma experiência visual consistente.

Para instalar as fontes, siga estas etapas:

1. Navegue até a pasta /src/Assets/Fonts no repositório.
2. Baixe as fontes necessárias (os arquivos de fonte geralmente têm extensões como .ttf ou .otf).
3. Instale as fontes no seu sistema operacional (isso pode variar dependendo do sistema que você está usando).
4. Reinicie ou recarregue a aplicação para que as fontes estejam disponíveis e sendo usadas de acordo com o design original.

Agora você estará pronto para visualizar o projeto com a fonte correta e desfrutar da experiência de design completa.

Contribuição

Se deseja contribuir para este projeto, siga estas etapas:

1. Faça um fork do projeto
2. Crie uma branch com a sua feature: git checkout -b feature/nova-feature
3. Faça commit das suas mudanças: git commit -m 'Adicione uma nova feature'
4. Faça push para a branch: git push origin feature/nova-feature
5. Abra um Pull Request

Bibliotecas e Ferramentas Utilizadas

Aqui estão as principais bibliotecas e ferramentas que foram utilizadas neste projeto:

• React Query (@tanstack/react-query): Uma biblioteca para gerenciamento de estado assíncrono que facilita a busca e a atualização de dados de forma eficiente.

• React Query Devtools (@tanstack/react-query-devtools): Uma extensão que fornece uma interface gráfica para depurar e inspecionar o estado gerenciado pelo React Query.

• Axios: Uma biblioteca HTTP cliente que simplifica as solicitações e respostas HTTP.

• Lucide React (lucide-react): Uma biblioteca para exibir ícones de forma fácil e escalável no seu aplicativo React.

• React: Uma biblioteca JavaScript para criar interfaces de usuário interativas.

• React Router DOM: Uma biblioteca que facilita a criação de navegação de página em aplicativos React.

• Styled Components: Uma biblioteca para escrever CSS no JavaScript, permitindo a criação de estilos dinâmicos para componentes React.

• Vite Plugin SVGR (vite-plugin-svgr): Um plugin Vite que permite importar arquivos SVG como componentes React.

Cada uma dessas ferramentas e bibliotecas desempenha um papel fundamental no desenvolvimento e na funcionalidade deste projeto, tornando-o mais eficiente e interativo.

Contato

• GitHub: https://github.com/luizgsv
• LinkedIn: https://www.linkedin.com/in/luiz-vargas/