Frontend moderno para o sistema de encurtamento de URLs, construído com Svelte 5 e Vite.

• Interface moderna e responsiva com design system consistente
• Autenticação completa com login e registro de usuários
• Encurtamento de URLs com e sem autenticação
• Dashboard personalizado para gerenciar URLs
• Geração de QR Codes para URLs encurtadas
• Estatísticas de cliques e histórico de URLs
• Interface intuitiva com feedback visual

• Svelte 5 - Framework reativo
• TypeScript - Tipagem estática
• Vite - Build tool e dev server
• Axios - Cliente HTTP
• QRCode - Geração de QR codes

1. Instalar dependências:

   npm install

2. Configurar variáveis de ambiente:

   cp env.example .env

   Edite o arquivo .env e configure:

   • VITE_API_URL: URL da API backend (padrão: http://localhost:3000)

3. Executar em desenvolvimento:

   npm run dev

4. Build para produção:

   npm run build

src/
├── lib/                    # Componentes e utilitários
│   ├── api.ts             # Cliente da API
│   ├── stores.ts          # Stores do Svelte
│   ├── AuthForm.svelte    # Formulário de autenticação
│   ├── Navigation.svelte  # Navegação
│   ├── UrlShortener.svelte # Encurtador de URLs
│   └── UrlList.svelte     # Lista de URLs
├── pages/                 # Páginas da aplicação
│   ├── Login.svelte       # Página de login
│   ├── Register.svelte    # Página de registro
│   └── Dashboard.svelte   # Dashboard do usuário
├── App.svelte            # Componente principal
├── main.ts               # Ponto de entrada
└── app.css              # Estilos globais

• VITE_API_URL: URL da API backend
• VITE_APP_NAME: Nome da aplicação
• VITE_APP_VERSION: Versão da aplicação

O Vite está configurado para fazer proxy das requisições /api para o backend:

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
    }
  }
}

• Primária: #3b82f6 (Azul)
• Secundária: #667eea (Gradiente)
• Sucesso: #10b981 (Verde)
• Erro: #dc2626 (Vermelho)
• Neutro: #6b7280 (Cinza)

• Família: System fonts (San Francisco, Segoe UI, etc.)
• Tamanhos: Escala responsiva
• Pesos: 400 (normal), 500 (medium), 600 (semibold), 700 (bold)

O frontend é totalmente responsivo e funciona em:

• Desktop: 1200px+
• Tablet: 768px - 1199px
• Mobile: < 768px

O sistema de autenticação inclui:

• Login com email e senha
• Registro de novos usuários
• JWT para sessões persistentes
• Proteção de rotas para páginas privadas
• Logout automático em caso de erro 401

• URLs anônimas: Sem necessidade de cadastro
• URLs autenticadas: Vinculadas ao usuário
• Validação de URLs: Verificação de formato
• QR Code: Geração opcional de QR codes
• Cópia para clipboard: Funcionalidade nativa

• Lista de URLs: Paginação e filtros
• Estatísticas: Número de cliques por URL
• Ações: Editar e excluir URLs
• Histórico: Data de criação e última atualização

npm run build

npm run preview

# Build da imagem
docker build -t encurtaador-frontend .

# Executar container
docker run -p 5173:5173 encurtaador-frontend

• npm run dev: Servidor de desenvolvimento
• npm run build: Build para produção
• npm run preview: Preview do build
• npm run check: Verificação de tipos

Cada componente segue o padrão Svelte 5:

<script lang="ts">
  // Lógica do componente
</script>

<!-- Template HTML -->

<style>
  /* Estilos scoped */
</style>

1. Fork o projeto
2. Crie uma branch para sua feature
3. Commit suas mudanças
4. Push para a branch
5. Abra um Pull Request

Este projeto está sob a licença MIT.