CineVue — Trilha prática de Vue, Pinia e Vue Router

O CineVue é um repositório de estudo orientado a projeto. Ao longo da trilha, o aluno constrói uma landing page de filmes e um backoffice para administrar o catálogo.

O código inicial já demonstra a arquitetura que será ensinada: componentes reutilizáveis, páginas responsáveis apenas pela composição da interface, estado global separado por domínio e rotas organizadas por contexto.

O que existe nesta primeira versão

• landing page responsiva com carrossel de destaques, pesquisa e catálogo;
• trilha navegável com visão semanal, páginas por dia e módulos interativos;
• 12 módulos, incluindo fundamentos de UI/UX, uma introdução arquitetural ao Inertia.js e loading entre rotas;
• aulas com explicação simples, analogias, pré-requisitos e micro-passos;
• código copiável dentro de cada etapa da implementação guiada;
• exemplos que apresentam código, leitura guiada e resultado visual lado a lado;
• ajuda para erros comuns, resultado esperado e desafios em todos os módulos;
• página de detalhes de filme;
• login didático e rotas administrativas protegidas;
• dashboard administrativo;
• listagem, cadastro, edição e exclusão de filmes;
• estado global com Pinia e persistência no localStorage;
• documentação pedagógica e de arquitetura.

Tecnologias

• Vue 3 com Composition API e <script setup>;
• Vue Router;
• Pinia;
• Inertia.js v3 em módulo comparativo com projeto de backend separado;
• Vite;
• CSS moderno, sem framework visual.

Pré-requisitos

• Node.js 22 ou superior;
• npm 11 ou superior;
• Git.

Executando o projeto

npm install
npm run dev

Abra o endereço informado pelo Vite no terminal.

Acesso ao backoffice

O login é propositalmente simulado para fins de estudo:

E-mail: admin@cinevue.dev
Senha: vue123

Este login não é seguro para produção. Autenticação real deve ser validada por um backend.

Comandos

npm run dev       # ambiente de desenvolvimento
npm run build     # gera a versão de produção
npm run preview   # visualiza o build
npm run lint      # verifica padrões de código
npm run test      # executa os testes automatizados

Estrutura principal

src/
├── assets/styles/       # tokens, reset e estilos globais
├── components/
│   ├── admin/           # componentes exclusivos do backoffice
│   ├── base/            # componentes visuais genéricos
│   ├── learning/        # cards, código e exemplos interativos da trilha
│   ├── layout/          # cabeçalhos, rodapés e estruturas de página
│   └── movie/           # componentes do domínio de filmes
├── data/                # dados iniciais e conteúdo estático
├── router/              # rotas e regras de navegação
├── services/            # acesso a recursos externos, como storage
├── stores/              # estado global separado por domínio
└── views/               # páginas ligadas às rotas

Leia docs/trilha.md para o roteiro de estudos e docs/arquitetura.md para entender as decisões de organização.

Regra de ouro da trilha

Uma view organiza uma página. Um component resolve uma parte reutilizável da interface. Uma store concentra estado e regras compartilhadas. Um service conversa com recursos externos. Separar essas responsabilidades evita páginas gigantes e facilita manutenção e testes.