Frontend e interface
HTML, CSS e JavaScript formam a base que uso para criar interfaces, estruturar páginas, aplicar interações e ajustar a responsividade.
- HTML5
- CSS3
- JavaScript
Projetos
Projetos que saíram das minhas ideias e coloquei a mão na massa: interface daora, fluxo bem feito e uma boa base para o meu futuro.
Atual
Cardápio Digital v2.0 | Tobias Lanches
Versão ainda melhor do cardápio digital: agora ele tem um catálogo melhor, design mais bonito e layout mais organizado, checkout mais completo e um Admin preparado para alterações e personalizações diárias.
- HTML5
- CSS3
- JavaScript
- Supabase
- Vercel
O problema
A primeira versão já tirava o pedido da conversa solta e bagunçada no WhatsApp e eliminava a demora no atendimento, mas ainda precisava de um "Chan" para ficar pronto para o dia a dia e garantir uma experiência muito melhor para os clientes e o Admin, então: o catálogo ficou maior, checkout mais completo, Admin mais confiável e uso online em qualquer lugar.
Qual foi a solução?
Reorganizei a experiência pública e o painel do Admin para deixar o fluxo mais bem feito e bonito visualmente. O cliente navega pelo cardápio, monta o seu pedido, confere e o envia pelo WhatsApp; no Admin, a manutenção do catálogo, das configurações e personalização fica mais organizada.
Minha contribuição
- Na concepção, defini a evolução da primeira versão para uma base mais completa.
- Na análise de requisitos, organizei as necessidades do cliente, do atendimento e do Admin.
- No design/modelagem usei novamente o figma e planejei uma interface melhor, o fluxo do pedido e a estrutura do painel administrativo.
- No código, desenvolvi catálogo, carrinho, checkout, Admin e integração com o Supabase.
- Nos testes, validei o funcionamento e a responsividade em diferentes tamanhos de tela.
- Na implantação/manutenção, publiquei na Vercel e deixei a base preparada para ajustes e evolução.
O que se destaca?
- Catálogo público com produtos, categorias, adicionais e combos em uma navegação mais limpa.
- Checkout preparado para entrega, retirada ou consumo no local, com taxa por localidade, Pix, mesa e dados de endereço mais completos e organizados visualmente.
- Painel de Admin mais forte e bonito para cuidar do catálogo, horários, localidades, taxas e uso do Supabase, mas agora com mais informações e segurança para armazenamento de dados.
O que evoluiu?
A v2.0 deixou de ser apenas uma melhoria visual e passou a ser uma base mais próxima de produto: mais consistente em celular e computador, mais simples de manter e mais preparada para continuar crescendo sem perder clareza para quem usa.
Primeira versão
Cardápio Digital | Tobias Lanches
Este foi o começo do cardápio digital: tirei o menu do PDF e levei o pedido para um menu na web, com carrinho e envio direto no WhatsApp do estabelecimento.
- HTML5
- CSS3
- JavaScript
- Supabase
O problema
O quiosque precisava parar de depender de PDF e mensagens soltas no WhatsApp. Toda mudança no cardápio virava retrabalho, o atendimento demorava e o pedido podia chegar do cliente para o atendimento sem o nível de organização que precisava.
Qual foi a solução?
Transformei a ideia em um cardápio web, com categorias, carrinho e envio mais organizado ao WhatsApp. O cliente faz a escolha do que deseja, confere o pedido e manda uma mensagem pronta para o atendimento.
Minha contribuição
- Na concepção, transformei a ideia de sair do PDF em um cardápio web e navegável.
- Na análise de requisitos, organizei o fluxo básico de escolha, carrinho e envio do pedido.
- No design/modelagem usei o figma para fazer o design e depois estruturei categorias, produtos, pedido e painel administrativo inicial.
- No código, desenvolvi o catálogo, carrinho, envio pro WhatsApp e painel de edição.
- Nos testes, validei o uso no navegador, principalmente pensando no acesso pelo celular.
- Na implantação/manutenção, publiquei a primeira versão e usei essa base para evoluir para a v2.0.
O que se destaca?
- Catálogo organizado por categorias, com leitura rápida de produtos, descrições e preços.
- Carrinho com revisão do pedido e montagem automática da mensagem enviada ao atendimento.
- Painel administrativo para cadastrar, editar ou remover itens sem mexer diretamente no código.
O que evoluiu?
Essa versão foi a base da v2.0. Ela provou que o fluxo de atendimento e vendas melhorou e aumentou 70% (relato dos proprietários) logo depois, veio uma nova versão com visual mais bonito, um checkout muito melhor e um Admin mais preparado e claro para configurações e personalização.
Em breve
Próximo case em preparação
Este espaço fica reservado para o próximo projeto, veremos qual vai ser.
- Projeto
- Solução
- Tecnologias
O que vai entrar aqui?
A ideia não é colocar qualquer projeto só para preencher espaço. Este card fica guardado para uma entrega que mostre o problema, solução, minhas decisões e resultado.
O que esse case precisa provar?
- Um problema fácil de entender.
- Uma solução publicada e funcionando.
- O que evoluiu?