App Movies

APP MOVIES é uma aplicação web para buscar filmes em alta, buscar títulos e visualizar detalhes, construída com React, TypeScript e Vite.

🌐 Acesso ao Aplicativo

A aplicação está disponível em produção através do seguinte link:

🔗 Acessar App Movies

Nota: O link direciona para a página de filmes em tendência (/movie/trending), que é a página inicial do aplicativo.

Pré-visualização

• Dev: npm run dev
• Build: npm run build e npm run preview

---

Tecnologias

• React 19 e TypeScript 5
• Vite 7
• React Router 7 (roteamento SPA)
• Tailwind CSS 4
• Shadcn UI
• **Icones ** com lucide-react
• Theming com next-themes
• Toast com sonner
• Validações com zod
• date-fns para manipulação de datas

---

Funcionalidades

• Listagem de filmes em alta (trending) na página inicial
• Busca de filmes com feedback visual
• Página de detalhes do filme (sinopse, imagem, metadados)
• Tema claro/escuro
• Paginação e componentes de UI reutilizáveis (card, button, input)
• Tratamento de erros com toasts (sonner)

---

Objetivos

• Entregar uma base sólida de SPA com arquitetura simples e extensível
• Demonstrar componentes reutilizáveis e estilização consistente
• Prover hooks customizados para separar lógica de dados da UI
• Manter padrões de acessibilidade e boas práticas de DX

---

Extras

• Estrutura de pastas organizada (components, hooks, pages, lib)
• Scripts de lint e formatação: eslint, prettier
• Configuração pronta para deploy (ex.: vercel.json)
• Utilização de utilitários de tipagem e validação (zod)

---

Estrutura do Projeto

src/
  components/
    ui/              # componentes base (button, card, input, etc.)
    layout/          # layout (Container, Footer)
    MovieCard.tsx
    ImageCard.tsx
    Navebar.tsx
  hooks/
    useTrendingMovies.ts
    useSearchMovies.ts
    useMovieDetails.ts
    useTheme.ts
  pages/
    Home.tsx
    Seach.tsx        # página de busca
    Movie.tsx        # detalhes do filme
    NotFound.tsx
    Root.tsx
  lib/
    utils.ts
  App.tsx
  main.tsx

---

Hooks customizados

• useTrendingMovies — busca e pagina filmes em alta
• useSearchMovies — busca por termo com controle de estado
• useMovieDetails — carrega detalhes por id
• useTheme — alterna e persiste o tema

---

Como rodar localmente

1. Requisitos: Node 18+ e npm
2. Instale dependências:

   npm install

3. Configure as variáveis de ambiente (veja seção Configuração da API abaixo)
4. Execute em desenvolvimento:

   npm run dev

5. Build de produção:

   npm run build
   npm run preview

---

Configuração da API

O projeto utiliza a API do The Movie Database (TMDB) para obter dados de filmes. É necessário configurar as variáveis de ambiente antes de executar a aplicação.

Como obter a API Key

1. Crie uma conta gratuita em https://www.themoviedb.org/
2. Acesse Settings → API no seu perfil
3. Solicite uma API Key (V3 API Key) ou gere um Read Access Token (V4)
4. Copie sua chave API

Configuração das variáveis de ambiente

1. Copie o arquivo .env-semple para .env na raiz do projeto:

   cp .env-semple .env

2. Abra o arquivo .env e adicione sua API Key:

   VITE_TMDB_API_BASE_URL=https://api.themoviedb.org/3
   VITE_TMDB_IMAGE_BASE_URL=https://image.tmdb.org/t/p
   VITE_TMDB_API_KEY=sua_chave_api_aqui

3. Substitua sua_chave_api_aqui pela sua chave API do TMDB

⚠️ Importante:

• Nunca commite o arquivo .env no Git (ele já está no .gitignore)
• O arquivo .env-semple serve apenas como template de exemplo
• Sem a API Key configurada, a aplicação não funcionará corretamente

---

Scripts úteis

• npm run dev — inicia o servidor de desenvolvimento
• npm run build — gera build de produção
• npm run preview — pré-visualiza o build
• npm run lint — verifica problemas de lint
• npm run lint:fix — corrige problemas de lint
• npm run format — formata arquivos suportados
• npm run format:check — checa formatação

---

Padrões de Código

O projeto utiliza ESLint e Prettier para garantir consistência e qualidade do código.

ESLint

Configurado com regras recomendadas para React, TypeScript e Hooks:

• Plugins: eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-react-refresh, typescript-eslint
• Configurações: @eslint/js, typescript-eslint/recommended
• Regras: React recomendadas, Hooks recomendados, JSX Runtime
• Integração: Compatível com Prettier (eslint-config-prettier)

Scripts:

npm run lint          # verifica problemas de lint
npm run lint:fix      # corrige problemas de lint automaticamente

Prettier

Formatação automática com as seguintes configurações:

• Aspas: simples (singleQuote: true, jsxSingleQuote: true)
• Semicolons: desabilitados (semi: false)
• Tabs: 2 espaços (tabWidth: 2)
• Linha: máximo 100 caracteres (printWidth: 100)
• Trailing commas: todas (trailingComma: 'all')
• Brackets: mesmo linha (bracketSameLine: true)
• Fim de linha: LF (endOfLine: 'lf')

Scripts:

npm run format          # formata arquivos suportados
npm run format:check    # checa formatação sem alterar arquivos

Arquivos suportados: *.js, *.jsx, *.ts, *.tsx, *.json, *.css, *.md

---

Convenções e Boas Práticas

• Componentes com nomes claros e responsabilidades únicas
• Hooks para isolar lógica de dados/efeitos
• Tipagem explícita em APIs públicas
• Evitar aninhamento profundo e tratar erros com feedback ao usuário
• Código formatado automaticamente com Prettier