Este projeto é uma aplicação web que consome a API da Marvel para exibir personagens, quadrinhos e outros dados relevantes sobre o universo Marvel. Ele utiliza tecnologias modernas como React, Vite e Zustand para gerenciamento de estado e performance.
- React: Biblioteca JavaScript para criação de interfaces de usuário.
- Vite: Ferramenta de build rápida e otimizada para desenvolvimento de front-end.
- Zustand: Biblioteca para gerenciamento de estado leve e escalável.
- Styled-components: Para estilização dinâmica dos componentes React.
Você pode acessar o site de demonstração do projeto clicando no link abaixo: Site de Demonstração
Antes de começar, certifique-se de ter as seguintes ferramentas instaladas:
- Node.js (versão 14 ou superior)
- npm ou yarn
Siga os passos abaixo para rodar o projeto localmente:
- Clone o repositório:
git clone https://github.com/carvalhoandre/marvel_heroes.git
- Clone o repositório:
cd marvel_heroes
- Instale as dependências: Se estiver usando npm:
npm i
Se estiver usando yarn:
yarn
- Instale as dependências: Crie um arquivo .env na raiz do projeto com as seguintes variáveis:
VITE_PUBLIC_KEY=YOUR_PUBLIC_KEY
VITE_PRIVATE_KEY=YOUR_PRIVATE_KEY
VITE_BASE_URL=https://gateway.marvel.com/v1/public
As chaves PUBLIC e PRIVATE podem ser obtidas criando uma conta na API da Marvel.
- Para rodar o projeto em ambiente de desenvolvimento: Se estiver usando npm:
npm run dev
Se estiver usando yarn:
yarn dev
- Abra o navegador e acesse:
http://localhost:8080
- Acesse o site da Marvel Developer.
- Crie uma conta ou faça login.
- Navegue até a seção My Developer Account.
- Gere suas chaves PUBLIC e PRIVATE.
- Preencha o arquivo .env com as chaves e o BASE_URL da API.
- Busca de personagens e quadrinhos.
- Visualização detalhada dos personagens.
- Sistema de favoritos para personagens.
- Paginação de resultados.