Uma rede social completa para desenvolvedores, designers e estudantes

📋 Sobre o Projeto

SocialDev é uma plataforma social completa projetada especialmente para a comunidade de desenvolvedores. Com funcionalidades modernas e uma interface intuitiva, oferece tudo que você precisa para conectar, compartilhar e crescer profissionalmente.

✨ Funcionalidades Principais

• 📝 Feed de Posts - Publique conteúdo e interaja com a comunidade
• 💬 Sistema de Comentários - Discussões enriquecedoras em cada post
• ❤️ Curtidas Inteligentes - Sistema de engajamento otimizado
• 👥 Conexões Sociais - Siga outros desenvolvedores e construa sua rede
• 💌 Mensagens em Tempo Real - Chat privado com notificações instantâneas
• 🔔 Central de Notificações - Mantenha-se atualizado com todas as interações
• 🔍 Busca de Usuários - Encontre e conecte com outros profissionais
• 🎨 Interface Responsiva - Experiência perfeita em qualquer dispositivo
• 🆘 Central de Ajuda Completa - Suporte abrangente com canais de comunicação e envio de email

🚀 Tecnologias e Arquitetura

Frontend

• React 18.2 com TypeScript para desenvolvimento type-safe
• Chakra UI para componentes e design system consistente
• Custom Hooks para lógica reutilizável e estado global
• Responsive Design com breakpoints otimizados

Backend e Infraestrutura

• Supabase como Backend-as-a-Service completo
• PostgreSQL com Row Level Security (RLS)
• Real-time subscriptions para atualizações instantâneas
• Authentication com JWT e gestão de sessões

Recursos Avançados

• Otimistic Updates para melhor UX
• Loading States e feedback visual
• Error Handling robusto
• Performance Optimization com lazy loading
• Accessibility (ARIA labels, keyboard navigation)

🛠️ Configuração do Ambiente

Pré-requisitos

• Node.js 16+
• npm ou yarn
• Conta no Supabase

Instalação

# Clone o repositório
git clone https://github.com/estevam5s/social-dev.git

# Entre no diretório
cd social-dev

# Instale as dependências
npm install
# ou
yarn install

# Configure as variáveis de ambiente
cp .env.example .env.local

Configuração do Banco de Dados

1. Execute o script de configuração completa no Supabase SQL Editor:

-- Execute database/complete-setup.sql
-- Este script cria todas as tabelas, índices e políticas RLS

Estrutura do Banco de Dados

users                    # Perfis dos usuários
├── posts               # Publicações
│   ├── post_likes      # Curtidas em posts
│   └── comments        # Comentários
│       └── comment_likes # Curtidas em comentários
├── connections         # Sistema de seguir/seguidores
├── conversations       # Conversas privadas
│   ├── conversation_participants # Participantes das conversas
│   └── messages        # Mensagens
└── notifications       # Central de notificações

Executar a Aplicação

# Desenvolvimento
npm run dev
# ou
yarn dev

# Build para produção
npm run build
# ou
yarn build

📱 Funcionalidades Detalhadas

🏠 Feed Principal

• Posts em tempo real com atualizações automáticas
• Sistema de curtidas com feedback visual
• Comentários aninhados e interativos
• Botões de ação rápida (curtir, comentar, seguir)

👨‍💻 Sistema de Conexões

• Busca inteligente de usuários
• Sistema de seguir/parar de seguir
• Lista de conexões organizada
• Sugestões de novos contatos

💬 Mensagens

• Chat em tempo real
• Criação automática de conversas
• Indicadores de mensagens não lidas
• Interface responsiva para mobile e desktop

🔔 Notificações

• Notificações de curtidas, comentários e novos seguidores
• Central organizada por tipo
• Marcação de lidas/não lidas
• Limpeza automática de notificações antigas

🆘 Central de Ajuda

• Visão geral da plataforma com estatísticas em tempo real
• FAQ interativo com categorização e busca
• Canais de comunicação (LinkedIn, GitHub, Discord, Gmail, WhatsApp)
• Formulário de contato com integração EmailJS
• Interface elegante com animações e design responsivo
• Envio de emails para suporte técnico e feedback

🏗️ Arquitetura do Projeto

src/
├── components/          # Componentes reutilizáveis
│   ├── Posts/          # Componentes relacionados a posts
│   ├── Messages/       # Sistema de mensagens
│   ├── Connections/    # Gestão de conexões
│   └── Notifications/  # Central de notificações
├── hooks/              # Custom hooks
│   ├── useAuth.ts     # Autenticação
│   ├── useFeed.ts     # Feed de posts
│   ├── useMessages.ts # Sistema de mensagens
│   ├── useConnections.ts # Conexões sociais
│   └── useNotifications.ts # Notificações
├── contexts/           # Contextos React
├── services/           # Configuração de serviços externos
├── pages/             # Páginas da aplicação
└── database/          # Scripts SQL de configuração

🔧 Scripts de Banco de Dados

Scripts Principais

• complete-rebuild.sql - Configuração completa do zero
• fix-missing-user.sql - Correção de usuários faltantes
• fix-welcome-loop.sql - Correção do modal de boas-vindas

Funcionalidades do Banco

• Row Level Security para segurança de dados
• Triggers automáticos para timestamps
• Índices otimizados para performance
• Funções utilitárias para contadores e validações

🚀 Deploy e Produção

Variáveis de Ambiente Necessárias

REACT_APP_SUPABASE_URL=sua_url_supabase
REACT_APP_SUPABASE_ANON_KEY=sua_chave_anonima

Plataformas Recomendadas

• Vercel (recomendado para React)
• Netlify
• AWS Amplify

🤝 Contribuindo

1. Fork o projeto
2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add: Amazing Feature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

Padrões de Commit

• Add: Nova funcionalidade
• Fix: Correção de bug
• Update: Melhoria de funcionalidade existente
• Refactor: Refatoração de código
• Docs: Documentação

📈 Roadmap

✅ Funcionalidades Concluídas

• ✅ Sistema completo de posts, curtidas e comentários
• ✅ Chat em tempo real com conversas privadas
• ✅ Sistema de conexões (seguir/seguidores)
• ✅ Central de notificações completa
• ✅ Busca e descoberta de usuários
• ✅ Interface responsiva e acessível

🔄 Em Desenvolvimento

• 🔄 Sistema de posts salvos/favoritos
• 🔄 Gamificação e estatísticas da plataforma
• 🔄 Feed de notícias e conteúdo externo
• 🔄 Temas personalizáveis (dark/light mode)

🎯 Próximas Features

• 📸 Upload de imagens em posts e perfil
• 🔗 Sistema de compartilhamento externo
• 📊 Dashboard de analytics pessoal
• 🏆 Sistema de conquistas e badges
• 🌍 Internacionalização (i18n)

📄 Licença

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

👨‍💻 Desenvolvido por

LTD - Estacio

• 📧 Email: contato@estevamsouza.com.br
• 💼 LinkedIn: estevam-souza
• 🐙 GitHub: @estevam5s

---

Feito com 🧡 e muito ☕ por desenvolvedores, para desenvolvedores

⭐ Se este projeto te ajudou, considere dar uma estrela!