Aplicação de delivery (demo) construída para demonstrar Angular moderno e consumo de uma lib própria: @kaioid/ui-components.
O foco é UX realista com cardápio → cesta → checkout → pedidos, dados mockados e persistência via localStorage.
- NPM (UI lib): https://www.npmjs.com/package/@kaioid/ui-components
- Cardápio com itens e categorias (mock)
- Cesta com persistência em
localStorage - Checkout mockado
- Pedidos com timeline automática (estágios de 10s cada):
- Processando pagamento → Preparando → Saiu para entrega → Entregue
- Notificações (toasts) a cada mudança de status
- Standalone APIs
- Router moderno (rotas e redirects)
- View Transitions (animações suaves entre páginas)
- Estado/persistência via services +
localStorage - Testes unitários + testes de rotas (RouterTestingHarness)
- Layout mobile-first
- Navegação adaptativa:
- Mobile: hambúrguer + bottom navigation
- Desktop: header com navegação
- Feedback visual: estados vazios, progresso do pedido, toasts
- Angular (standalone, router moderno)
- @kaioid/ui-components (componentes + tokens CSS)
- Tailwind CSS (app styling)
- Vitest/Jasmine via Angular test runner (testes)
- Node.js (LTS recomendado)
- npm
No Windows (PowerShell), dentro de app-delivery:
npm installnpm startSe precisar mudar a porta:
npm start -- --port 4201npm run buildnpm run test:ciEste projeto inclui um workflow de CI em .github/workflows/ci.yml que roda em push e pull request:
npm cinpm run test:cinpm run build
A aplicação salva dados localmente (ex.: cesta e pedidos) para simular persistência sem backend.
Para “resetar” o estado:
- Abra DevTools → Application → Local Storage → limpe as chaves do app, ou
- rode o app em janela anônima.
- Cada pedido guarda
createdAt - O status exibido é derivado do tempo decorrido
- Cada estágio dura 10s, total 40s
- O contador e o progresso param ao atingir “Entregue”