Destino Dev

Cursos

CRUD de Contatos com Vue.js e Node.js

Gerenciar uma lista de contatos é uma das funcionalidades mais comuns do desenvolvimento web — e é exatamente por isso que é o projeto perfeito para aprender CRUD do zero. Neste curso, você vai construir um sistema completo de gerenciamento de contatos, onde é possível criar, visualizar, editar e excluir registros, tudo funcionando de verdade com frontend e backend separados e se comunicando via API REST.

A stack é moderna e amplamente usada no mercado: Vue.js 3 com Composition API no frontend, usando Vite para desenvolvimento rápido e Axios para as chamadas HTTP; e Node.js com Express no backend, organizando as rotas de forma profissional e persistindo os dados em arquivo JSON. Você vai entender como as requisições HTTP funcionam na prática, como organizar componentes Vue reutilizáveis, como tratar estados de loading e erro, e como fazer deploy gratuito da aplicação.

Este curso é indicado para quem já conhece HTML, CSS e JavaScript básico, e quer dar o próximo passo criando aplicações com framework. Não é necessário experiência anterior com Vue.js ou Node.js — tudo será ensinado de forma prática, construindo o projeto passo a passo. Ao concluir, você terá um projeto funcional no portfólio e uma base sólida para evoluir para aplicações mais complexas com banco de dados real.

O que você vai aprender

Ao final deste curso, você será capaz de:

Pré-requisitos

Conhecimentos básicos de HTML, CSS e JavaScript são necessários. Saber criar funções, manipular arrays (map, filter), e entender o conceito de objetos em JavaScript é suficiente para acompanhar o curso. Não é necessário experiência prévia com Vue.js, Node.js ou qualquer framework.

Conteúdo do curso

Módulo 1: Configuração do Ambiente e Visão Geral do Projeto

Conheça o projeto que será construído, configure seu ambiente de desenvolvimento e entenda a arquitetura fullstack que separa frontend e backend.

  1. O que vamos construir? Visão Geral do CRUD de Contatos (25 min)
  2. Configurando o Ambiente de Desenvolvimento (30 min)
  3. Iniciando o Projeto: Estrutura de Pastas e Dependências (30 min)

Módulo 2: Construindo a API REST com Node.js e Express

Crie o servidor Express e implemente todas as rotas da API: listar, criar, atualizar e excluir contatos com persistência em arquivo JSON.

  1. Configurando o Servidor Express e Middleware (35 min)
  2. Implementando GET (listar e buscar) e POST (criar contato) (35 min)
  3. Implementando PUT (atualizar) e DELETE (excluir contato) (30 min)

Módulo 3: Estruturando o Frontend com Vue.js 3

Configure o App.vue principal, crie o serviço de API com Axios e construa o componente de listagem de contatos com Composition API.

  1. Organizando o App.vue e Criando o Serviço de API (30 min)
  2. Construindo o ContactCard e o ContactList com v-for (35 min)

Módulo 4: Implementando Criar e Editar Contatos

Construa o formulário modal para criar e editar contatos, com validação de campos e integração completa com a API.

  1. Construindo o ContactForm com Validação (40 min)

Módulo 5: Busca em Tempo Real e Melhorias de UX

Adicione a barra de busca com debounce, melhore o feedback visual com estados de loading e implemente notificações de sucesso.

  1. Barra de Busca com Debounce (30 min)

Módulo 6: Entrega Final e Próximos Passos

Revise o código, faça deploy gratuito no Render e na Vercel, e descubra como evoluir este projeto para o próximo nível.

  1. Revisão, Polimento e Tratamento de Erros (25 min)
  2. Deploy no Render (Backend) e Vercel (Frontend) (35 min)
  3. Próximos Passos: Evoluindo o Projeto (20 min)