Profissional · Maxbot
Reconstruindo uma plataforma SaaS com Next.js
Novos fluxos de Produto e Vendas durante a evolução de um sistema legado.
- Atuação
- Desenvolvedor Full Stack · Foco em Front-end
- Período
- ago/2025 — atual
- Empresa
- Maxbot
- Status
- Produto & Vendas
- React
- Next.js
- TypeScript
- React Query
- Zustand
- React Hook Form
- Zod
- Tailwind CSS
- shadcn/ui
- REST APIs
- WebSocket
01 / Visão geral
Trabalho na Maxbot V5, a reconstrução em Next.js de uma plataforma SaaS de atendimento omnichannel já existente.
Boa parte do meu trabalho envolve reconstruir interfaces que já existiam no sistema legado, melhorando estrutura e manutenibilidade.
Também atuo em novas capacidades de Produto e Vendas que não existiam na versão anterior, incluindo gestão de produtos, registro de vendas, orçamentos, baixa de pagamentos e fluxos de importação de produtos e mídia.
02 / Contexto
Entre o legado e o novo.
A V5 está sendo construída em uma stack moderna de Front-end enquanto o produto existente e o back-end continuam evoluindo.
Isso coloca o trabalho entre duas realidades: preservar regras de negócio e fluxos dos quais os usuários já dependem, e ao mesmo tempo introduzir capacidades novas de Produto e Vendas que não existiam antes.
03 / Desafio
O desafio.
Reconstruir uma tela é fácil de subestimar. O layout costuma ser a menor parte.
O trabalho de verdade é entender as regras existentes, integrar com a API, tratar estados e validação, e reconstruir a interface numa estrutura de componentes que também aguente os novos fluxos de Produto e Vendas.
04 / Atuação
Minha atuação.
Minha responsabilidade principal é o Front-end: implementar interfaces, estruturar componentes reutilizáveis, gerenciar client state e server state, e integrar a aplicação com REST APIs e WebSocket.
Trabalho perto do desenvolvedor de back-end na definição de contratos, no ajuste de fluxos e na conexão das novas features com a API.
05 / O que desenvolvi
O que desenvolvi.
Módulo de Produto
Cadastro e listagem de produtos, incluindo formulários e fluxos ligados à importação de produtos e mídia.
Módulo de Vendas
Registro e gestão de vendas, orçamentos e baixa de pagamentos — fluxos que não existiam na versão anterior.
Importações
Fluxos de importação de produtos e mídia, incluindo validação, feedback e estados de erro para operações em lote.
UI com bastante dado
Tabelas reutilizáveis, filtros, paginação, formulários e padrões de upload compartilhados entre Produto e Vendas.
Bases compartilhadas da aplicação
Autenticação, internacionalização, notificações e componentes reutilizáveis compartilhados entre módulos, em vez de serem implementados de forma independente em cada tela.
Integração com API
Integrar REST APIs e recursos de WebSocket em colaboração próxima com o back-end, principalmente quando um fluxo novo pede ajuste dos dois lados.
Front-end
Maxbot V5
React / Next.js
React Query
Dados remotos
Zustand
UI state
REST APIs
Serviços de back-end
Produto
- Lista de produtos
- Formulários de produto
- Importação de produtos
- Importação de mídia
Vendas
- Orçamentos
- Vendas
- Pagamentos
- Formulários
Uma visão conceitual do Front-end em que trabalho — não a arquitetura oficial do produto.
06 / Engenharia
Decisões que eu manteria.
Preservar a regra, melhorar a implementação
Quando um fluxo legado já representa uma regra de negócio válida, o objetivo não é redesenhar o domínio. Eu mantenho a regra e melhoro a forma como a nova interface a representa e implementa.
Reutilizar padrões, não páginas inteiras
Produto e Vendas compartilham tabelas, formulários, validação e comportamentos de upload. Criar primitivas reutilizáveis para esses padrões deixa telas novas mais rápidas de construir, sem forçar páginas diferentes na mesma abstração.
Server state e UI state resolvem problemas diferentes
O React Query cuida dos dados remotos e do cache. O Zustand entra no UI state que precisa ser compartilhado. Separar essas responsabilidades deixa sincronização e invalidação de cache mais fáceis de raciocinar.
07 / Stack
- React
- Next.js
- TypeScript
- React Query
- Zustand
- React Hook Form
- Zod
- Tailwind CSS
- shadcn/ui
- REST APIs
- WebSocket
08 / Impacto
O que mudou.
A V5 ainda está em desenvolvimento, então ainda não associo métricas de performance ou adoção a este trabalho.
O resultado concreto até agora é uma nova superfície de Produto e Vendas construída em Next.js, incluindo gestão de produtos, vendas, orçamentos, baixa de pagamentos e fluxos de importação que não existiam na versão anterior.
09 / Aprendizados
O que aprendi com esse trabalho.
Entender o domínio vem antes de melhorar a interface
Reconstruir um produto existente obriga a entender o domínio antes de melhorar a interface. Uma UI mais limpa vale pouco se regras importantes se perdem na migração.
Padrões compartilhados importam mais à medida que o produto cresce
Quando Produto e Vendas compartilham tabelas, formulários, validação e importação, primitivas reutilizáveis deixam a aplicação mais fácil de evoluir.