Skip to content

🎬 Search for your favorite movies, log in with your Google or Twitter account, and add to your favorites ♥️

License

Notifications You must be signed in to change notification settings

Antonio-Savio/PopcornGuide

Repository files navigation

PopcornGuide

Versão em português

💡 Sobre

Plataforma que lista os filmes em destaque no momento. Pesquise os seus filmes prediletos, faça login com sua conta Google, ou Twitter, e adicione aos favoritos clicando no ♥️. Você pode ver os filmes salvos na opção ‘Favorites’. Cada filme possui um página com detalhes, tais como descrição do filme, ano de lançamento, duração, gêneros e número de estrelas.

🌎 Acesse a plataforma

PopcornGuide

💻 Visão Geral

Prévia PopcornGuide Prévia em celular PopcornGuide

✅ Funcionalidades

  • Consumo da API do TMDB.
  • Tela principal com filmes em destaque do momento.
  • Paginação.
  • Pesquisa de filmes por palavras-chave.
  • Login social com o Google e Twitter usando Nextauth.js.
  • Botão em formato de coração para salvar filmes favoritos.
  • Os filmes salvos são armazenados em um banco no Firebase e exibidos na página de 'Favorites' em ordem de data de salvamento.
  • Proteção de rotas:
    • Apenas usuários logados podem salvar os favoritos.
    • Caso o usuário não logado tente acessar a aba de 'Favorites', ou clique no '♥️' , ele será redirecionado para tela de login.
  • Página de detalhes, com dados como ano de lançamento, duração, gêneros, países de produção, número de estrelas e o mesmo botão de Favorito.
  • Componentes de card do filme, input de pesquisa, botão de favorito e header reaproveitados em páginas diferentes.
  • Metadatas dinâmicas para cada filme.
  • Loader animado.

⚙️ Tecnologias

  • Next.js: framework React que permite criação nativa de rotas e renderização ao lado do servidor. Junto com todas as funcionalidades do React, se torna uma poderosa ferramenta front-end.
  • Nextauth.js: para criar autenticação de usuários com login social usando os providers do Google e Twitter (X).
  • TypeScript: garante a segurança de tipos, detecta erros durante o desenvolvimento, melhora a qualidade do código e aumenta a produtividade.
  • Firebase: foi usado o Cloud Firebase, um banco não-relacional para armazenar dados dos filmes favoritos.
  • Tailwind CSS: framework CSS baseado em classes. Usado para estilizar os componentes e definir layout flexbox/grid.
  • API do The Movie Database (TMDB): API com diversos endpoints com imagens e dados de filmes.

📁 Estrutura do Projeto

O projeto está organizado na seguinte estrutura:

public/ # Arquivos estáticos, como imagens.
src/
├── app/ # Arquivos principais e rotas
│  ├── api/auth/[...nextauth]/ # Rota de autenticação (NextAuth)
│  ├── favorites/ # Página de favoritos
│  ├── login/ # Página de login
│  ├── movie/[id]/ # Página dinâmica de detalhes do filme
│  ├── search/[title]/ # Página dinâmica de busca de filmes
│  ├── profile/ # Página de perfil do usuário
│  └── layout.tsx # Layout principal
│  └── loading.tsx # Componente de carregamento
│  └── not-found.tsx # Página "não encontrado"
│  └── page.tsx # Página inicial
├── components/ # Componentes reutilizáveis
├── services/
│  └── firebaseConnection.ts # Conexão com o Firebase
├── utils/ # funções e tipagens reutilizáveis
│  ├── currency/ # Utilitários de formatação de moeda
│  ├── time/ # Utilitários de conversão de tempo
│  ├── types/ # Tipos relacionados a filmes

🚀 Como rodar o projeto

Requisitos

  • Node.js instalado
  • Gerenciador de pacotes npm ou yarn

Passo a passo

  1. Clone o repositório:
git clone https://github.com/Antonio-Savio/PopcornGuide.git
  1. Instale as dependências:
cd PopcornGuide
npm install
  1. Crie um arquivo .env na raiz do projeto e adicione todas suas configurações da API, providers de autenticação, do NextAuth.js e Firebase:
NEXT_API_URL=https://api.themoviedb.org/3 # Checar documentação da API
NEXT_IMAGE_URL=https://image.tmdb.org/t/p/original # Checar documentação da API
NEXT_API_KEY='YOUR_API_KEY_HERE'

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET='YOUR_NEXTAUTH_SECRET'

GOOGLE_CLIENT_ID='YOUR_GOOGLE_CLIENT_ID'
GOOGLE_CLIENT_SECRET='YOUR_GOOGLE_CLIENT_SECRET'

TWITTER_CLIENT_ID='YOUR_TWITTER_CLIENT_ID'
TWITTER_CLIENT_SECRET='YOUR_TWITTER_CLIENT_SECRET'

NEXT_PUBLIC_FIREBASE_API_KEY='YOUR_API_KEY_HERE'
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN='YOUR_AUTH_DOMAIN_HERE'
NEXT_PUBLIC_FIREBASE_PROJECT_ID='YOUR_PROJECT_ID_HERE'
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET='YOUR_STORAGE_BUCKET_HERE'
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID='YOUR_MESSAGING_SENDER_ID_HERE'
NEXT_PUBLIC_FIREBASE_APP_ID='YOUR_APP_ID_HERE'
  1. Rode o projeto localmente:
npm run dev
  1. Acesse a aplicação em: http://localhost:3000.

📄 Licença

Este projeto é licenciado sob a Licença MIT.

Você é livre para usar, modificar e distribuir este software para fins pessoais e comerciais, desde que a licença original e o aviso de direitos autorais sejam incluídos. Não há garantia para o código fornecido, e o autor não é responsável por quaisquer problemas decorrentes do uso deste software.




English version

💡 About

Platform that lists the currently trending movies. Search for your favorite movies, log in with your Google or Twitter account, and add to your favorites by clicking on the ♥️. You can view saved movies in the 'Favorites' option. Each movie has a details page with information such as movie description, release year, length, genres, and number of stars.

🌎 Access the platform

PopcornGuide

💻 Overview

PopcornGuide Preview PopcornGuide Mobile Preview

✅ Features:

  • Consumption of the TMDB API.
  • Main page with currently trending movies.
  • Pagination.
  • Movie search by keywords.
  • Social login with Google and Twitter using Nextauth.js.
  • Heart-shaped button to save favorite movies.
  • Saved movies are stored in a Firebase database and displayed on the 'Favorites' page in order of the date they were saved.
  • Protected routes:
    • Only logged-in users can save favorites.
    • If a non-logged-in user tries to access the 'Favorites' tab or clicks on the '♥️' button, they will be redirected to the login page.
  • Details page with information such as release year, duration, genres, production countries, number of stars, and the same Favorite button.
  • Reusable components for movie cards, search input, and favorite button across different pages.
  • Dynamic metadata for each movie.
  • Animated loader.

⚙️ Technologies

  • Next.js: React framework that enables native route creation and server-side rendering. Together with all React functionalities, it becomes a powerful front-end tool.
  • Nextauth.js: to create user authentication with social login using Google and Twitter (X) providers.
  • TypeScript: ensures type safety, catches errors during development, improves code quality, and increases productivity.
  • Firebase: Cloud Firebase was used, a non-relational database to store data of favorite movies.
  • Tailwind CSS: class-based CSS framework. Used to style components and define flexbox/grid layout.
  • The Movie Database (TMDB) API: API with various endpoints providing images and data of movies.

📁 Project Structure

The project is organized in the following structure:

public/ # Static files, such as images.
src/
├── app/ # Main files and routes
│  ├── api/auth/[...nextauth]/ # Authentication route (NextAuth)
│  ├── favorites/ # Favorites page
│  ├── login/ # Login page
│  ├── movie/[id]/ # Dynamic movie details page
│  ├── search/[title]/ # Dynamic movie search page
│  ├── profile/ # User profile page
│  └── layout.tsx # Main layout
│  └── loading.tsx # Loading component
│  └── not-found.tsx # "Not found" page
│  └── page.tsx # Home page
├── components/ # Reusable components
├── services/
│  └── firebaseConnection.ts # Firebase connection
├── utils/ # Reusable functions and typings
│  ├── currency/ # Currency formatting utilities
│  ├── time/ # Time conversion utilities
│  ├── types/ # Movie-related types

🚀 How to run the project

Requirements

  • Node.js installed
  • Package manager npm or yarn

Steps

  1. Clone the repository:
git clone https://github.com/Antonio-Savio/PopcornGuide.git
  1. Install the dependencies:
cd PopcornGuide
npm install
  1. Create a .env file at the root of the project and add all your API settings, authentication providers, NextAuth.js, and Firebase configurations:
NEXT_API_URL=https://api.themoviedb.org/3 # Check the API docs
NEXT_IMAGE_URL=https://image.tmdb.org/t/p/original # Check the API docs
NEXT_API_KEY='YOUR_API_KEY_HERE'

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET='YOUR_NEXTAUTH_SECRET'

GOOGLE_CLIENT_ID='YOUR_GOOGLE_CLIENT_ID'
GOOGLE_CLIENT_SECRET='YOUR_GOOGLE_CLIENT_SECRET'

TWITTER_CLIENT_ID='YOUR_TWITTER_CLIENT_ID'
TWITTER_CLIENT_SECRET='YOUR_TWITTER_CLIENT_SECRET'

NEXT_PUBLIC_FIREBASE_API_KEY='YOUR_API_KEY_HERE'
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN='YOUR_AUTH_DOMAIN_HERE'
NEXT_PUBLIC_FIREBASE_PROJECT_ID='YOUR_PROJECT_ID_HERE'
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET='YOUR_STORAGE_BUCKET_HERE'
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID='YOUR_MESSAGING_SENDER_ID_HERE'
NEXT_PUBLIC_FIREBASE_APP_ID='YOUR_APP_ID_HERE'
  1. Run the project locally:
npm run dev
yarn dev
  1. Access the application at: http://localhost:3000.

License 📄

This project is licensed under the MIT License.

You are free to use, modify, and distribute this software for personal and commercial purposes, as long as the original license and copyright notice are included. There is no warranty for the code provided, and the author is not liable for any issues arising from the use of this software.

About

🎬 Search for your favorite movies, log in with your Google or Twitter account, and add to your favorites ♥️

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages