Mimos Papelaria
Sistema SaaS de gestão de estoque para papelaria: produtos, movimentações, categorias, fornecedores e relatórios, com UI/UX, front-end em React e back-end
- Meu papel
- Desenvolvedor Full Stack · Designer UX/UI
Mimos PapelariaContexto
A Mimos Papelaria vende itens fofos e de organização: cadernos, canetas, washi tapes, adesivos e planners. Criei para ela um sistema SaaS de gestão de estoque e fiz tudo: o UI/UX, o front-end em React e o back-end, da modelagem dos dados à API.
Desafio
Uma papelaria vende muitos itens pequenos e parecidos, com giro alto e reposição constante. Em planilha, produtos esgotam sem aviso e ninguém sabe quem mexeu no estoque, nem por quê. O sistema precisava ser simples para quem cuida da loja no dia a dia e rígido nas regras: nenhum SKU repetido, nenhuma saída que deixe o estoque negativo e nenhuma movimentação sem responsável.
O sistema, tela a tela
Todas as telas na mesma estrutura: menu lateral com a marca, os números do momento no topo, tabelas com status em cores pastel e um único botão vinho para a ação principal.
- 01 / 10
Acesso
A entrada já resume o sistema ("Seu estoque em ordem. Sua papelaria floresce.") e cada pessoa entra com o próprio e-mail e senha. Sem login, nada do estoque fica visível.
- 02 / 10
Visão geral
O painel abre com os quatro números que importam: produtos cadastrados, valor em estoque, itens com estoque baixo e itens esgotados. Abaixo, as entradas e saídas da semana num gráfico, os produtos no limite de reposição e as últimas movimentações.
- 03 / 10
Produtos
O catálogo com busca por nome ou SKU, filtros por categoria e status do estoque, exportação em CSV e paginação. Cada linha mostra SKU, categoria, preço, quantidade e um status (disponível, baixo ou esgotado) que muda sozinho conforme o estoque.
- 04 / 10
Cadastro de produto
O cadastro em duas partes: as informações do item (nome, SKU, categoria, fornecedor, preços de custo e de venda, estoque inicial) e o controle de estoque, com a quantidade mínima que dispara o alerta e a localização na prateleira. Ao lado, dicas de como montar o SKU.
- 05 / 10
Movimentações
O histórico completo do estoque: entradas, saídas e ajustes do mês em números e, na tabela, data, produto, tipo, quantidade, responsável, origem ou motivo e status de cada registro, com busca e filtro por período.
- 06 / 10
Nova movimentação
Registrar uma entrada, saída ou ajuste de inventário leva poucos campos: produto, quantidade, referência, motivo e data. Antes de gravar, o sistema mostra o estoque atual e o saldo depois da movimentação e pede confirmação.
- 07 / 10
Categorias
As categorias que organizam o catálogo (escrita, cadernos, decoração, adesivos, papéis), com a quantidade de produtos em cada uma e um aviso para os itens que ainda estão sem categoria.
- 08 / 10
Fornecedores
Os parceiros de reposição em cards, com categoria, telefone, status e a data do último pedido, além de busca por nome ou CNPJ e exportação.
- 09 / 10
Relatórios
O estoque virando decisão de compra: valor total, giro, perdas e produtos críticos no mês, o valor do estoque por categoria, a sugestão de reposição baseada no estoque mínimo e o comparativo de entradas e saídas dos últimos seis meses.
- 10 / 10
Versão mobile
No celular, o painel se reorganiza em cards: os números do estoque, os itens com estoque baixo e um botão rápido para nova movimentação, com a navegação na parte de baixo da tela.
Arquitetura
Desenhei o modelo de dados e o contrato da API antes das telas, para que as regras do estoque morassem no back-end e não dependessem da interface.
Regras de negócio e segurança
As regras que protegem o estoque são validadas no back-end, e não só na tela:
Documentação técnica
O escopo funcional, as relações entre as entidades, as regras de negócio e as rotas da API, documentados junto com o design como guia para o desenvolvimento.
Design system
Uma biblioteca de componentes para manter as telas consistentes (botões, campos, status e cards) e os estados de retorno do sistema: sucesso, erro de validação, estoque baixo e produto esgotado, cada um com a sua cor e mensagem.
Sistema Visual
Uma paleta pastel inspirada em papéis, laços e cadernos, com cantos arredondados, bordas suaves e ícones delicados: o sistema tem a mesma delicadeza da loja, e o rosa funciona como assinatura.
Paleta
Rosa Mimos
#E88FAA
Cor principal da marca e botões
Lilás Suave
#C9B5E6
Navegação e elementos de destaque
Amarelo Manteiga
#FFF0B8
Alertas gentis e realces
Verde Menta
#C9E6D1
Sucesso e estoque disponível
Creme Papel
#FFFAF0
Fundo principal
Malva Profundo
#665063
Textos e títulos
Aprendizado
Um sistema de estoque só é confiável se as regras valerem em qualquer caminho. Começar pelo modelo de dados e pelas regras de negócio, e só depois desenhar as telas, deixou a interface mais simples: cada tela só precisa mostrar o que o back-end já garante.
Outros projetos para conhecer.
SaaS · Produto próprioSeu Barba
SaaS de agendamento para barbearias: marca, app e landing page de vendas, produto próprio em desenvolvimento
Ver projeto
Cidadania & ImigraçãoVogel Cidadania Italiana
Landing page de captação para assessoria de cidadania italiana, do UX/UI ao código em React, com formulário de avaliação gratuita, API de leads e versão mobile
Ver projeto
SaaS · JurídicoValverde Jurídico
Sistema SaaS de gestão jurídica para escritório de advocacia: clientes, processos, agenda, portal do cliente e site institucional, do UX ao back-end
Ver projeto