Um portal simples e responsivo para listagem e detalhamento de filmes usando Nuxt 3 e Vue 3.
Cine List é uma aplicação frontend desenvolvida com Nuxt 3 que consome dados da API pública The Movie Database (TMDB). A aplicação apresenta uma lista de filmes, detalhes individuais, funcionalidade de favoritos com proteção via middleware simulada e é totalmente responsiva, focada em mobile-first.
- Listagem dinâmica de filmes populares, estreias e mais bem avaliados
- Página detalhada para cada filme, com informações completas e recomendações
- Sistema de favoritos gerenciado globalmente via Pinia
- Middleware para proteger a rota de favoritos (simulação de autenticação)
- Responsividade completa usando Tailwind CSS
- SEO dinâmico com títulos e meta tags baseados nos dados carregados
- Navegação intuitiva e acessível, com foco em usabilidade e performance
- Lazy loading de imagens para melhor desempenho
- Nuxt 3 (SSR e SSG)
- Vue 3 (Composition API)
- Pinia (Gerenciamento de estado global)
- Tailwind CSS (Estilização responsiva)
- The Movie Database API (Fonte dos dados)
├── components/ # Componentes reutilizáveis (CardCarousel, FavoriteToggle)
├── middleware/ # Middleware de autenticação fake
├── pages/ # Páginas da aplicação
│ ├── index.vue # Página inicial - listagem de filmes
│ ├── item/[id].vue # Detalhe de filme com rota dinâmica
│ └── favoritos/ # Rota protegida de favoritos
├── stores/ # Stores Pinia para estado global
└── nuxt.config.ts # Configurações do Nuxt- Node.js v18+
- npm ou yarn
- Clone o repositório:
git clone https://github.com/jose-gabriel-bm/cine-list-vuejs3-nuxt3.git
cd cine-list-vuejs3-nuxt3
cd cine-list- Instale as dependências:
npm install
# ou
yarn install3.Execute a aplicação em modo desenvolvimento:
npm run dev
# ou
yarn dev4.Acesse no navegador:
http://localhost:3000