🎥 Site de Filmes, Séries e Artistas

Tecnologias   |    Projeto   |    Funcionalidades   |    Requisitos   |    TMDB   |    Instalação   |    Miscelâneas   |   

Clique aqui para acessar o projeto online

💥 Tecnologias

Este projeto foi desenvolvido com as seguintes tecnologias:

• HTML5
• CSS3
• JavaScript
• TypeScript
• UnoCSS
• Google Fonts
• Pnpm
• ESLint
• Commitlint
• Lintstage
• Vite
• Vue.js
• Vue Router
• Vue I18n
• VueUse
• Vitest
• Vue Test Utils
• Nock
• Playwright
• Lefthook
• Moment.js
• Notivue
• Git
• GitHub
• GitHub Actions

💻 Projeto

Este projeto é um site para exibição dos filmes, séries e atores mais populares mundialmente. Desenvolvido como um projeto pessoal, ele visa praticar minhas habilidades em desenvolvimento frontend com Vue.js, incluindo design responsivo e cobertura completa de testes unitários e e2e.

✅ Funcionalidades

• Tour Interativo: Apresenta as principais funcionalidades do site ao usuário de forma guiada e didática.
• Menu de Filmes: Exibe os 20 filmes mais populares e os 20 filmes em cartaz atualmente, com base nas avaliações do IMDB. Inclui tela de detalhes com trailer, elenco e imagens do filme.
• Menu de Séries: Exibe as 20 séries mais populares e as 20 séries em exibição, com base nas avaliações do IMDB. Inclui tela de detalhes com trailer, elenco e imagens da série.
• Menu de Artistas: Exibe os 20 artistas mais populares, com scroll infinito para carregar mais artistas. Inclui tela de detalhes com informações e créditos dos artistas.
• Troca de Idioma: O site suporta troca de idioma entre português e inglês.
• Troca de Tema: Alterna entre tema claro e escuro.
• Busca Avançada: Permite procurar filmes, séries ou artistas por nome, com sugestões exibidas a partir de 3 caracteres.
• Design Responsivo: Layout 100% responsivo, adaptado para diferentes dispositivos.

📄 Requisitos

• Navegador: Versão mais recente do Chrome, Firefox, Edge, Safari, Opera, ou outro navegador moderno.
• Pnpm: Gerenciador de pacotes Pnpm.
• API Read Access Token: Chave de acesso da API do TMDB.

🎬 Cadastro no TMDB e Obtenção da Chave API

1. Cadastre-se no TMDB.
2. Verifique seu e-mail e acesse a página API Settings para obter a chave API Read Access Token.

⚙️ Instalação e Execução

Passos para Instalação

1. Clone o repositório ou baixe o arquivo ZIP:

   git clone https://github.com/randercarlos/movie-app.git

2. Navegue até a pasta do projeto:

   cd movie-app

3. Instale as dependências:

   pnpm install

4. Configure a chave da API:

   • No arquivo .env, insira a chave VITE_TMDB_TOKEN sem aspas:

     VITE_TMDB_TOKEN=[sua-api-key-do-TMDB]

5. Execute o servidor:

   pnpm run dev

6. Acesse o site: Abra http://localhost:5173/ no seu navegador.

🎨 Miscelâneas

Checagem de código com ESLint

1. Checa erros de código sem corrigi-lo:

   pnpm run lint:check

2. Checa erros de código com correção:

   pnpm run lint:fix

Comandos para build do código

1. Checa erros de tipagem do código:

   pnpm run type-check

2. Realiza o build do projeto para produção:

   pnpm run build
   

3. Preview do projeto em ambiente de produção no ambiente local:

   pnpm run preview

4. Roda o commintlint para fazer commit semântico:

   pnpm run commitlint

Comandos para testes unitários e e2e do código

1. Roda testes unitários e e2e no terminal em modo verboso:

   pnpm run test

2. Roda testes unitários e e2e no terminal para CI/CD:

   pnpm run test:ci

3. Roda testes unitários terminal em modo verboso:

   pnpm run test:unit

4. Roda testes unitários com cobertura de código no browser:

   pnpm run test:unit:ui

5. Roda testes unitários no terminal para CI/CD:

   pnpm run test:unit:ci

6. Roda testes unitários com cobertura de código no terminal:

   pnpm run test:unit:coverage

7. Roda testes e2e no terminal em modo verboso:

   pnpm run test:e2e

8. Roda testes e2e no browser:

   pnpm run test:e2e:browser

9. Roda testes e2e na interface gráfica do playwright(debug, locator, logs...):

   pnpm run test:e2e:ui

10. Roda testes e2e no terminal para CI/CD:

    pnpm run test:e2e:ci

11. Roda somente testes e2e que falharam no terminal:

    pnpm run test:e2e:failed

12. Roda testes e2e em modo debug:

    pnpm run test:e2e:debug

13. Roda o gerador de testes e2e:

    pnpm run test:e2e:codegen

14. Mostra o relatório de testes e2e executados:

    pnpm run test:e2e:report

📄 Documentações

Log de mudanças

Esse projeto tem um arquivo de CHANGELOG.md contendo o histórico de commits com todas as alterações realizadas no projeto.

Padronização de Commits

Esse projeto usa o conventional commits que é uma padronização para os commits com o objetivo de organizar melhor as alterações feitas. Para mais detalhes, consultar o arquivo COMMITS.md

Como contribuir

Para saber como contribuir com esse projeto sendo um desenvolvedor, consulte o arquivo CONTRIBUTING.md

---

Desenvolvido por Rander Carlos 👋 [email protected]