Estudo de caso: criando um sistema de autoatendimento com Next.js + Prisma

O projeto Selfcheckout nasceu de uma observação simples: pequenos comércios locais frequentemente enfrentam filas nos horários de pico, mas não têm orçamento para sistemas de autoatendimento caros como os de grandes redes. A ideia foi criar uma solução acessível que pudesse ser implementada com hardware mínimo — apenas um tablet ou computador touch — e ainda assim entregar uma experiência moderna e eficiente.

Este projeto foi desenvolvido durante a FullStackWeek, utilizando tecnologias modernas do ecossistema JavaScript, e depois expandido para servir como um estudo prático de arquitetura de sistemas reais.

Requisitos e Arquitetura

Os requisitos principais eram:

• Interface intuitiva que qualquer cliente pudesse usar sem treinamento
• Gerenciamento de produtos com categorias, variações e complementos
• Integração com impressoras térmicas para comandas
• Dashboard administrativo para gerenciamento de pedidos
• Funcionamento offline em caso de queda de internet

Optei por uma arquitetura JAMstack com Next.js 15 no frontend, aproveitando o App Router e os Server Components para otimizar a performance. Para o backend, utilizei API Routes do Next.js com Prisma ORM, conectado a um banco PostgreSQL.

Além disso, o projeto contou com Tailwind CSS para estilização, React Hook Form + Zod para formulários, Radix UI para componentes acessíveis e Lucide React para ícones. O estado global foi gerenciado via Context API, com notificações estilizadas usando Sonner.

Modelagem de Dados com Prisma

A modelagem de dados foi um dos pontos mais importantes, já que precisava ser flexível para diferentes tipos de negócios (restaurantes, lanchonetes, lojas) e otimizada para consultas rápidas. Um exemplo simplificado:

model Product {
  id          String   @id @default(cuid())
  name        String
  description String?
  price       Decimal
  imageUrl    String?
  category    Category @relation(fields: [categoryId], references: [id])
  categoryId  String
  variations  Variation[]
  addons      ProductAddon[]
  orderItems  OrderItem[]
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

model Category {
  id          String    @id @default(cuid())
  name        String
  imageUrl    String?
  products    Product[]
  storeId     String
  store       Store     @relation(fields: [storeId], references: [id])
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt
}

Frontend com Next.js

Para a interface do cliente, o foco foi simplicidade e clareza: grandes cards de produtos, botões bem visíveis e feedback visual imediato a cada ação. O carrinho de compras foi implementado com Context API e persistência em localStorage, permitindo retomar pedidos mesmo se o navegador fosse fechado.

Outro ponto essencial foi o modo offline. Com service workers, os dados essenciais foram cacheados, garantindo que os pedidos pudessem ser feitos sem conexão. Ao voltar a internet, o sistema sincroniza automaticamente com o servidor.

Lições Aprendidas

Este projeto trouxe aprendizados valiosos sobre UX para interfaces públicas: o que é óbvio para desenvolvedores pode ser confuso para clientes finais. Testes de usabilidade mostraram a necessidade de ícones mais claros, botões maiores e feedback sonoro/visual em certas ações.

Também aprendi muito sobre performance em dispositivos modestos, já que tablets mais antigos podem sofrer com bundles grandes e renderizações desnecessárias. Isso exigiu otimizações cuidadosas.

Por fim, a implementação do modo offline foi mais desafiadora do que esperado, especialmente para garantir consistência dos dados ao sincronizar pedidos feitos sem internet.

Próximos Passos

• Melhorar a acessibilidade (atributos ARIA e navegação por teclado)
• Suporte para cupons de desconto
• Criar dashboard administrativo completo
• Integração com sistemas de estoque
• Adicionar suporte a múltiplos idiomas

O Selfcheckout é um ótimo exemplo de como usar Next.js + Prisma para resolver problemas reais, trazendo para pequenos negócios uma tecnologia que antes só estava disponível em grandes redes.