Rede Capivara - Frontend

Aplicação Web Progressiva (PWA) moderna para a rede social Rede Capivara baseada em ATProtocol.

Trabalho em Progresso

Este projeto está em desenvolvimento ativo. Funcionalidades, APIs e estrutura do projeto estão sujeitos a mudanças.

Tecnologias

• Vue.js 3.5.22 - Framework JavaScript progressivo com Composition API
• Vite 7.1 - Build tool e servidor de desenvolvimento de próxima geração
• Pinia 3.0 - Gerenciamento de estado intuitivo para Vue
• Vue Router 4.5 - Roteador oficial para aplicações Vue.js single-page
• Tailwind CSS 4.1 - Framework CSS utility-first
• Vite PWA Plugin 1.0 - Suporte PWA sem configuração com service workers
• Axios 1.12 - Cliente HTTP baseado em Promises para requisições API
• @vueuse/core 13.9 - Coleção de utilitários essenciais de composição Vue
• Workbox 7.3 - Bibliotecas de service worker para Progressive Web Apps
• unicode-emoji-picker 1.5 - Componente seletor de emojis Unicode

Sistema de Design

Paleta de Cores

A aplicação suporta temas claro e escuro com as seguintes cores da marca:

• Capivara Brown (#7A5C3E) - Destaque de identidade da marca
• Sky Blue (#4DA6FF) - Links e destaques
• Lake Green (#3DBB84) - Ações primárias e estados de sucesso
• Stone Gray (#78716C) - Textos secundários e bordas
• Off-White (#F5F5F5) - Fundo do tema claro

Suporte a Temas

A aplicação inclui implementação completa de temas claro e escuro com transições suaves. A preferência de tema é armazenada localmente e aplicada automaticamente em visitas subsequentes.

Instalação

Pré-requisitos

• Node.js 18+ ou runtime compatível
• Gerenciador de pacotes npm ou yarn

Configuração de Desenvolvimento

# Instalar dependências
npm install

# Executar servidor de desenvolvimento
npm run dev

# Build para produção
npm run build

# Visualizar build de produção
npm run preview

# Lint e formatação de código
npm run lint

Deploy com Docker

Construir e executar a aplicação usando Docker:

# Construir imagem Docker
./build.sh

# Executar em modo de desenvolvimento
./dev.sh

Estrutura do Projeto

src/
├── assets/          # Arquivos estáticos (imagens, ícones)
├── components/      # Componentes Vue reutilizáveis
│   ├── EmojisView.vue
│   ├── ExternalElement.vue
│   ├── ImageList.vue
│   ├── LoadingSpinner.vue
│   ├── NotificationIcons/
│   ├── NotificationsList.vue
│   ├── ParsedPost.vue
│   ├── SocialPostActions.vue
│   ├── ThemeToggle.vue
│   ├── ToastNotification.vue
│   ├── icons/       # Componentes de ícones SVG
│   │   ├── EmojiIcon.vue
│   │   ├── EyeIcon.vue
│   │   ├── EyeSlashIcon.vue
│   │   ├── FollowIcon.vue
│   │   ├── GifIcon.vue
│   │   ├── HeartIcon.vue
│   │   ├── ImageIcon.vue
│   │   ├── InfoIcon.vue
│   │   ├── MentionIcon.vue
│   │   ├── PostIcon.vue
│   │   ├── ReplyIcon.vue
│   │   └── RepostIcon.vue
│   └── inputs/      # Componentes de entrada de formulário
│       └── Select.vue
├── views/           # Componentes principais de página
│   ├── logged/      # Views autenticadas
│   │   ├── modal/   # Diálogos modais
│   │   │   ├── CreatePostModal.vue
│   │   │   └── CreatePostView.vue
│   │   ├── FeedView.vue
│   │   ├── FollowersView.vue
│   │   ├── FollowingView.vue
│   │   ├── NotificationsView.vue
│   │   ├── PostView.vue
│   │   ├── ProfileView.vue
│   │   ├── RedirectPostView.vue
│   │   ├── TimelineView.vue
│   │   └── UserProfile.vue
│   ├── HomeView.vue
│   ├── LoginView.vue
│   ├── MenuView.vue
│   ├── MigrateView.vue
│   └── RegisterView.vue
├── router/          # Configuração do Vue Router
│   └── index.js
├── stores/          # Stores de gerenciamento de estado Pinia
│   └── auth.js
├── services/        # Camada de serviços API
│   └── atproto.js
├── composables/     # Composables Vue reutilizáveis
│   ├── useCache.js
│   ├── useIndexedDB.js
│   ├── useInstallPrompt.js
│   ├── useOnline.js
│   ├── useProfile.js
│   ├── usePullToRefresh.js
│   ├── useSecureCookie.js
│   ├── useSocialCard.js
│   ├── useTheme.js
│   └── useToast.js
├── utils/           # Funções utilitárias e helpers
│   └── utils.js
├── App.vue          # Componente raiz da aplicação
├── main.js          # Ponto de entrada da aplicação
└── style.css        # Tailwind CSS global com tema personalizado

Autenticação

A aplicação se conecta a um servidor ATProtocol (como Bluesky ou Rede Capivara) usando:

• Identificador: Nome de usuário, handle (@usuario.dominio) ou endereço de e-mail
• Senha: Senha da conta ATProtocol
• Servidor: URL do servidor (padrão: https://redecapivara.social)

As credenciais são armazenadas com segurança no localStorage com validação JWT e atualização automática de token.

Composables

O projeto aproveita a Composition API do Vue 3 com composables personalizados para lógica reutilizável:

• useCache: Gerenciamento de cache local para dados ATProtocol com suporte TTL
• useIndexedDB: Wrapper para IndexedDB para armazenamento persistente no cliente
• useInstallPrompt: Detecção e controle do prompt de instalação PWA
• useOnline: Monitoramento do status de conectividade de rede
• useProfile: Dados e ações de perfil de usuário compartilhados
• usePullToRefresh: Suporte a gesto de puxar para atualizar em dispositivos móveis
• useSecureCookie: Utilitários para manipulação segura de cookies
• useSocialCard: Geração de preview de cartões de mídia social
• useTheme: Gerenciamento de tema claro/escuro com persistência
• useToast: Sistema de notificações toast temporárias

Estilização e Temas

A aplicação usa Tailwind CSS 4 com um tema personalizado definido em src/style.css.

Propriedades CSS Personalizadas

O sistema de temas inclui variáveis CSS personalizadas para os modos claro e escuro:

/* Cores da Marca */
--color-capivara-brown: #7a5c3e
--color-capivara-sky-blue: #4da6ff
--color-capivara-off-white: #f5f5f5
--color-capivara-stone: #78716c
--color-capivara-green-lake: #3dbb84

/* Variáveis de Tema (dinâmicas baseadas no modo claro/escuro) */
--color-bg-primary
--color-bg-secondary
--color-bg-tertiary
--color-text-primary
--color-text-secondary
--color-border
--color-input-bg

Classes Utilitárias Personalizadas

• .btn-primary - Botões de ação primária (verde-lago)
• .btn-secondary - Botões secundários (azul-céu)
• .btn-outline - Botões com contorno marrom
• .btn-no-outline - Botões apenas com texto
• .input-field - Campos de entrada padronizados com suporte a temas
• .card - Componentes de card com sombra e bordas arredondadas

Roteamento

A aplicação inclui a seguinte estrutura de rotas:

Rota	Componente	Autenticação Necessária	Descrição
/login	LoginView	Não	Página de login do usuário
/register	RegisterView	Não	Registro de nova conta
/	HomeView	Sim	Feed principal da timeline
/:handle?/profile	UserProfile	Sim	Visualização de perfil
/notifications	NotificationsView	Sim	Centro de notificações
/:handle?/followers	FollowersView	Sim	Lista de seguidores
/:handle?/following	FollowingView	Sim	Lista de seguindo
/:handle/post/:postId	RedirectPostView	Sim	Visualização individual de post
/migrate	MigrateView	Não	Ferramenta de migração de conta
/logout	-	Não	Logout e redirecionamento

Guards de Navegação

O roteador inclui guards de navegação para:

• Validação automática de JWT e atualização de token
• Redirecionamento de rotas protegidas para usuários não autenticados
• Limpeza de cache no logout
• Persistência de estado de rota

Configuração

Variáveis de Ambiente

Crie um arquivo .env baseado no .env.example:

# Servidor ATProtocol padrão
VITE_DEFAULT_SERVER=https://redecapivara.social

Build de Produção

Build Padrão

npm run build

Arquivos de produção otimizados serão gerados no diretório dist/.

Funcionalidades

Funcionalidade Principal

• Autenticação: Login e registro com ATProtocol
• Timeline: Feed cronológico de posts de usuários seguidos
• Perfis de Usuário: Páginas de perfil detalhadas com bio e estatísticas
• Grafo Social: Listas de seguidores e seguindo com paginação
• Notificações: Sistema de notificação em tempo real para interações
• Detalhe do Post: Visualizações individuais de posts com conversas em thread
• Interações: Ações de curtir, repostar, responder e citar posts
• Suporte a Mídia: Upload de imagens e previews de links externos
• Texto Rico: Parser de posts com @menções, #hashtags e links clicáveis
• Criação de Posts: Compositor de posts baseado em modal com seletor de emoji e upload de mídia

Aplicação Web Progressiva

• Suporte Offline: Indicadores de modo offline e conteúdo em cache
• Notificações Toast: Sistema de feedback do usuário para ações e erros
• Instalável: Pode ser instalada como aplicação standalone
• Ferramentas de Migração: Migração de conta do Bluesky para Rede Capivara
• Design Responsivo: UI adaptável mobile-first para todos os tamanhos de tela
• Performance: Service worker com estratégias de cache inteligentes
• Modo Escuro: Tema escuro completo com transições suaves
• Pull to Refresh: Suporte a gesto mobile para atualização de conteúdo

Estratégias de Cache do Service Worker

A aplicação implementa cache com Workbox usando as seguintes estratégias:

• Páginas: NetworkFirst com expiração de cache de 24 horas
• Imagens: CacheFirst com retenção de 5 dias (100 entradas máximas)
• Imagens Externas: CacheFirst com retenção de 30 dias (200 entradas máximas)
• Chamadas de API: NetworkFirst com cache de 5 minutos e timeout de 10s
• Fontes: CacheFirst com retenção de 1 ano

Instalação PWA

A aplicação pode ser instalada como uma Aplicação Web Progressiva através de:

• Botão de instalação do navegador
• Menu "Adicionar à Tela Inicial" em dispositivos móveis
• Prompt de instalação automático exibido pela aplicação

Recursos PWA

• Service worker para funcionalidade offline
• Manifesto de aplicativo web para instalação
• Ícones otimizados para todas as plataformas (96x96, 128x128, 192x192, 512x512)
• Detecção automática com composable useInstallPrompt
• Mecanismo baseado em prompt para atualizações do service worker
• Cache inteligente com limpeza automática de versões desatualizadas
• Indicador de status online/offline
• Suporte a IndexedDB para armazenamento local persistente

Links Relacionados

• Rede Capivara
• Documentação ATProtocol
• Bluesky Social
• Documentação Vue.js
• Documentação Vite
• Documentação Tailwind CSS
• Documentação Pinia