Alam Sawame

Desenvolvedor de apps web

JP / EN / PT

Disponível para trabalho

Você já sentiu algo assim no dia a dia?

Registrar cada gasto é cansativo, o total fica difícil de entender e, quanto mais opções você reúne, mais difícil se torna decidir.

Para lidar com esse problema, criei o Kaimono, uma aplicação web localizada para planejamento de compras, visualização de orçamento e colaboração.


Visão Geral do Projeto

  • Tipo de projeto: SaaS pessoal / projeto de portfólio
  • Papel: Engenheiro full-stack solo
  • Estágio: Em desenvolvimento ativo
  • Foco principal: arquitetura multi-tenant, autenticação segura, colaboração e roteamento com i18n
  • Stack: Next.js 15, React 19, TypeScript, Prisma 6, PostgreSQL, Auth.js, Tailwind CSS e Zod

Implementação Atual

  • Workspaces por subdomínio com isolamento de dados entre tenants
  • Acesso por funções OWNER, ADMIN e MEMBER
  • Itens essenciais, compras planejadas e organização de orçamento por projeto
  • Convites para workspaces, comentários, curtidas e gestão de membros
  • Extração de informações de produtos a partir de URLs públicas
  • Autenticação de dois fatores TOTP opcional e códigos de recuperação
  • Contato autenticado com suporte e proteção contra abuso
  • Localização em inglês, japonês e português
  • Schema Prisma com 16 models e 5 enums
  • Deploy na Vercel com migrações PostgreSQL

Fluxos Principais

Itens Essenciais

Essenciais são itens leves para compras recorrentes ou imediatas. O workspace pode registrar título, preço, quantidade e status da compra, mantendo os gastos pendentes visíveis.

Compras Planejadas

Compras planejadas armazenam informações mais completas para itens que precisam de comparação ou orçamento antes da compra, incluindo prioridade, URL, imagem, descrição, comentários, curtidas e um projeto opcional.

Projetos

Projetos agrupam compras planejadas por objetivo e facilitam a compreensão do orçamento total. Por exemplo, um projeto de reforma pode organizar opções de iluminação, móveis e decoração em um só lugar.

Colaboração

Proprietários e administradores podem convidar membros por e-mail. As verificações de membership e tenant são feitas no servidor para impedir acesso ou movimentação de registros entre workspaces.


Entrada de Produtos Assistida por IA

Em vez de preencher todos os campos manualmente, o usuário pode enviar uma URL pública de produto. O Kaimono lê metadados estruturados, normaliza textos úteis com IA e importa uma imagem válida quando ela está disponível.

A rota de extração inclui validação de segurança da URL, limites de redirecionamento e resposta, timeout e rate limiting opcional. Um saldo simples de créditos controla o uso e evita solicitações ilimitadas de extração.


Autenticação e Segurança da Conta

O Kaimono oferece login com GitHub, Google e magic link por e-mail usando Auth.js. O usuário também pode ativar a autenticação de dois fatores TOTP nas configurações da conta.

O processo de configuração gera um QR code para o aplicativo autenticador e códigos de recuperação de uso único. Contas com o recurso ativado precisam concluir o segundo fator antes de acessar rotas protegidas do workspace.


Roteamento de Workspaces

Em produção, o Kaimono usa um subdomínio para cada workspace:

workspace.p0r6iz89.cloud

  • workspace identifica o tenant
  • p0r6iz89.cloud é o domínio raiz

O middleware combina tratamento de locale, verificação de autenticação, exigência do segundo fator e roteamento do workspace:

  1. Normaliza a requisição para uma rota com locale suportado.
  2. Redireciona usuários não autenticados para fora de páginas protegidas.
  3. Exige o desafio de segundo fator quando ele está ativado.
  4. Extrai o subdomínio do workspace a partir do host.
  5. Reescreve internamente a requisição para /{locale}/s/{subdomain}.

middleware.ts Request Flow

Isso mantém a URL pública simples enquanto a aplicação utiliza uma única árvore localizada do App Router.


Decisões de Engenharia

Escolhi Server Actions e Prisma para compartilhar validação tipada e acesso ao banco nos fluxos das páginas, sem manter uma camada REST separada para cada formulário.

Todas as operações de dados do tenant resolvem o usuário autenticado e sua membership no workspace no servidor. O Zod valida as mutações, enquanto relações compostas no banco impedem que uma compra planejada seja atribuída a um projeto de outro workspace.

O maior desafio foi fazer autenticação, roteamento localizado e subdomínios funcionarem como um único sistema. Implementar essas fronteiras diretamente trouxe experiência prática com roteamento baseado em host, autorização, processamento seguro de URLs e fluxos de autenticação com estado.


Open Source e Ambiente Local

O Kaimono pode ser executado localmente com npm e Docker:

npm install
docker compose up -d db
npx prisma migrate dev
npm run dev

Links:

URLs locais:

  • App principal: http://localhost:3000/pt-BR
  • App do workspace: http://workspace.localhost:3000/pt-BR

O Docker Compose inicia o PostgreSQL, enquanto a aplicação Next.js roda com npm run dev.