Site de serviços · Next.js

Site Fácil

Site de uma oferta de criação de sites, com serviços, portfólio de projetos publicados, catálogo de modelos de código aberto e um formulário de briefing que alimenta um painel interno de acompanhamento.

Papel: Desenvolvimento do site, do formulário de briefing e do painel interno
Organização e período: Março a agosto de 2026
Plataformas: Web (desktop e celular) · Painel interno de briefings

Visitar site

Página inicial da Site Fácil em fundo escuro com o título Sua empresa merece um site de verdade, botões Começar agora e Ver modelos e indicadores de apresentação. — Página inicial

01 / Contexto

História e problema

Para quem: Pequenas empresas e profissionais que precisam de site institucional, landing page, e-commerce ou sistema web.
Problema: A oferta precisava de uma vitrine com projetos reais publicados e de uma forma organizada de receber as informações de cada novo cliente (identidade visual, textos, fotos, referências, prazo e orçamento) antes da primeira conversa.

28/03/2026
Versão inicial com serviços, portfólio, processo, diferenciais, catálogo de modelos, formulário de briefing e painel interno.
28/05/2026
Inclusão do Autista Social no portfólio.
05/08/2026
Inclusão de um site de advocacia no portfólio.

02 / Papel

Minha responsabilidade

Liderança e direção

Defini o briefing estruturado como etapa de entrada de novos projetos, com acompanhamento por status no painel.
Optei por armazenar os briefings em arquivos no servidor, sem banco de dados, compatível com o volume esperado.
Organizei o catálogo de modelos de código aberto como referência visual para o cliente escolher o estilo do site.

Execução técnica direta

Estruturei o site em Next.js 16 (App Router), React 19, TypeScript e Tailwind CSS 4, com componentes por seção e botão flutuante de WhatsApp.
Implementei o formulário de briefing com envio multipart, inclusive fotos, e a rota de API que grava cada briefing com identificador único.
Implementei o painel interno com sessão criptografada (iron-session), lista por status (novo, negociando, fazendo, finalizado) e página de detalhe.
Configurei a publicação em servidor próprio com nginx, HTTPS e cabeçalhos de segurança (HSTS, nosniff, X-Frame-Options, Referrer-Policy).

03 / Arquitetura

Arquitetura documentada

Aplicação Next.js com build standalone. As páginas públicas são pré-renderizadas; o briefing é a única entrada de dados, recebida por uma rota de API e gravada em arquivos JSON no servidor, lidos depois pelo painel interno.

Arquitetura do site da Site Fácil

Visitante
- Navegador
- WhatsApp
Servidor próprio
- nginx + HTTPS
Next.js 16
- Páginas públicas
- API de briefing
- Painel interno
Armazenamento
- Briefings em JSON
- Fotos enviadas

Conexões

O navegador acessa o site por HTTPS no nginx, que encaminha ao Next.js.
O formulário envia o briefing à rota de API.
A API grava o briefing em JSON e as fotos em disco.
O painel interno lê os briefings e atualiza o status.

Camadas e tecnologias

Frontend: Next.js 16.2 com App Router e output standalone, React 19.2, TypeScript e Tailwind CSS 4. Rotas públicas: página inicial (Hero, Serviços, Portfólio, Processo, Diferenciais, Chamada final), catálogo de modelos e formulário de briefing. Ícones lucide-react.
Briefing e painel: O formulário coleta contato, tipo de site, objetivos, identidade visual (logo, manual, três cores, estilos), conteúdo disponível, redes sociais, referências, prazo, orçamento, descrição e fotos. A rota de API gera um UUID, normaliza nomes de arquivo e grava o JSON. O painel lista por status e permite mudar a etapa de cada pedido.
SEO e desempenho: Título, descrição, palavras-chave e Open Graph com locale pt_BR pela Metadata API; lang pt-BR. Fontes Inter e Plus Jakarta Sans importadas do Google Fonts no CSS. Portfólio com ícones em vez de capturas, o que mantém a página leve. Sem sitemap, robots.txt ou dados estruturados.
Implantação: Servidor próprio com nginx como proxy reverso, redirecionamento para HTTPS, certificado Let's Encrypt e cabeçalhos de segurança definidos no servidor.

04 / Decisões

Decisões técnicas e compromissos

Briefing estruturado antes da conversa comercial

Problema: Informações de identidade visual, conteúdo e referências chegavam dispersas em mensagens, o que atrasava o início de cada projeto.
Decisão: Criar um formulário único, dividido em blocos, com upload de fotos e campos de prazo e orçamento.
Motivo: Padroniza a entrada de projetos e permite avaliar escopo e preço antes do primeiro contato.
Compromisso: Um formulário longo pode reduzir a taxa de preenchimento; por isso o WhatsApp continua disponível como canal alternativo.

Armazenamento em arquivos no lugar de banco de dados

Problema: O volume de briefings é pequeno, e um banco de dados acrescentaria serviço, migrações e custo de operação.
Decisão: Gravar cada briefing como JSON e as fotos em pasta própria, com status mantido no mesmo arquivo.
Motivo: Funciona com a infraestrutura existente e é simples de inspecionar e copiar em backup.
Compromisso: Sem consultas, concorrência controlada ou histórico de alterações; o crescimento do volume exigiria migrar para banco de dados.

05 / Funcionamento

Fluxo e modelo

Envio de um briefing (dados fictícios)

O cliente preenche nome, WhatsApp, tipo Site institucional, estilo Minimalista e anexa duas fotos.
O navegador envia o formulário em multipart para a rota de API.
A API gera um identificador, salva as fotos com nomes normalizados e grava o JSON com a data de criação.
O briefing aparece no painel interno com status Novo e passa para Negociando quando a conversa começa.

Modelo lógico simplificado

Briefing: id, criadoEm, status, contato, tipo, objetivos, identidade visual, conteúdo disponível, redes, referências, prazo, orçamento, descrição, fotos

06 / Evidências

Resultados e próximos passos

Resultados e evidências

Site em sitefacil.pro com página inicial, catálogo de modelos e formulário de briefing servidos por HTTPS, e painel interno de briefings restrito por login.
O portfólio do site lista projetos publicados, entre eles CGM Marcenaria, Autista Social e um site de advocacia.

Próximos passos

Briefings em arquivos, sem banco de dados, histórico ou notificação automática de novo pedido. Próximo passo: migrar para banco de dados se o volume crescer.
Próximo passo: sitemap, robots.txt e dados estruturados.
A página inicial inteira é um componente de cliente, o que aumenta o JavaScript enviado ao navegador.
Os indicadores exibidos no site (projetos entregues, prazo médio) são texto comercial e não foram verificados neste estudo.

07 / Telas

Galeria

Formulário de briefing
Catálogo de modelos
Página inicial em celular

Próximo estudo de caso

Vero Markets

Todos os projetos