Alpha EdTech · Projeto em grupo
Food Point: planejamento de eventos gastronômicos
Uma plataforma para planejar eventos gastronômicos: o evento, o local no mapa, o cardápio com os ingredientes, os convidados e a lista de compras. Uma SPA em JavaScript puro, sem framework, feita em grupo.
Food Point
Endereço: /Reprodução
Ele carrega as imagens originais, cerca de 3 MB. A conta de teste está no painel do servidor.
Reprodução: o frontend é o de 2024, sem mudanças. O backend em Express e PostgreSQL deu lugar a uma simulação no seu navegador, com as mesmas rotas, validações e respostas, e a recuperação de senha mostra aqui o código que iria por e-mail. O CEP, o mapa e o endereço usam as APIs públicas de verdade.
Em 30 segundos
- Projeto em grupo de 4 pessoas na Alpha EdTech, em cerca de 4 semanas, sem framework no frontend.
- Fiz a maior parte do frontend: o roteador da SPA, a home e o fluxo de criar evento, com mapa e cardápio.
- Apresentado num demo day. O frontend de 2024 roda acima, sem mudanças, sobre um servidor simulado.
- Quando
- abr — mai 2024 · ~4 semanas
- Papel
- Desenvolvedor · time de 4, sem líder
- Origem
- Projeto de grupo na Alpha EdTech
- Stack
- JavaScript, HTML, CSS, Node.js, Express, PostgreSQL, Leaflet, JWT, Nginx
Contexto
Em abril de 2024, uns seis meses depois de eu entrar na Alpha EdTech, o desafio do ciclo era uma aplicação de eventos, com listas e cadastros. Meu grupo escolheu eventos gastronômicos: a pessoa monta o evento, o cardápio e a lista de convidados, e a plataforma junta os ingredientes de todos os pratos numa lista de compras.
As regras eram duas: nenhum framework no frontend e só o Express no backend. Era o começo da formação, e o que se avaliava era o conhecimento técnico, não o produto.
Éramos quatro, sem líder: as decisões saíam por consenso. Eu fui desenvolvedor.
O problema
Sem React nem Vue, tudo o que um framework entrega pronto precisava ser escrito à mão: trocar de página sem recarregar, montar cada tela pelo DOM, levar dados de uma tela para a outra e falar com a API.
E criar um evento é um fluxo de vários passos (informações, local, cardápio e convidados), cada um com a sua tela, que precisava conversar com um backend sendo escrito ao mesmo tempo, por outras pessoas.
Minha parte
Fiz a maior parte do frontend e algumas partes do backend. Outras telas, como o login, o perfil, a recuperação de senha e a lista de compras, são de colegas do time.
- O roteador da SPA, em JavaScript puro, com rotas que exigem login.
- A camada de API do frontend e componentes usados em várias telas.
- A home e todo o fluxo de criar um evento: informações, local (CEP, mapa com Leaflet e endereço legível pelo Nominatim) e cardápio. Também a tela de convidados.
- No backend: a inicialização do Express, as rotas que servem as páginas, a conexão com o PostgreSQL e o login.
- O Nginx do servidor: proxy reverso com HTTPS na frente do Node.
- Cerca de 60% do design no Figma. O protótipo se perdeu: a conta que o criou não existe mais.
- Na reta final, a maior parte das correções de integração entre frontend e backend.
Decisões técnicas
Um roteador feito à mão
As rotas são um objeto: para cada caminho, a função que monta a tela, o título, a descrição e se ela exige login. Para trocar de página, qualquer tela dispara um evento próprio (onstatechange); o roteador faz o pushState e redesenha a raiz. O botão voltar passa pelo popstate. Antes de montar uma tela protegida, o roteador pergunta à API quem está logado e, se ninguém estiver, manda para o login.
Telas como funções
Cada tela é uma função que devolve um elemento do DOM, montado com createElement, sem template e sem virtual DOM. O que uma tela precisa passar para a próxima, como o evento recém-criado, vai junto no evento de navegação, e o roteador entrega para a função da tela seguinte.
O local, do CEP ao endereço
O local pode vir da localização do navegador, de um CEP ou de um clique no mapa do Leaflet, e é salvo como coordenadas. Mostrar só “-23.17,-45.88” não dizia nada a ninguém, então as coordenadas passam pelo Nominatim, do OpenStreetMap, que devolve o endereço legível. Tudo isso é chamado direto do navegador, sem passar pelo nosso servidor.
Nginx na frente do Node
No servidor da Alpha EdTech, o Nginx recebia as requisições em HTTPS e repassava ao Node, e o que chegava em HTTP era redirecionado para HTTPS. O cookie do login é marcado como secure, e o navegador só o envia por HTTPS.
A integração na reta final
Com as telas e a API prontas em paralelo, a última semana foi de juntar as partes. Corrigi eventos que disparavam duas vezes nos componentes do cardápio, coloquei debounce, telas de carregamento enquanto a API responde, o logout e a página 404, e uma correção de segurança no envio de imagens.
Arquitetura
Resultado
Apresentamos o Food Point num demo day, para uma banca de alunos de outros grupos e de empresas parceiras da Alpha EdTech. Ele rodou no servidor da Alpha, onde algumas pessoas criaram contas e eventos. Esse servidor não existe mais, os dados se perderam, e não houve retorno de uso além da apresentação.
Em janeiro de 2025, coloquei o projeto em Docker para rodar localmente e gravar uma demonstração (na época do desafio, ainda não tínhamos aprendido Docker).
A demonstração no topo desta página roda o frontend de 2024 sem mudanças. Só o servidor é simulado, no seu navegador, com as mesmas rotas e respostas.