Presença de marca
Uma linguagem gastronômica expressiva, do primeiro título ao detalhe de cada card.
Preparando uma boa experiência…
PORTFÓLIO / CASE STUDYDESIGN & DESENVOLVIMENTO FRONTEND
GASTRONOMIA · EXPERIÊNCIA DIGITAL
Cidade
do Sabor.
Uma identidade que abre o apetite.
Uma experiência que vai além do cardápio.
Da primeira impressão à gestão do pedido: um projeto de frontend para uma hamburgueria fictícia com personalidade própria.
- Projeto
- Loja + painel administrativo
- Entregas
- Interface, interação e desenvolvimento
- Versão apresentada
- V3 · demonstração local
01VISÃO GERAL
Da vontade de provar
à experiência de explorar.
A Cidade do Sabor traduz uma hamburgueria artesanal fictícia em uma experiência digital: presença de marca, descoberta do cardápio e uma jornada de pedido que pode ser testada no navegador.
O desenvolvimento evoluiu da apresentação da marca para a personalização de produtos e, na V3, para uma operação demonstrativa com perfis de cliente e administrador, pedidos, reservas e relatórios.
O objetivo é demonstrar como design e regras de interface trabalham juntos em um produto consistente, com estados, validações e respostas às ações de quem navega.
Jornada do cliente
Escolher, personalizar, revisar e acompanhar um pedido de teste.
Visão da operação
Explorar a rotina de uma hamburgueria por meio de um painel local.
02IDENTIDADE VISUAL
Calor, contraste
e personalidade.
O preto e o grafite dão profundidade às imagens. O vermelho conduz as ações e o laranja traz o calor da chapa para os detalhes da marca.
A ASSINATURA DA CASACIDADEDO SABOR.
Uma chama, um nome e a presença de uma marca feita para dar fome.
TÍTULOS / POPPINSSabor em
cada detalhe.
cada detalhe.
LEITURA / INTER
Clareza para explorar.
Ritmo para continuar.
Na vitrine inicial, o acento serifado em Georgia adiciona um contraste editorial.
Preto#181818
Vermelho#E34B35
Laranja#FFB347
Branco#FFFFFF
Grafite#242424
Imagens gastronômicas geradas por IA para a marca fictícia. As telas apresentadas a seguir são capturas reais do projeto implementado.
03GALERIA DE TELAS
O projeto,
como ele é.
Interfaces capturadas na aplicação em execução, com os produtos e dados fictícios da demonstração. Abra uma captura para observar os detalhes.
Um cardápio para explorar.
Busca, categorias e ordenação colocam os sabores no centro da experiência.
Cada escolha tem seu espaço.
O diálogo de personalização reúne ingredientes, adicionais e cálculo de preço.
Um caminho até a confirmação.
Delivery ou retirada, validação de campos e resumo dos valores de teste.
O outro lado do pedido.
Pedidos de exemplo, etapas, filtros e ações de gestão no painel administrativo.
A operação ganha uma visão completa.
Dashboard com indicadores e gráficos derivados dos pedidos locais. Os números desta captura são dados fictícios de exemplo.
04FUNCIONALIDADES
Mais que telas.
Uma jornada interativa.
As interações abaixo estão implementadas. A operação comercial é simulada inteiramente no navegador.
Escolher e personalizar
Pesquisa sem acentos, filtros, ordenação, retirada de ingredientes, adicionais e montagem de combos.
Montar e acompanhar
Carrinho persistido, preços em centavos, checkout local, histórico de pedidos e atualização de status entre abas da mesma origem.
Explorar a operação
Gestão local de produtos, disponibilidade, pedidos e reservas. Relatórios calculados a partir dos dados de demonstração.
O alcance desta demonstração
Os perfis não têm autenticação real. Pedidos, reservas, faturamento e pagamentos são fictícios. Não há backend, cobrança, envio ao restaurante ou reserva de mesa real. Os dados ficam no navegador e não são compartilhados entre computador e celular.
Conhecer os perfis demoValidação de formuláriosConfirmação antes de excluirEstados vazios e avisosRestauração dos exemplos
05TECNOLOGIAS
Uma base clara.
Detalhes bem construídos.
Ferramentas e recursos confirmados no código, aplicados às necessidades da experiência.
- 01Next.js · App Router
- Rotas, layouts compartilhados, metadados e otimização de imagens.
- 02React + TypeScript
- Componentes, tipos de domínio e estado compartilhado com Context.
- 03Tailwind CSS 4 + CSS
- Identidade visual, composição das telas e adaptação aos diferentes tamanhos.
- 04Lucide React + Fontsource
- Ícones e fontes Poppins e Inter distribuídas localmente.
- 05localStorage + sessionStorage
- Dados de teste no navegador e preferência de animação por sessão.
- 06SVG + Web Animations API
- Gráficos locais com tabelas acessíveis e transições da vitrine.
- 07Playwright + axe-core
- Verificações de fluxos, responsividade e acessibilidade automatizada.
- 08ESLint + npm
- Análise de código, dependências e scripts de desenvolvimento e build.
06EXPERIÊNCIA
Pensado para
acompanhar você.
A mesma identidade, com composição adaptada ao espaço disponível.
- Uma navegação que se adapta.
Menu lateral na loja e navegação recolhível no painel, com controles para toque e teclado.
- Imagens com espaço para respirar.
Produtos inteiros nos cards e dois favoritos por linha no celular, preservando a leitura e as ações.
- Movimento com intenção.
Trocas suaves na vitrine e respeito à preferência de movimento reduzido, com escolha explícita para ativar a animação.
- Respostas a cada escolha.
Foco visível, diálogos nativos, mensagens de estado e feedback nas ações da loja e do painel.
07DEMONSTRAÇÃO
Agora, a experiência
é sua.
Explore os fluxos implementados. Para testar pedidos e reservas, use somente informações fictícias.
01
Conheça a loja
Comece pela vitrine e explore a identidade da marca.
Abrir o site 02Monte sua combinação
Personalize um produto, adicione ao carrinho e experimente o checkout.
Explorar cardápio 03Escolha seu perfil
Cliente Teste ou Administrador Demo. Dois acessos prontos, sem senha.
Escolher perfil demo 04Assuma o balcão
Se necessário, selecione o perfil Administrador Demo na tela de acesso.
Abrir painel demo08CONCLUSÃO
Design que dá vontade.
Código que dá continuidade.
A Cidade do Sabor reúne direção visual, componentes reutilizáveis e regras de interface em uma experiência explorável. Um projeto de portfólio que demonstra atenção à apresentação, à interação e à consistência de uma aplicação frontend.
CIDADE DO SABOR / V3 DEMONSTRATIVAVoltar ao topo