Brev.ly - Encurtador de URLs

Sistema de encurtamento de URLs com backend em TypeScript + Fastify e frontend em React + Vite.

Tecnologias Utilizadas

Backend

• TypeScript - Linguagem principal
• Fastify - Framework web performático
• Drizzle ORM - ORM TypeScript-first
• PostgreSQL - Banco de dados relacional
• Zod - Validação de schemas
• Vitest - Framework de testes
• Swagger/OpenAPI - Documentação da API
• Cloudflare R2 - Storage para arquivos CSV (compatível com S3)

Frontend

• React 18 - Biblioteca UI
• TypeScript - Tipagem estática
• Vite - Build tool moderna
• React Router DOM - Roteamento SPA
• CSS Modules - Estilos com escopo
• Vitest + Testing Library - Testes

Infraestrutura

• Docker & Docker Compose - Containerização
• PostgreSQL - Database
• Nginx - Servidor web para frontend em produção

Pré-requisitos

• Node.js 18.x ou superior
• Docker e Docker Compose
• PostgreSQL (se rodar localmente sem Docker)

Instalação e Configuração

1. Clone o repositório

git clone <repository-url>
cd Brev.ly

2. Configurar variáveis de ambiente

Backend (backend/.env)

cp backend/.env.example backend/.env

Edite o arquivo backend/.env:

PORT=3000
LOG_LEVEL=info
FRONTEND_URL=http://localhost:5173

DATABASE_URL=postgresql://postgres:postgres@localhost:5432/brevly

# Cloudflare R2 Configuration (opcional)
CLOUDFLARE_ACCOUNT_ID=your_account_id
CLOUDFLARE_ACCESS_KEY_ID=your_access_key
CLOUDFLARE_SECRET_ACCESS_KEY=your_secret_key
CLOUDFLARE_BUCKET=your_bucket_name
CLOUDFLARE_PUBLIC_URL=https://your-public-url.r2.dev

Frontend (frontend/.env)

cp frontend/.env.example frontend/.env

Edite o arquivo frontend/.env:

VITE_FRONTEND_URL=http://localhost:5173
VITE_BACKEND_URL=http://localhost:3000

Como Rodar o Projeto

Opção 1: Com Docker

docker-compose up --build

Isso irá:

• Criar e iniciar o container PostgreSQL
• Executar as migrations do banco de dados
• Iniciar o backend na porta 3000
• Iniciar o frontend na porta 5173

Acesse:

• Frontend: http://localhost:5173
• Backend API: http://localhost:3000
• API Docs (Swagger): http://localhost:3000/docs
• Health Check: http://localhost:3000/health

Para parar os containers:

docker-compose down

Opção 2: Localmente

1. Instalar dependências

# Backend
cd backend
npm install

# Frontend
cd ../frontend
npm install

2. Configurar PostgreSQL

Certifique-se de que o PostgreSQL está rodando e crie o banco de dados:

CREATE DATABASE brevly;

3. Executar migrations

cd backend
npm run db:migrate

4. Iniciar o backend

cd backend
npm run dev

O backend estará disponível em http://localhost:3000

5. Iniciar o frontend (em outro terminal)

cd frontend
npm run dev

O frontend estará disponível em http://localhost:5173

Scripts Disponíveis

Backend

npm run dev          # Inicia servidor em modo desenvolvimento
npm run build        # Compila o projeto
npm start            # Inicia servidor de produção
npm run db:generate  # Gera migrations do Drizzle
npm run db:migrate   # Executa migrations no banco
npm run db:studio    # Abre Drizzle Studio (GUI do banco)
npm test             # Executa testes
npm run test:watch   # Executa testes em modo watch
npm run test:coverage # Gera relatório de cobertura de testes

Frontend

npm run dev          # Inicia dev server
npm run build        # Build para produção
npm run preview      # Preview do build de produção
npm test             # Executa testes
npm run test:watch   # Executa testes em modo watch
npm run test:coverage # Gera relatório de cobertura de testes

Testes

Backend

cd backend

# Rodar todos os testes
npm test

# Modo watch
npm run test:watch

# Com cobertura
npm run test:coverage

Frontend

cd frontend

# Rodar todos os testes
npm test

# Modo watch
npm run test:watch

# Com cobertura
npm run test:coverage

Regras de negócio do bakend

• Deve ser possível criar um link
  • Não deve ser possível criar um link com URL encurtada mal formatada
  • Não deve ser possível criar um link com URL encurtada já existente
• Deve ser possível deletar um link
• Deve ser possível obter a URL original por meio de uma URL encurtada
• Deve ser possível listar todas as URL’s cadastradas
• Deve ser possível incrementar a quantidade de acessos de um link
• Deve ser possível exportar os links criados em um CSV
  • Deve ser possível acessar o CSV por meio de uma CDN (Amazon S3, Cloudflare R2, etc)
  • Deve ser gerado um nome aleatório e único para o arquivo
  • Deve ser possível realizar a listagem de forma performática
  • O CSV deve ter campos como, URL original, URL encurtada, contagem de acessos e data de criação.

Regras de negócio frontend

• Deve ser possível criar um link - [x] Não deve ser possível criar um link com encurtamento mal formatado - [x] Não deve ser possível criar um link com encurtamento já existente
• Deve ser possível deletar um link
• Deve ser possível obter a URL original por meio do encurtamento
• Deve ser possível listar todas as URL’s cadastradas
• Deve ser possível incrementar a quantidade de acessos de um link
• Deve ser possível baixar um CSV com o relatório dos links criados

Além disso, também temos algumas regras importantes específicas para o front-end:

• É obrigatória a criação de uma aplicação React no formato SPA utilizando o Vite como bundler;
• [] Siga o mais fielmente possível o layout do Figma;
• Trabalhe com elementos que tragam uma boa experiência ao usuário (empty state, ícones de carregamento, bloqueio de ações a depender do estado da aplicação);
• Foco na responsividade: essa aplicação deve ter um bom uso tanto em desktops quanto em celulares.