Sobre   |   Tecnologias   |   Pré requisitos   |   Começando  

🎯 Sobre

Este desafio faz parte da Fase 1 da Pós-Graduação Full Stack da Faculdade de Tecnologia Rocketseat.
O objetivo é desenvolver uma aplicação full stack de encurtador de links, onde o usuário poderá:

• 🔗 Encurtar links;
• 📄 Visualizar os links encurtados;
• ❌ Deletar links;
• 📊 Acompanhar o histórico de acessos de cada link;
• 📁 Gerar relatórios e exportá-los em formato CSV.

Essa aplicação servirá como base prática para consolidar os conhecimentos adquiridos durante o curso, aplicando conceitos de Front-end, Back-end, e DevOps.

(Voltar para o topo)

📋 Requisitos Back-end

• 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.

(Voltar para o topo)

📋 Requisitos Front-end

• Deve ser possível criar um link
  • Não deve ser possível criar um link com encurtamento mal formatado
  • 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.

(Voltar para o topo)

🚀 Tecnologias

As seguintes tecnologias foram usadas na construção do projeto:

• Node.js
• React
• TypeScript
• Vite
• Node.js
• Fastify
• Cloudflare R2
• Drizzle ORM

Outras dependências e ferramentas utilizadas podem ser encontradas no arquivo package.json de cada projeto.

Back-end: package.json

Front-end: package.json

(Voltar para o topo)

⚠️ Pré-requisitos

🐳 Este projeto usa Docker Compose para orquestrar os serviços de back-end e banco de dados. Antes de começar, certifique-se de ter as seguintes ferramentas instaladas na sua máquina:

• Git
• Node.js
• Docker
• pnpm

(Voltar para o topo)

🏁 Começando

⚙️ Back-end

🏠 Executando localmente

⚠️ Utilize o arquivo .env.example como base para criar o arquivo .env em cada projeto.

# Clone o repositórios abaixo
$ git clone https://github.com/geovaneborba/ftr-pos-desafio-brev-ly.git

# Entre na pasta server
$ cd ftr-pos-desafio-brev-ly/server

# Copia o arquivo .env.example para .env e preencha as variáveis de ambiente
$ cp .env.example .env

# Instale as dependências
$ pnpm install

# Execute as migrations
$ pnpm db:migrate

# Execute o projeto
$ pnpm dev

# Caso queira subir apenas o banco de dados (PostgreSQL), execute o seguinte comando:
$ docker compose -f docker-compose-base.yml up -d db

# O serviço estará disponível em http://localhost:3333

(Voltar para o topo)

🐳 Executando com Docker Compose (opcional)

⚠️ Antes de rodar a aplicação, é necessário rodar as migrations do banco de dados. Para isso, comece executando o ambiente de desenvolvimento

Observação:

• O arquivo docker-compose-base.yml define o banco de dados e redes compartilhadas e volumes.
• O arquivo docker-compose-dev.yml adiciona a API em modo desenvolvimento e executa as migrations automaticamente.
• O arquivo docker-compose-prod.yml adiciona a API em modo produção.

🛠️ Ambiente de Desenvolvimento

# Certifique-se de estar na pasta server
cd ftr-pos-desafio-brev-ly/server

# Copie o arquivo de variáveis de ambiente
cp .env.example .env

# Suba os serviços de desenvolvimento (API + banco de dados)
docker compose -f docker-compose-base.yml -f docker-compose-dev.yml up --build -d

• O serviço da API estará disponível em http://localhost:3333.
• O banco de dados estará disponível na porta definida em seu .env

---

🚀 Ambiente de Produção

Para rodar a aplicação em modo produção (build otimizado):

# Certifique-se de estar na pasta server
cd ftr-pos-desafio-brev-ly/server

# Copie o arquivo de variáveis de ambiente
cp .env.example .env

# Remova os serviços de desenvolvimento (API + banco de dados)
docker compose -f docker-compose-base.yml -f docker-compose-dev.yml down

# Suba os serviços de produção (API + banco de dados)
docker compose -f docker-compose-base.yml -f docker-compose-prod.yml up --build -d

• O serviço da API estará disponível em http://localhost:3333.
• O banco de dados estará disponível na porta definida em seu .env

---

(Voltar para o topo)

💻 Front-end

⚠️ Utilize o arquivo .env.example como base para criar o arquivo .env em cada projeto.

# Entra na pasta web e instale as dependências
$ cd ftr-pos-desafio-brev-ly/web

# Instale as dependências
$ pnpm install

# Copia o arquivo .env.example para .env
$ cp .env.example .env

# Execute o projeto
$ pnpm dev

• Acesse o projeto em seu navegador: http://localhost:5173, ou entre pela url exibida no terminal.

(Voltar para o topo)

Feito com ❤️ por Geovane Borba