Cursos

CRUD de Contatos (Vue.js + Node.js)

• Nível: Projetos
• Módulos: 6
• Aulas: 23
• Tempo de leitura: 2h
• Tecnologias: Vue.js, Node.js
• Preço: R$ 47,00

Conteúdo do curso

Módulo 1: Introdução e Setup

Visão geral do projeto, configuração do ambiente e estrutura do repositório.

1. O que vamos construir: visão geral do CRUD de Contatos (8 min)
2. Configurando o ambiente de desenvolvimento (8 min)
3. Estrutura do projeto: backend Express + frontend Vue (8 min)

Módulo 2: Backend: API REST com Node.js + Express + SQLite

Construindo a API REST completa para gerenciar contatos com rotas CRUD.

1. Configurando o Express e o banco SQLite (8 min)
2. Criando as rotas GET: listagem e detalhe (8 min)
3. Rotas POST e PUT: criar e editar contatos (2 min)
4. Rota DELETE e tratamento de erros (2 min)

Módulo 3: Frontend: Fundamentos do Vue.js

Criando o projeto Vue com Vite, componentes, Vue Router e Pinia.

1. Criando o projeto Vue com Vite e estrutura de pastas (2 min)
2. Componentes Vue: Options API vs Composition API (2 min)
3. Configurando Vue Router (8 min)
4. Configurando Pinia (gerenciamento de estado) (3 min)

Módulo 4: Frontend: Listagem e Criação de Contatos

Telas de listagem e criação integradas com a API REST.

1. Tela de listagem: buscando contatos da API (2 min)
2. Componente ContactCard: exibindo dados do contato (2 min)
3. Formulário de criação com validação (8 min)
4. Tela de criação integrada com a API (8 min)

Módulo 5: Frontend: Edição e Exclusão de Contatos

Telas de edição e exclusão com validação e feedback visual.

1. Tela de edição com pré-carregamento de dados (2 min)
2. Atualização via PUT e validação no frontend (2 min)
3. Modal de confirmação de exclusão (8 min)
4. Feedback visual: toasts e loading states (3 min)

Módulo 6: Busca, Filtros e UX

Implementando busca em tempo real, filtros, paginação e responsividade.

1. Busca em tempo real com debounce (8 min)
2. Filtros por categoria e ordenação (8 min)
3. Paginação no backend e frontend (8 min)
4. Responsividade com CSS puro (2 min)