Você já se perguntou como um formulário HTML consegue enviar informações para um servidor e armazená-las de forma permanente?

Quando preenchemos um cadastro em um site, parece que tudo acontece automaticamente. Porém, existe toda uma comunicação entre o Front-end e o Back-end, utilizando requisições HTTP, APIs e um servidor responsável por processar e persistir essas informações.

Neste projeto vamos construir uma aplicação completa utilizando JavaScript, Node.js e Express, onde um formulário HTML envia dados para uma API, que grava essas informações em um arquivo JSON.

Ao final, você entenderá não apenas como escrever o código, mas principalmente como funciona todo o fluxo de uma aplicação web.

---

O projeto que vamos desenvolver

Durante a aula construiremos um sistema capaz de:

• Criar um formulário HTML;
• Capturar os dados utilizando JavaScript;
• Enviar essas informações para uma API criada com Express;
• Salvar os dados em um arquivo JSON;
• Consultar os registros gravados;
• Exibir o resultado diretamente na interface.

Embora o armazenamento seja realizado em um arquivo JSON, os mesmos conceitos utilizados aqui servem como base para trabalhar futuramente com bancos de dados como MySQL, PostgreSQL e MongoDB.

---

Por que começar pelo Back-end?

Uma dúvida muito comum entre iniciantes é:

“Por que criar primeiro o servidor?”

A resposta é simples.

Se o servidor estiver funcionando corretamente, todo o restante da aplicação passa a ser muito mais fácil de desenvolver.

Neste projeto primeiro criamos:

• o servidor Node.js;
• as rotas da API;
• a gravação dos dados;
• os testes utilizando Thunder Client.

Somente depois construímos o Front-end.

Essa abordagem é muito utilizada em projetos profissionais, pois permite validar a API antes mesmo de existir uma interface gráfica.

---

O que você aprenderá

Ao longo do projeto serão apresentados diversos conceitos fundamentais para quem deseja trabalhar com desenvolvimento Web.

Node.js

Criação de servidores utilizando JavaScript.

Express

Construção de APIs e gerenciamento de rotas.

API REST

Criação de endpoints GET e POST.

JSON

Como armazenar informações de forma estruturada.

Fetch API

Envio de dados do navegador para o servidor.

Async / Await

Controle de operações assíncronas.

Try / Catch

Tratamento de erros durante as requisições.

Manipulação de Strings

Durante o projeto também são utilizados métodos muito importantes do JavaScript, como:

• indexOf()
• lastIndexOf()
• slice()
• trim()

Esses métodos permitem tratar o nome informado pelo usuário antes de gerar o crachá.

Objetos JavaScript

Os dados enviados para a API são organizados em objetos contendo propriedades como:

• nome;
• setor;
• data de cadastro.

Esse é exatamente o mesmo conceito utilizado diariamente em aplicações profissionais.

---

O fluxo completo da aplicação

Um dos maiores diferenciais deste projeto é mostrar todo o caminho percorrido pelos dados.

O fluxo acontece da seguinte forma:

1. O usuário preenche o formulário.
2. O JavaScript captura as informações.
3. O Fetch API envia uma requisição POST.
4. O Express recebe os dados.
5. O servidor grava o objeto no arquivo JSON.
6. A API retorna uma resposta.
7. O Front-end apresenta a mensagem de sucesso.
8. O formulário é limpo automaticamente.

Quando entendemos esse processo, criar aplicações completas deixa de ser apenas decorar código e passa a fazer sentido.

---

Tecnologias utilizadas

• HTML5
• CSS3
• JavaScript
• Node.js
• Express
• JSON
• Fetch API
• Thunder Client
• Async / Await
• Try / Catch

---

Assista à versão editada (36 minutos)

Se você prefere uma aula mais objetiva, contendo apenas a implementação e as explicações essenciais, assista ao vídeo editado.

🎬 Vídeo editado:

---

Aula completa (Live)

Se você gosta de acompanhar toda a construção do projeto, incluindo comentários, explicações extras e o desenvolvimento completo, confira a live original.

📺 Live completa:

---

Código-fonte

O projeto desenvolvido durante a aula pode ser disponibilizado através do GitHub para que você acompanhe cada etapa da implementação, faça alterações e utilize como base para seus próprios estudos.

https://github.com/marcoscaldas/ProjetoCarchaComNodeJSeExpress.git

---

O que você será capaz de fazer após esta aula

Ao concluir este projeto você terá aprendido a:

• criar servidores com Node.js;
• construir APIs utilizando Express;
• trabalhar com rotas GET e POST;
• enviar dados utilizando Fetch API;
• utilizar Async/Await corretamente;
• tratar erros com Try/Catch;
• armazenar informações em arquivos JSON;
• manipular objetos JavaScript;
• validar formulários HTML;
• integrar Front-end e Back-end.

Mais importante do que decorar comandos, você compreenderá como acontece a comunicação entre navegador e servidor, conhecimento que servirá de base para praticamente qualquer aplicação web moderna.

---

Conclusão

Projetos como este mostram que aprender programação vai muito além de conhecer a sintaxe de uma linguagem.

Quando você entende o fluxo completo — desde o formulário até a persistência dos dados — começa a enxergar como aplicações reais são construídas.

Depois de dominar esse projeto, a evolução para bancos de dados, autenticação de usuários e APIs mais complexas acontece de forma muito mais natural.

Se o seu objetivo é se tornar um desenvolvedor Full Stack, este é um excelente passo nessa jornada.

---