The Movie Guide 📽

Você pode acessá-lo com este link.

💻 Sobre

The Movie Guide é uma aplicação que reune informações sobre artistas e produções, o site também permite que usuários pesquisem e avaliem seus filmes favoritos, além de mudar a foto, nome de usuário e outras informações de seu perfil.

O deploy para produção foi feito com Vercel, e está disponibilizado neste endereço.

🚀 Tecnologias

The Movie Guide foi desenvolvido utilizando as seguintes tecnologias:

• React.js
• TypeScript
• Styled Components
• Redux
• React Router Dom
• The Movie Database API
• Framer Motion
• Material UI
• Vercel
• Vite.js
• Dropzone

✨ Features

Algumas features que valem a pena destacar:

✔ Upload de Imagens e alterar informações do usuário em “Meu Perfil”;
✔ Pesquisa por título ou ator/atriz;
✔ Avaliar filmes, adicionar aos favoritos ou à lista de já assistidos e recuperá-los em “Meu Perfil”;
✔ Recomendações de filmes;
✔ Filtro acumulativo de gêneros na Página Inicial;
✔ Alterne entre filmes populares, filmes em cartaz, filmes em lançamento ou mais bem avaliados;
✔ Scroll Infinito na página de Pessoas Populares;
✔ Paginação na Página Inicial;

👨‍💻 Rodando a Aplicação

Para executar o projeto, siga-os passos abaixo:

• Clonando o projeto

  git clone https://github.com/rhuanbello/the-movie-guide.git .

• Alternando para a branch de desenvolvimento

  git checkout develop

• Crie um arquivo .env na pasta raiz do projeto
• Solicite uma chave para a API do TMDB neste link e adicione ao arquivo .env criado

  VITE_API_KEY=SUA_CHAVE_AQUI

• Instalando as dependências

  yarn

• Execute a aplicação, o app estará disponível no endereço http://localhost:3000/

  yarn dev

👨‍💻 Contribuindo com a Aplicação

• Crie um fork do projeto
• Siga os passos acima
• Faça pull requests para a branch develop

🎨 Design de Interface

• A Interface do projeto foi desenvolvida utilizando o software Figma, você pode visualizar o layout através desse link.

Estrutura de Componentes da Aplicação

• pages
  • Home
    • <Header />
    • <GenresBanner />
    • <MoviesList />
    • <Pagination />
  • MovieDetails
    • <Header />
    • <MovieBanner />
    • <MovieCredits />
    • <MoviesList />
  • MyProfile
    • <Header />
    • <ProfileCover />
    • <MoviesList />
  • PopularPerson
    • <Header />
    • <PersonCards />
  • PersonDetails
    • <Header />
    • <PersonBanner />
    • <PersonCredits />
    • <MoviesList />

📝 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

Desenvolvido com 💛 por Rhuan Bello 👁️‍🗨️