Cinepédia-v2

Aplicação web no formato SPA, feita com React alimentada com a API do TMDB (The Movie Data Base). A aplicação possui recomendações de filmes/séries e uma busca por algum item específico.

Projeto Online

Pré-requisitos

Antes de executar este projeto, verifique se você atende aos seguintes requisitos:

1. Node.js (versão 18.16.0 ou superior)
2. Visual Studio Code (ou qualquer outro editor de sua preferência) Certifique-se de ter o Node.js instalado em seu sistema e definido no PATH. Você pode verificar se o Node.js está instalado digitando o seguinte comando no terminal:

node --version

Além disso, é recomendado utilizar o Visual Studio Code como editor de código, mas você pode optar por qualquer outro editor de sua preferência.

Para utilizar o Projeto

Siga as etapas abaixo para configurar e executar o projeto:

1. Adicione sua chave no TMDB em src/services/api.js.
2. No prompt, navegue até a pasta raiz do projeto. 3.Instale as dependências necessárias executando o comando:

yarn install

ou

npm install

4. Rode o projeto utilizando o comando:

yarn start

ou

npm start

Certifique-se de substituir sua-chave pelo valor correto da sua chave no arquivo src/services/api.js.

Créditos

1. Icone da aplicação retirado do site Flaticon: Cinema icons created by Freepik - Flaticon
2. Fundos SVG retirados do site HeroPatterns: Hero Patterns

Inspiração

A idéia veio do projeto AluraFlix, o último challenge do Projeto Oracle ONE da formação front-end. A base era um site com links fixos de vídeos do YouTube baseados em algum tema. Resolvi adaptar e fazer um site com informações de filmes e séries, alimentado por uma API.

Funcionalidades

1. Carrosséis de Recomendação

   1. Na página inicial, há um carrossel com os filmes mais buscados e com as melhores notas, e também existe uma página dedicada a dois carrosséis, de novidades e futuros lançamentos.
      1. Feito com react-alice-carousel.
      2. O carrossel com os filmes mais buscados está disponível apenas para computador, devido as limitações de tamanho da tela. Mas página a dedicada a dois carrosséis, de novidades e futuros lançamentos permanece para a versão mobile.
   2. O carrossel gira automaticamente a cada 2 segundos, ele para de girar colocando o cursor em cima do carrossel, permitindo arrastar ou clicar nos botões para navegar entre os itens.
   3. Ao clicar no pôster, uma janela flutuante é exibida com mais informações.
      1. Para fechar a janela flutuante, basta clicar no botão fechar, pressionar a tecla ESC ou clicar fora da janela.
   4. Cada item trás o tipo de mídia (filme ou série), poster, título, nota e data de lançamento.
      1. A nota possui um css que varia de acordo com a nota, sendo preenchido com um radial grandient e varias especificações via JS para refletir melhor a nota visualmente.

2. Pesquisa de Filmes/Séries

   1. É possível pesquisar por um item específico (filme ou série) com 3 campos: uma palavra chave que faz parte do nome do item (obrigatório), ano de lançamento (opcional - não é o ano mínimo, mas o ano exato do lançamento), nota mínima (opcional).
   2. Ele retorna um carrossel semelhante ao carrossel de recomendações, a única diferença é que ele não gira automaticamente para o usuário poder analisar melhor os resultados, a navegação é feita arrastando ou clicando nos botões para navegar entre os itens.

3. Janela flutuante com detalhes dos itens

   1. A janela flutuante trás informações como: nome da mídia, tipo de mídia, gênero da mídia, ano de lançamento, sinopse (se disponível), trailers (se disponível), provedores para assistir (se disponível) - ex: amazon, netflix, etc.
      1. Janela flutuante feita com react-modal-dialog e devido as restrições dos frames com link por variáveis, player de vídeo feito com react-player.
      2. Para fechar a janela flutuante, basta clicar no botão fechar, pressionar a tecla ESC ou clicar fora da janela.
      3. Os provedores para assistir estão separados por streaming, aluguel e compra. Eles também estão filtrados para mostrarem somente opções que tenham conteúdo dublado ou legendado em pt-BR.

4. Variação de Temas - Escuro (padrão) e Claro

   1. Botão de switch de temas, que altera a imagem de background, a cor do background, a cor das sombras, a cor das fontes, a cor das bordas, etc.
      1. Feito com ThemeProvider do styled-components.
      2. Utilizado um hook personalizado para switch dos temas e outros componentes que precisam de controles true/false.

5. Responsivo

   1. Todos os itens foram trabalhados de forma responsiva, se adaptando a desktops e dispositivos móveis.
      1. Dentro do GlobalStyles, foram configuradas duas classes globais apenas-desktop e apenas-mobile, ao colocar essa classe em um item ele irá ser um item que renderiza somente em um determinado tipo de resolução.

Imagens do Projeto

Desktop

Mobile

Sobre a Dev

Olá! Sou Letícia Palaro, uma mulher entusiasmada e determinada, formada em Análise e Desenvolvimento de Sistemas e atualmente cursando uma pós-graduação em Gestão de Projetos.

Desde a minha infância, fui cativada pela tecnologia. Tudo começou com o incrível universo dos jogos, onde embarquei em emocionantes aventuras com o meu querido Nintendo64. À medida que o tempo passava, acompanhei a evolução tecnológica, migrando para os jogos de computador e experimentando novas possibilidades.

Sou movida pela paixão de aprender constantemente, e essa mentalidade me impulsiona a me concentrar ao máximo nas minhas atividades.

Com determinação e entusiasmo, estou pronta para enfrentar os desafios futuros e contribuir para um mundo impulsionado pela tecnologia.

Contato