MyMenu: Aplicação de Delivery com Vue.js e Strapi

O MyMenu é um projeto de Front-end completo para delivery de comida, desenvolvido com Vue.js 3 e Vite. O desafio principal foi integrar o gerenciamento de estado complexo (carrinho de compras) e o fluxo de autenticação via Strapi.

Ver no GitHub (Código)

Funcionalidades Principais

Gerenciamento de Estado (Carrinho)

Implementação do carrinho de compras usando Pinia. Solução para o desafio de manter o estado global, permitindo adicionar, remover e calcular o total da compra dinamicamente.

Autenticação JWT e Proteção de Rotas

Conexão dos formulários de Login/Cadastro aos endpoints do Strapi. Utilização do Vue Router para proteger rotas sensíveis (Carrinho) verificando o estado de autenticação.

Arquitetura Frontend Limpa

Código organizado em camadas claras: Services (chamadas HTTP), Stores (Pinia/Estado) e Views/Components (UI), seguindo as boas práticas da comunidade Vue.

Integração com CMS Headless (Strapi)

Consumo da Collection Product do Strapi para exibir o cardápio real e gerenciamento do token JWT retornado no Login/Cadastro.

Tecnologias Utilizadas

Vue.js 3 Pinia (Gerenciamento de Estado) Vue Router (Proteção de Rotas) Strapi (CMS Headless) JWT Authentication Tailwind CSS (Estilização)

Demonstrações

Visualização do cardápio e lista de produtos (Usuário Deslogado).

Visualização do cardápio e lista de produtos (Usuário Logado).

Tela de Login e Cadastro (conectado ao Strapi).

Carrinho de compras com cálculo de total.

Este projeto é o front-end. O back-end (API) é um Strapi rodando em http://localhost:8080.