Uma rede social para desenvolvedores compartilharem conhecimento técnico através de posts em markdown, com sistema de likes, comentários com replies, reposts com quote e feed com busca full-text.
O Code Connect é uma plataforma onde programadores podem publicar conteúdo técnico (tutoriais, dicas, code snippets) usando markdown, interagir com publicações de outros devs através de curtidas, comentários e reposts, e descobrir conteúdo relevante via busca integrada.
Este projeto foi desenvolvido como projeto final do curso Engenharia de Software na Era da IA da Alura.
O projeto utiliza um arquivo .agents/AGENTS.md como referência de contexto para os agentes de IA durante o desenvolvimento. Esse arquivo funciona como um "manual de instruções" que os assistentes (Antigravity, Kiro) consultam para manter consistência nas decisões de código.
- Estrutura do monorepo — descrição dos workspaces (
apps/apieapps/web) e suas tecnologias - Convenção de commits — Conventional Commits como padrão obrigatório (
feat,fix,docs,refactor, etc.) - Frontend: Atomic Design — regras claras sobre como organizar componentes em Atoms, Molecules, Organisms, Templates e Pages
- Frontend: Design Tokens — paleta de cores semântica (brand, surface, input) definida via
@themeno Tailwind v4, com proibição de valores hex hardcoded - Frontend: Sizing — preferência por tokens padrão do Tailwind ao invés de valores arbitrários em brackets
- Frontend: Testes — cobertura obrigatória de 100% para componentes (renderização, interações, acessibilidade)
- Backend: REST — URIs orientados a recursos, verbos HTTP com semântica correta, status codes padronizados
- Backend: Validação — DTOs com class-validator, separação clara entre controller (HTTP) e service (lógica)
- Comandos de desenvolvimento — referência rápida para scripts do monorepo
Essas diretrizes garantem que o código gerado pela IA segue os mesmos padrões que um time humano seguiria. Sem elas, cada prompt poderia gerar código em estilos diferentes, com convenções conflitantes. O arquivo age como um "linting semântico" — não impõe regras no código final, mas guia a geração para que o resultado já nasça alinhado com a arquitetura do projeto.
Todo o desenvolvimento foi assistido por ferramentas de inteligência artificial, incluindo:
- Geração e automação de código — scaffolding de componentes, entities, migrations e endpoints
- Testes — geração automatizada de testes unitários e de integração
- Refatoração — melhorias de performance, tipagem e organização do código
- Arquitetura e modelagem — design de banco de dados, definição de APIs REST e estruturação de componentes frontend
As ferramentas de IA utilizadas durante o desenvolvimento foram:
- Antigravity IDE — utilizado na fase inicial do projeto
- Kiro — utilizado nas fases subsequentes de desenvolvimento e evolução
- NestJS 11 — framework Node.js com injeção de dependência e decorators
- TypeORM 0.3 — ORM com migrations versionadas
- PostgreSQL 16 — banco de dados relacional
- JWT — autenticação stateless com tokens
- class-validator — validação de DTOs
- Swagger — documentação automática da API
- React 19 — biblioteca de UI
- Vite 8 — bundler e dev server
- Tailwind CSS v4 — estilização utility-first
- React Router v7 — roteamento SPA
- Axios — cliente HTTP
- react-markdown — renderização de markdown
- lucide-react — ícones
- Vitest — framework de testes
- Docker Compose — containerização do PostgreSQL
- pnpm — gerenciador de pacotes com workspace monorepo
code-connect/
├── apps/
│ ├── api/ # Backend NestJS
│ │ ├── src/
│ │ │ ├── auth/ # Autenticação JWT
│ │ │ ├── users/ # Módulo de usuários
│ │ │ ├── posts/ # Posts, comments, likes, reposts, tags
│ │ │ ├── migrations/ # Migrations do TypeORM
│ │ │ └── seeds/ # Script de seed com dados mock
│ │ └── test/ # Testes e2e
│ └── web/ # Frontend React
│ └── src/
│ ├── components/ # Atomic Design (atoms, molecules, organisms, templates, pages)
│ ├── contexts/ # AuthContext
│ ├── hooks/ # Custom hooks (useAuth, usePosts, useLike, useComments)
│ ├── services/ # Camada de serviços (API calls)
│ ├── types/ # Interfaces TypeScript
│ └── utils/ # Utilitários (formatação de datas)
├── docker-compose.yml
├── pnpm-workspace.yaml
└── .env.example
O frontend segue o padrão Atomic Design para organização de componentes:
- Atoms: Button, Input, Checkbox, Divider, Avatar, Badge, Thumbnail, Skeleton
- Molecules: FormField, SocialButton, PostMeta, PostActions, SearchBar, CommentItem, TagInput, RepostModal
- Organisms: Sidebar, LoginForm, SignUpForm, PostCard, FeedList, CommentSection
- Templates: AuthTemplate, AppLayout
- Pages: LoginPage, SignUpPage, FeedPage, PostDetailPage, CreatePostPage
git clone https://github.com/seu-usuario/code-connect.git
cd code-connectpnpm installcp .env.example .envEdite o .env conforme necessário. Os valores padrão funcionam com o Docker Compose incluído:
DATABASE_URL=postgresql://codeconnect:codeconnect@localhost:5433/codeconnect
JWT_SECRET=your-super-secret-key-here
JWT_EXPIRES_IN=1h
PORT=3000docker compose up -dpnpm --filter api migration:runpnpm --filter api seedIsso cria 5 usuários, 15 tags, 12 posts com conteúdo markdown, comentários, likes e reposts.
Credenciais dos usuários do seed: email no formato nome@codeconnect.dev, senha senha123.
pnpm dev:apiO servidor estará disponível em http://localhost:3000.
Em outro terminal:
pnpm dev:webO app estará disponível em http://localhost:5173.
| Comando | Descrição |
|---|---|
pnpm dev:api |
Inicia o backend em modo watch |
pnpm dev:web |
Inicia o frontend em modo dev |
pnpm build |
Build de produção (api + web) |
pnpm lint |
Linting em todos os packages |
pnpm test:api |
Testes do backend |
pnpm --filter api migration:generate src/migrations/NomeDaMigration |
Gera nova migration |
pnpm --filter api migration:run |
Aplica migrations pendentes |
pnpm --filter api migration:revert |
Reverte última migration |
pnpm --filter api seed |
Popula o banco com dados mock |
| Método | Rota | Auth | Descrição |
|---|---|---|---|
| GET | /posts |
Opcional | Listar posts (cursor pagination + search) |
| GET | /posts/:id |
Opcional | Detalhes do post |
| POST | /posts |
Obrigatório | Criar post |
| POST | /posts/:id/likes |
Obrigatório | Curtir post |
| DELETE | /posts/:id/likes |
Obrigatório | Descurtir post |
| GET | /posts/:id/comments |
Opcional | Listar comentários |
| POST | /posts/:id/comments |
Obrigatório | Criar comentário |
| POST | /posts/:id/reposts |
Obrigatório | Repostar com quote |
| GET | /tags |
Público | Listar tags (autocomplete) |
| POST | /users |
Público | Criar usuário |
| POST | /auth/login |
Público | Login (retorna JWT) |
| GET | /auth/me |
Obrigatório | Dados do usuário logado |
- Feed de posts com infinite scroll e cursor-based pagination
- Busca full-text por título e conteúdo
- Criação de posts com conteúdo markdown, thumbnail e tags
- Renderização completa de markdown (headings, code blocks, tabelas, listas)
- Sistema de likes com toggle
- Comentários com 1 nível de reply
- Reposts com quote text
- Autenticação JWT com signup/login
- Feed público (visualização sem login)
- Ações protegidas (like, comment, repost exigem autenticação)
- Sidebar com navegação e estado condicional (Login/Sair)
- Layout responsivo (sidebar colapsável em mobile)
- Tags com autocomplete e criação de novas
- Skeleton loading states
- Acessibilidade (skip link, landmarks, aria-labels)
Este projeto foi desenvolvido para fins educacionais como parte do curso da Alura.