Voltar para o portfólio
SaaS · Gestão de Estoque

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 PapelariaMimos Papelaria
01

Contexto

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.

Cliente
Mimos Papelaria
Categoria
SaaS · Gestão de Estoque
Papéis
Desenvolvedor Full Stack, Designer UX/UI
Stack
React, API REST
02

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.

03

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.

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 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.

  8. 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.

  9. 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 / 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.

04

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.

Front-end
React, com componentes reutilizáveis e layout responsivo
Back-end
API REST com rotas de produtos, movimentações, relatórios, categorias e fornecedores
Modelo de dados
5 entidades (produtos, categorias, movimentações, fornecedores e usuários) com chaves UUID
Movimentações
Cada registro guarda o estoque antes e depois, o tipo (entrada, saída, ajuste ou perda), o motivo e quem fez
05

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:

SKU único
Um SKU repetido é recusado pela API (HTTP 409)
Saldo
Uma saída não pode deixar o estoque negativo; a validação e a gravação acontecem numa transação atômica
Rastreabilidade
Toda movimentação registra usuário, data, motivo e referência
Histórico
Produto com movimentações é arquivado, nunca apagado
Preços
Valores gravados em decimal, nunca em ponto flutuante
Acesso
Login com senha criptografada (hash) e permissões por perfil
06

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.

Entidades, relacionamentos e regras de negócio
Modelo de dados e rotas da API REST
07

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.

Componentes
Estados e validações

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

08

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.