O Fox Studio Hub é o site e o sistema de gestão da Fox Estúdio, agência criativa de Carlos Chagas (MG) que atende empresas do Vale do Mucuri e do norte de Minas com identidade visual, redes sociais, audiovisual e tráfego pago. A página pública apresenta os serviços e o portfólio; atrás de um login discreto, a equipe gerencia demandas num quadro Kanban, clientes, colaboradores, jobs avulsos e propostas. Foi desenvolvido por André Gomes, pela NexiaLabs, em Next.js com Prisma e MySQL.
O cliente
A Fox Estúdio é uma agência de Carlos Chagas que cuida da presença digital de empresas da região: identidade visual, gestão de redes sociais, produção e captação audiovisual, tráfego pago, artes gráficas e sites. O dia a dia de uma agência é uma fila de pedidos de vários clientes ao mesmo tempo, cada um com prazo, formato, briefing e material de marca. A agência tinha um sistema anterior, mais simples, e precisava de um painel que organizasse a equipe e mostrasse o andamento ao cliente. O site público também precisava aparecer nas buscas locais da região.
O desafio
Uma demanda de agência tem muita informação: categoria, formatos de feed e story, prazo, prioridade, briefing, arquivos de apoio e responsáveis. A equipe precisava enxergar tudo isso num quadro e mover o card de etapa sem atrito, no computador e no celular. O cliente precisava aprovar a peça sem criar conta. E o dono da agência queria ver contratos, valor mensal, produtividade da equipe e propostas num lugar só, com o financeiro restrito ao administrador.
O que foi construído
André construiu um app Next.js que reúne a página pública e o painel. As demandas correm num quadro Kanban de cinco colunas, de solicitada a aprovada, com arrastar e soltar que funciona também no toque. O cliente recebe um link com token para acompanhar suas demandas e outro para aprovar a peça, sem senha. Propostas viram PDF gerado no próprio servidor, e regras de automação mudam prioridade ou status quando um prazo vence. Agentes que usam a API do Claude sugerem briefing pelo nicho do cliente e apontam gargalos do quadro.
O que o sistema faz
Quadro Kanban de demandas com cinco etapas, prioridade por cor e responsáveis com foto.
Cadastro de demanda com categoria, formatos, prazo, briefing, anexos e cliente vinculado.
Portal do cliente e link de aprovação por token, sem cadastro.
Visão geral com contratos ativos, valor mensal, demandas urgentes e equipe.
Ficha de cliente com material de marca, contatos e calendário de demandas.
Propostas comerciais em PDF e financeiro visível só para o administrador.
Regras de automação por mudança de status, prioridade ou prazo vencido.
Página pública com serviços, portfólio de trabalhos aprovados e dados estruturados de agência local.
// Para quem avalia o código: arquitetura e decisões.
Por dentro
Next.js
React
TypeScript
Prisma
MySQL
NextAuth
Tailwind CSS
dnd kit
Recharts
React PDF
Zustand
Claude API
O sistema é um app Next.js 16 com App Router, React 19 e TypeScript, dividido em grupos de rota para a parte pública e para o painel. A autenticação usa NextAuth com sessão JWT e dois papéis, administrador e colaborador, e a checagem de papel acontece nas rotas de API. O banco é MySQL acessado pelo Prisma, com modelos de demanda, comentário, atividade, anexo, proposta, regra de automação e token de aprovação. Atualizações do quadro chegam por eventos do servidor, e os PDFs de proposta saem do React PDF no servidor. Os agentes de IA ficam numa camada própria, com um orquestrador e um registro de cada execução no banco.
Decisões técnicas
Aprovação do cliente por token de uso único com validade, porque pedir cadastro ao cliente da agência trava a aprovação.
Arrastar e soltar com dnd kit e sensor de toque com pequeno atraso, para o quadro funcionar no celular da equipe sem confundir arrasto com rolagem.
Entrada do painel por um cadeado discreto na página pública, sem expor uma área administrativa a quem visita o site.
Seu negócio parece com esse?
Serve para agências, estúdios e prestadores de serviço criativo que atendem vários clientes ao mesmo tempo e precisam organizar pedidos, prazos e aprovações.
Fox Studio Hub foi desenvolvido por André Gomes Andrade, desenvolvedor full stack de Carlos Chagas, Minas Gerais, pela NexiaLabs, do planejamento à publicação.
Onde fica o cliente de Fox Studio Hub?
Agência criativa e de marketing em Carlos Chagas. Carlos Chagas, MG.
Com quais tecnologias Fox Studio Hub foi feito?
Fox Studio Hub usa Next.js, React, TypeScript, Prisma, MySQL, NextAuth, Tailwind CSS, dnd kit, Recharts, React PDF, Zustand e Claude API.
Dá para fazer um projeto parecido para o meu negócio?
Dá. Cada projeto é feito sob medida, com código e acessos no nome do cliente. O primeiro passo é uma conversa pelo WhatsApp +55 (33) 98465 6356 para entender o que você precisa.
