🤥 Migué App — Web

faltou, mas com criatividade

Versão web do Migué App — gerador de desculpas aleatórias, criativas e engraçadas. Mesmas funcionalidades do app mobile, adaptadas para navegador com layout responsivo.

---

🌐 Sobre o projeto

Construído com React + Vite + TypeScript, sem dependências de backend. Todos os dados são persistidos no localStorage do navegador. Funciona como SPA estática e pode ser hospedado em qualquer CDN.

---

✨ Funcionalidades

• 🎲 Gerador aleatório com filtros de categoria e nível
• ❤️ Favoritos — salvos no localStorage
• 🕐 Histórico — últimas 50 desculpas geradas
• 📋 Copiar via Clipboard API
• 📤 Compartilhar via Web Share API (com fallback para clipboard)
• 🔔 Toasts de feedback inline
• 110 desculpas em 6 categorias e 4 níveis

---

📂 Categorias e Níveis

Idênticos ao app mobile — veja o README principal.

---

🛠️ Stack

Tecnologia	Uso
React 18	UI
Vite 5	Build tool
TypeScript	Tipagem estática
React Router v6	Roteamento (HashRouter)
Lucide React	Ícones
CSS puro com variáveis	Estilização (sem framework CSS)
localStorage	Persistência local

---

📁 Estrutura de pastas

web/
├── index.html
├── vite.config.ts
├── tsconfig.json
├── package.json
└── src/
    ├── main.tsx                  # Entry point
    ├── App.tsx                   # HashRouter + rotas
    ├── index.css                 # Estilos globais + variáveis CSS
    ├── types/index.ts
    ├── constants/
    │   ├── colors.ts
    │   └── categories.ts
    ├── data/
    │   └── desculpas.ts          # 110 desculpas
    ├── utils/
    │   └── storage.ts            # localStorage helpers
    ├── context/
    │   └── AppContext.tsx
    ├── hooks/
    │   └── useDesculpas.ts
    ├── components/
    │   ├── Layout.tsx            # Sidebar (desktop) + Bottom nav (mobile)
    │   ├── Toast.tsx
    │   ├── DesculpaCard.tsx
    │   ├── CategoryFilter.tsx
    │   ├── LevelFilter.tsx
    │   └── DesculpaListItem.tsx
    └── pages/
        ├── Gerador.tsx
        ├── Favoritos.tsx
        ├── Historico.tsx
        ├── Configuracoes.tsx
        └── Sobre.tsx

---

🚀 Como rodar

Pré-requisitos

• Node.js 18+

Instalação

cd web
npm install

Desenvolvimento

npm run dev
# Acesse http://localhost:5173

Build de produção

npm run build
# Gera a pasta dist/ pronta para deploy

Preview do build

npm run preview

---

📱 Layout responsivo

Tela	Layout
Mobile (< 768px)	Bottom tab bar
Desktop (≥ 768px)	Sidebar lateral

---

🚢 Deploy

A pasta dist/ gerada pelo build é 100% estática. Pode ser hospedada em:

• Vercel — vercel deploy
• Netlify — drag & drop da pasta dist/
• GitHub Pages — via GitHub Actions
• Qualquer servidor de arquivos estáticos

Como usa HashRouter, não precisa de configuração de rewrite no servidor.

---

🎨 Design

Mesma identidade visual do app mobile:

Variável CSS	Cor	Uso
--bg	#143022	Fundo principal
--surface	#323232	Cartões e superfícies
--primary	#317039	Botões e ações principais
--secondary	#F1BE49	Destaques e nível Engraçada
--accent	#F8EDD9	Textos de destaque (creme)
--text	#FFFFFF	Texto principal

• Tema escuro com verde floresta como cor base
• Fonte: Inter (Google Fonts)
• Cores por categoria e nível via CSS custom properties (--cat-*, --lvl-*)

---

📄 Licença

MIT