Built with AI · PWA Feito com IA · PWA

Storetag: Know what's in every box Storetag: Saiba o que tem em cada caixa

A QR and AI system for physical storage inventory Um sistema de QR e IA para inventário de armazenamento físico

Live · PWA No ar · PWA QR + AI search QR + busca com IA Solo product Produto solo
Live in production · storetag.gsromerolab.com Em produção · storetag.gsromerolab.com
Storetag Dashboard

ContextContexto

My roleMeu papel
Product Designer + Builder Designer de Produto + Builder
TeamTime
Solo, with AI Solo, com IA
TypeTipo
Personal product · PWA Produto pessoal · PWA
Status
Live in production Em produção
Stack
React · Node.js · SQLite · Gemini AI
Hosting Hospedagem
Cloudflare Pages + D1 + R2

The observation A observação

Physical storage has no index. Once something goes into a box, the only way to find it is to open every box until you find it. The problem isn't clutter: it's that objects disappear from memory as soon as they're out of sight. I wanted to fix that. Armazenamento físico não tem índice. Depois que algo vai para uma caixa, a única forma de achar é abrir cada caixa até encontrar. O problema não é bagunça: é que objetos somem da memória assim que saem do campo de visão. Eu queria resolver isso.

The problem O problema

No way to know what's in a box without opening it Sem como saber o que tem numa caixa sem abrir

  • Physical search only: the only way to find something was to open every box.
  • Busca física apenas: a única forma de achar algo era abrir cada caixa.
  • No inventory: nothing was catalogued, so memory was the only reference.
  • Sem inventário: nada estava catalogado, então a memória era a única referência.
  • Wasted time: looking for things stored away was always frustrating and slow.
  • Tempo perdido: encontrar coisas guardadas era sempre frustrante e lento.

The solution A solução

A digital label on every box, with AI to find anything Uma etiqueta digital em cada caixa, com IA para achar tudo

  • QR code per box: print and stick. Scan to see everything inside, instantly.
  • QR code por caixa: imprimir e colar. Escanear para ver tudo o que há dentro, na hora.
  • Photo inventory: add photos and descriptions to each item stored.
  • Inventário com fotos: adicionar fotos e descrições de cada item guardado.
  • AI search: type anything in natural language and find which box it's in.
  • Busca com IA: digitar qualquer coisa em linguagem natural e descobrir em qual caixa está.
1
ResearchPesquisa
2
DesignDesign
3
BuildDesenvolvimento
4
ShipPublicação
01

ResearchPesquisa

Identify the real scope of the problem. Identificar o escopo real do problema.

Early research revealed that the problem extends well beyond home organization. Moving, workshops, small storage rooms, inventory for small businesses: the need to know what is stored where appeared across very different contexts. That shaped the scope before any line of code.

A pesquisa inicial revelou que o problema vai além de organizar coisas em casa. Mudanças, ateliês, depósitos, estoques pequenos: a necessidade de saber o que está guardado onde apareceu em contextos muito diferentes. Isso moldou o escopo antes de qualquer linha de código.

Research diagram
02

DesignDesign

Define scope, flows, features and art direction. Definir escopo, fluxos, features e direção de arte.

Scope, flows, features, copy and art direction were defined by me. The AIs worked as brainstorm and execution partners, but every product and design decision came from a deliberate choice.

Escopo, fluxos, features, comunicação e direção de arte foram definidos por mim. As IAs atuaram como parceiras de brainstorm e execução, mas cada decisão de produto e de design partiu de uma escolha deliberada minha.

Design diagram
03

BuildDesenvolvimento

Develop with AI partners in a continuous review loop. Desenvolver com IAs em loop contínuo de revisão.

Development used Claude Code (Anthropic) and Codex (OpenAI): both wrote and reviewed each other's code throughout the process. For item recognition in photos, the choice was Gemini, for the quality of its visual identification.

O desenvolvimento usou Claude Code (Anthropic) e Codex (OpenAI): os dois escreveram e revisaram o código um do outro ao longo do processo. Para o reconhecimento de itens nas fotos, a escolha foi o Gemini, pela qualidade na identificação visual.

Build diagram
04

ShipPublicação

Launch and learn from real usage. Publicar e aprender com o uso real.

Shipped as a PWA with no install required. Real usage immediately surfaced what testing could not: users rarely add items manually. Gemini identifies what is in a photo with enough quality that most of the inventory fills itself. Reducing friction at the right moment changes behavior.

Publicado como PWA, sem necessidade de instalação. O uso real revelou imediatamente o que os testes não revelaram: os usuários raramente adicionam itens manualmente. O Gemini identifica o que há em uma foto com qualidade suficiente para que a maior parte do inventário se preencha sozinha. Reduzir fricção no momento certo muda o comportamento.

Ship diagram

The product O produto

Four core surfaces that turn a physical chaos into a searchable, scannable inventory. Quatro superfícies que transformam uma bagunça física num inventário pesquisável e escaneável.

DashboardDashboard

All your boxes at a glance Todas as suas caixas de relance

A clean grid of all storages, with photos and location. At a glance, you know what's where. No opening required. Um grid limpo com todos os espaços, com fotos e localização. De relance, você sabe o que está onde. Sem precisar abrir nada.

Storage detailDetalhe do espaço

Everything inside, with photos Tudo o que está dentro, com fotos

Each storage shows all its items with photos, description and location. Accessible by scanning the QR code on the physical box. No app install needed. Cada espaço mostra todos os itens com fotos, descrição e localização. Acessível escaneando o QR code na caixa física, sem instalar nada.

QR ScannerScanner QR

Point, scan, done Apontar, escanear, pronto

The scanner opens directly in the browser, no app to install. Point at the QR code on any box and go straight to its contents. O scanner abre direto no navegador, sem app para instalar. Aponte para o QR code de qualquer caixa e acesse o conteúdo na hora.

AI SearchBusca com IA

Find anything, in any box, with plain language Ache qualquer coisa, em qualquer caixa, com linguagem simples

Type "the blue sweater I wore at the beach" and the AI finds it across all your storages, even if the exact words aren't in the description. Powered by Google Gemini. Digite "o blusão azul que usei na praia" e a IA encontra em todas as suas caixas, mesmo que as palavras exatas não estejam na descrição. Alimentado pelo Google Gemini.

Storetag Dashboard Storetag Storage detail Storetag QR Scanner Storetag AI Search

Built with AI, from scratch Construído com IA, do zero

The entire product was designed and shipped solo, using AI as a development partner. Frontend, backend, database and infrastructure: all decisions were mine, all code was written with AI. O produto inteiro foi projetado e publicado sozinho, usando IA como parceiro de desenvolvimento. Frontend, backend, banco de dados e infraestrutura: todas as decisões foram minhas, todo o código foi escrito com IA.

🎨

Designed every screen

Product thinking, user flows, visual design and interaction. All decisions were mine, from problem definition to the final UI.

Projetei cada tela

Pensamento de produto, fluxos de usuário, design visual e interação. Todas as decisões foram minhas, da definição do problema até a UI final.

Shipped without a dev team

React frontend, Node.js backend, SQLite database, Cloudflare infrastructure. Built and deployed to production without writing a single line of code by hand.

Publiquei sem time de dev

Frontend em React, backend em Node.js, banco de dados SQLite, infraestrutura Cloudflare. Construído e publicado em produção sem escrever uma linha de código manualmente.

🔁

Iterated at design speed

When something wasn't working, I changed it immediately. No sprint cycles, no ticket backlogs. Just problem and solution.

Iterei na velocidade do design

Quando algo não funcionava, eu mudava na hora. Sem ciclos de sprint, sem fila de tickets. Só problema e solução.

Learnings Aprendizados

Real users surface what prototypes don't

Controlled testing validates flows. Real usage reveals what actually matters. The two aren't the same, and there's no shortcut between them.

Usuários reais revelam o que protótipos não revelam

Testes controlados validam fluxos. Uso real revela o que de fato importa. As duas coisas não são equivalentes, e não há atalho entre elas.

The hardest part is knowing what to build

AI removed the bottleneck between intention and execution. It didn't remove the need for judgment. Deciding what to build, in what order, and why: that's still the designer's job.

A parte difícil é saber o que construir

A IA removeu o gargalo entre intenção e execução. Não removeu a necessidade de julgamento. Decidir o que construir, em que ordem, e por quê: esse continua sendo o trabalho do designer.

The feature users rely on most isn't the one that requires the most effort

Users rarely add items manually. Gemini identifies what's in a photo with enough quality that most of the inventory fills itself. Reduce the cost of the right behavior, and users will take it.

A feature mais usada não é a que exige mais esforço

Os usuários raramente adicionam itens manualmente. O Gemini identifica o que há em uma foto com qualidade suficiente para que a maior parte do inventário se preencha sozinha. Reduza o custo do comportamento correto e os usuários o adotam.