SocialHub

Rede social full-stack com feed, posts, comentarios, likes, follows, notificacoes e dashboard.

Tech Stack

• Framework: Next.js 14 (App Router) + TypeScript
• Estilizacao: Tailwind CSS + shadcn/ui (Radix UI)
• Banco de Dados: Supabase (PostgreSQL) + Prisma ORM 5
• Autenticacao: Supabase Auth (email/senha + Google OAuth)
• Validacao: Zod v4
• Testes: Vitest + Playwright
• CI/CD: GitHub Actions

Arquitetura

src/
├── app/                    # Pages e API Routes (App Router)
│   ├── api/                # REST API endpoints
│   │   ├── auth/           # Login, registro, callback OAuth
│   │   ├── posts/          # CRUD de posts + likes + comentarios
│   │   ├── users/          # Perfis + follow
│   │   ├── notifications/  # Notificacoes
│   │   ├── search/         # Busca global
│   │   ├── dashboard/      # Metricas
│   │   ├── profile/        # Perfil autenticado
│   │   └── upload/         # Upload de imagens
│   ├── (app)/              # Layout autenticado
│   │   ├── feed/           # Feed principal + seguindo
│   │   ├── dashboard/      # Metricas do usuario
│   │   ├── notifications/  # Lista de notificacoes
│   │   ├── search/         # Busca de usuarios e posts
│   │   ├── profile/        # Perfil proprio
│   │   ├── u/[username]/   # Perfil publico
│   │   ├── post/[id]/      # Post individual
│   │   └── new-post/       # Criar post
│   ├── login/              # Pagina de login
│   └── register/           # Pagina de registro
├── components/             # Componentes React
│   ├── ui/                 # shadcn/ui (Radix UI primitives)
│   └── *.tsx               # Componentes da aplicacao
├── hooks/                  # Custom hooks (auth, infinite scroll)
├── lib/                    # Configuracoes (Prisma, Supabase, env)
├── repositories/           # Data access layer (Repository Pattern)
├── services/               # Business logic layer
├── schemas/                # Validacao Zod (auth, post, comment, user)
├── types/                  # TypeScript types
└── utils/                  # Utilitarios (format, rate-limit, api)

Modelo de Dados

┌──────────┐     ┌──────────┐     ┌──────────┐
│  users   │────<│  posts   │────<│ comments │
│          │     │          │     │          │
│ id       │     │ id       │     │ id       │
│ email    │     │ content  │     │ content  │
│ username │     │ imageUrl │     │ postId   │
│ fullName │     │ authorId │     │ authorId │
│ bio      │     │ createdAt│     │ createdAt│
│ avatarUrl│     └──────────┘     └──────────┘
│ website  │
│ github   │     ┌──────────┐     ┌──────────────┐
│ twitter  │────<│  likes   │     │notifications │
└──────────┘     │          │     │              │
     │           │ postId   │     │ type         │
     │           │ userId   │     │ userId       │
     ▼           └──────────┘     │ actorId      │
┌──────────┐                      │ postId?      │
│ follows  │                      │ read         │
│          │                      └──────────────┘
│followerId│
│followingId│
└──────────┘

Funcionalidades

• Autenticacao: Email/senha e Google OAuth via Supabase Auth
• Feed: Feed global e feed de seguidos com infinite scroll (cursor-based)
• Posts: Criacao com texto (ate 5000 chars) e upload de imagem
• Comentarios: Ate 1000 chars por comentario, paginados
• Likes: Toggle otimista com contagem em tempo real
• Follows: Seguir/deixar de seguir com notificacao automatica
• Notificacoes: FOLLOW, LIKE, COMMENT com marcar como lido
• Busca: Busca de usuarios e posts por texto
• Dashboard: Metricas (total de posts, likes recebidos, seguidores, seguindo)
• Tema: Light/dark mode com next-themes
• Perfis: Perfil proprio e perfis publicos por username
• Upload: Imagens ate 5MB via Supabase Storage

Seguranca

• Row Level Security (RLS) em todas as tabelas do Supabase
• Rate limiting em todos os endpoints da API
• Validacao de input com Zod em todas as rotas
• Sanitizacao de HTML em conteudo de posts/comentarios
• Autenticacao obrigatoria via middleware em rotas protegidas
• CSRF via Supabase Auth cookies (httpOnly, Secure, SameSite)

Comecando

Pre-requisitos

• Node.js 18+
• Conta Supabase (projeto configurado)

Instalacao

# Clonar e instalar
git clone https://github.com/Lucass-devjr/socialhub.git
cd socialhub
npm install

# Configurar variaveis de ambiente
cp .env.example .env.local
# Preencher com suas credenciais Supabase

# Gerar Prisma Client
npx prisma generate

# Executar migrations no Supabase
# Rodar os scripts SQL em supabase/migrations/ no SQL Editor do Supabase

# Iniciar dev server
npm run dev

Scripts

Comando	Descricao
npm run dev	Servidor de desenvolvimento
npm run build	Build de producao
npm run lint	Linting com ESLint
npm run typecheck	Verificacao de tipos
npm run test	Testes unitarios (Vitest)
npm run test:coverage	Testes com cobertura
npm run test:e2e	Testes E2E (Playwright)
npm run format	Formatar codigo (Prettier)

Variaveis de Ambiente

Variavel	Descricao
NEXT_PUBLIC_SUPABASE_URL	URL do projeto Supabase
NEXT_PUBLIC_SUPABASE_ANON_KEY	Chave anonima do Supabase
SUPABASE_SERVICE_ROLE_KEY	Chave de servico (server-side)
DATABASE_URL	Connection string PostgreSQL

Testes

• 34 testes unitarios cobrindo utilitarios, schemas e rate limiting
• 6 testes E2E cobrindo landing page e formularios de autenticacao
• CI/CD via GitHub Actions (lint, typecheck, test, build)

Licenca

MIT