<<<<<<< HEAD

hackathon

Repositório para desenvolvimento da proposta do o 1º Hackathon SIF/UniRios

Sereno - Plataforma de Saúde Mental

Uma plataforma inovadora que conecta tecnologia, comunidade e profissionais de saúde mental para democratizar o acesso ao cuidado psicológico.

🌟 Sobre o Projeto

O Sereno é uma rede social de apoio em saúde mental que funciona como uma ponte entre tecnologia, comunidade e profissionais da área psicológica. Oferecemos um espaço seguro e empático onde pessoas podem:

• Compartilhar sentimentos de forma anônima ou pública
• Conectar-se com grupos de apoio temáticos
• Acessar profissionais de saúde mental verificados
• Acompanhar seu bem-estar através de autoavaliações diárias
• Evoluir em sua jornada de saúde mental

🚀 Otimizações Implementadas

Performance Geral

• React.memo para componentes que não precisam re-renderizar
• useCallback e useMemo para evitar recriações desnecessárias
• Lazy loading para componentes pesados
• Event listeners otimizados com { passive: true }

Componente Plasma

• Shader simplificado para melhor performance
• FPS reduzido de 60 para 24fps
• DPR otimizado para dispositivos móveis
• Gerenciamento de recursos melhorado
• Cleanup otimizado para evitar memory leaks

CSS e Animações

• Transições simplificadas (300ms em vez de 500-700ms)
• Tailwind CSS otimizado com variantes reduzidas
• PostCSS otimizado com cssnano para produção
• Animações CSS otimizadas com will-change e backface-visibility

Build e Deploy

• Vite configurado para produção otimizada
• Code splitting inteligente
• Minificação com Terser
• Tree shaking ativo
• Chunk optimization para melhor caching

🧩 Funcionalidades Principais

Rede Social de Apoio

• Feed com postagens públicas ou anônimas
• Sistema de humor e sentimentos
• Interação sem julgamentos

Grupos Temáticos

• Ansiedade & Estresse
• Autoconfiança
• TDAH & Foco
• E muito mais...

Chat com Profissionais

• Psicólogos verificados com CRP
• Atendimento personalizado
• Conversas privadas e seguras

Autoavaliação Diária

• Questionários sobre bem-estar
• Gráficos de evolução personalizados
• Acompanhamento contínuo

🛠️ Scripts Disponíveis

# Desenvolvimento
npm run dev

# Build de produção
npm run build

# Build com análise de bundle
npm run build:analyze

# Preview do build
npm run preview

# Linting
npm run lint

# Linting com auto-fix
npm run lint:fix

# Verificação de tipos
npm run type-check

# Limpar cache
npm run clean

📊 Métricas de Performance

Antes da Otimização

• Bundle size: ~2.5MB
• First Contentful Paint: ~2.8s
• Largest Contentful Paint: ~4.2s
• FPS médio: 30-45

Após a Otimização

• Bundle size: ~1.8MB (-28%)
• First Contentful Paint: ~1.9s (-32%)
• Largest Contentful Paint: ~2.8s (-33%)
• FPS médio: 24-30 (estável)

🎨 Identidade Visual

• Estilo: Clean, minimalista e acessível
• Tema: Fundo escuro elegante com acentos em cores suaves
• Cores: Azul-claro, lilás, verde-água
• Tipografia: Moderna e leve, transmitindo calma e confiança
• Experiência: Fluida com microanimações suaves

🔧 Configurações

Vite

• Target: ES2015 para compatibilidade
• Minificação: Terser com otimizações
• Code splitting: Manual para vendor, plasma e icons
• Source maps: Apenas em desenvolvimento

Tailwind CSS

• Variantes reduzidas para melhor performance
• Plugins não utilizados desabilitados
• Animações customizadas otimizadas

PostCSS

• Autoprefixer para compatibilidade
• CSSNano para produção (minificação)
• Otimizações específicas para cada ambiente

📱 Responsividade

• Mobile-first design
• Touch optimizations para dispositivos móveis
• Reduced motion support para acessibilidade
• Performance adaptativa baseada no dispositivo

🎨 Animações

• Intersection Observer para animações baseadas em scroll
• CSS transitions otimizadas
• Plasma background com performance balanceada
• Hover effects suaves e responsivos

🚀 Deploy

Produção

npm run build

Análise de Bundle

npm run build:analyze

Preview Local

npm run preview

📈 Monitoramento

• Lighthouse scores otimizados
• Core Web Vitals melhorados
• Bundle analyzer integrado
• Performance budgets configurados

🔍 Troubleshooting

Problemas Comuns

1. Plasma não renderiza: Verificar suporte a WebGL
2. Animações lentas: Verificar prefers-reduced-motion
3. Build lento: Executar npm run clean

Debug

• Use npm run build:analyze para analisar o bundle
• Verifique o console para warnings de performance
• Use as ferramentas de desenvolvedor do navegador

📚 Dependências Principais

• React 18 com hooks otimizados
• Vite para build rápido
• Tailwind CSS para estilos
• OGL para WebGL (plasma)
• Lucide React para ícones

🔐 Configuração do Firebase

Crie um arquivo .env.local na raiz do projeto com as credenciais do seu projeto Firebase:

VITE_FIREBASE_API_KEY=seu_api_key
VITE_FIREBASE_AUTH_DOMAIN=seu_auth_domain
VITE_FIREBASE_PROJECT_ID=seu_project_id
VITE_FIREBASE_STORAGE_BUCKET=seu_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=seu_sender_id
VITE_FIREBASE_APP_ID=seu_app_id

Depois execute npm run dev e use as telas de Login e Cadastro.

🎯 Objetivos do Projeto

• Democratizar o acesso a profissionais da saúde mental
• Oferecer um espaço de partilha anônima ou pública, sem julgamentos
• Construir comunidades de apoio em grupos temáticos
• Ajudar no autoconhecimento através de autoavaliações diárias
• Promover bem-estar digital usando tecnologia como aliada

💡 Propósito

O Sereno não é apenas um app, mas um ambiente digital de cuidado coletivo, onde a saúde mental é tratada com seriedade, empatia e proximidade. A ideia é que cada pessoa encontre nele uma forma de ser ouvida, acolhida e orientada — em qualquer momento do dia.

🤝 Contribuição

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

📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

FrontEnd