SaaSGestão de freelasIADashboardPropostasContratosPostgreSQLNext.js

HamadFlow Demo

SaaS demonstrativo para freelancers gerenciarem clientes, pedidos, briefings, propostas, contratos, projetos e pagamentos com apoio de IA.

Esta é uma versão demo com dados fictícios. A versão real é usada internamente para organizar meus freelas.

Acessar demo Ver GitHub Voltar ao portfólio

Arte do dashboard demonstrativo HamadFlow Demo — Representação visual do painel demo e do workflow com IA.

O problema

Organizar freela também é parte do produto.

Como freelancer, uma das maiores dificuldades não está apenas em desenvolver o projeto, mas em organizar o processo comercial: receber pedidos, entender o escopo, transformar conversas em briefing, montar proposta, controlar contrato, acompanhar projeto e não perder pagamentos.

Muitos freelancers fazem isso de forma espalhada entre WhatsApp, Notion, planilhas e PDFs soltos. Isso pode gerar perda de informação, propostas pouco claras, retrabalho e dificuldade para passar uma imagem profissional ao cliente.

A solução

Um workflow comercial centralizado.

O HamadFlow foi criado para centralizar esse fluxo em um painel único. A ideia é transformar um pedido de orçamento em um workflow organizado, passando por lead, cliente, briefing, projeto, proposta, contrato e pagamentos.

A versão demo foi criada para apresentar esse fluxo de forma segura no portfólio, sem expor dados reais e sem conectar ao meu workflow privado.

Funcionalidades

Principais módulos do HamadFlow Demo.

Pedidos do site

Recebimento de solicitações de orçamento simuladas, com dados fictícios e análise inicial.

CRM de clientes

Cadastro e organização de clientes, empresas e histórico comercial.

Briefings inteligentes

Conversão de pedidos em briefings estruturados, com objetivo, escopo, riscos e perguntas importantes.

Propostas comerciais

Geração e edição de propostas com escopo incluso, fora do escopo, valor, prazo, pagamento e validade.

Contratos

Criação de contratos a partir de propostas, com termos editáveis e aviso jurídico.

Gestão de projetos

Projetos com status, tarefas, etapas e acompanhamento.

Pagamentos

Controle de valores, vencimentos e status financeiro.

Área pública do cliente

Links públicos para visualização e aprovação de proposta ou contrato.

IA com fallback

Uso de IA para análise, geração de textos e sugestões, com fallback local para demonstração.

Fluxo do sistema

Do pedido recebido até a entrega organizada.

A demo apresenta um fluxo completo e navegável para demonstrar como um pedido de orçamento pode virar um processo comercial e operacional estruturado.

Pedido recebido

Cliente criado

Briefing gerado

Projeto aberto

Proposta criada

Contrato gerado

Pagamento acompanhado

Entrega organizada

Decisões técnicas

Um SaaS full-stack separado da operação real.

O sistema foi estruturado como um SaaS full-stack, com autenticação, banco relacional, regras de segurança, geração de PDF, links públicos por token e integração de IA. A versão demo foi separada da versão real para evitar exposição de dados e permitir que visitantes testem o produto com segurança.

Next.js com App Router

Base full-stack para dashboard, rotas públicas, páginas internas e experiência responsiva.

TypeScript

Tipagem para reduzir erros e manter o fluxo de negócio mais previsível.

PostgreSQL e Prisma ORM

Modelagem relacional para leads, clientes, briefings, projetos, propostas, contratos e pagamentos.

Autenticação

Gemini / fallback local

IA para análise e geração de textos com alternativa local para manter a demo funcionando.

Geração de PDF

Estrutura para documentos comerciais, propostas e contratos exportáveis.

Links públicos por token

Visualização externa de propostas e contratos sem liberar o painel administrativo.

Banco demo separado

Ambiente isolado com dados fictícios e sem conexão com o workflow privado.

Deploy na Vercel

Demo publicada para acesso rápido pelo portfólio e validação em navegador.

Segurança

Demo pública sem expor dados reais.

A versão publicada no portfólio não usa dados reais. Ela possui banco separado, usuário demo, dados fictícios e integração real com o portfólio desativada. Assim, qualquer visitante pode testar o sistema sem afetar meu painel interno de freelas.

Banco separado
Sem CPF/CNPJ real
Sem chave Pix real
Sem leads reais
Sem conexão com workflow privado
Login demo controlado
Reset/seed de dados fictícios

O que aprendi

Produto, UX e arquitetura trabalhando juntos.

Com esse projeto, aprofundei conceitos de arquitetura full-stack, modelagem de banco, autenticação, fluxos comerciais, geração de documentos, integração com IA, deploy, separação entre ambiente real e demo e criação de um produto com aparência de SaaS real. Também aprendi a pensar além do código, estruturando uma solução para organizar o processo comercial do primeiro contato até a entrega.

Arquitetura full-stack
Modelagem de banco relacional
Autenticação e separação de ambientes
Fluxos comerciais para freelas
Geração de documentos
Integração com IA
Deploy de produto SaaS
Criação de demo segura para portfólio

Galeria do projeto

Prints reais da demo navegável.

Telas capturadas da versão pública do HamadFlow Demo, usando dados fictícios e ambiente isolado para apresentação no portfólio.

01 / 10

Dashboard

Visão demonstrativa com pedidos, clientes, briefings, projetos ativos, propostas, contratos, pagamentos e alertas.

Próximos passos

Evoluções planejadas para a demo.

Melhorar o editor visual de propostas
Adicionar templates de serviços
Melhorar o histórico de eventos
Refinar geração de contratos
Adicionar métricas financeiras
Criar mais automações com IA
Melhorar onboarding da demo
Adicionar um tour guiado pela demo

Resultado

Uma demo navegável com fluxo completo.

O resultado é uma demo navegável que mostra um fluxo completo de gestão de freelas, reforçando minhas habilidades em desenvolvimento full-stack, produto, UX, banco de dados, IA e deploy.

Acessar HamadFlow Demo Ver GitHub Voltar aos projetos