DS & II

Capítulo 20 - Projeto Final P2

Leitura de 4 min

🚀 Capítulo 20: Projeto Final Parte 2: A Dança dos Dragões (Tema: Game of Thrones)

NOTE

Este é o capítulo final do curso de Projetos Full Stack! Parabéns por chegar até aqui. Agora os dragões estão no ar e vamos colocar o nosso projeto no campo de batalha real!

1. 🎯 Objetivo da Aula

Consolidar todos os conhecimentos adquiridos ao longo do curso, executando a integração das camadas do projeto final, realizando o deploy na nuvem e compreendendo o papel do desenvolvedor Full Stack de ponta a ponta.

2. 🏢 O Cenário Prático (Seu Desafio)

No capítulo anterior, você planejou a estratégia da sua batalha ao redor da mesa de pedra. Agora, os portões se abriram, os dragões estão no ar e a batalha começou! É a “Dança dos Dragões”, o momento em que toda a estratégia teórica é colocada à prova na prática real do campo de batalha!

Você vai executar o seu plano e construir o aplicativo Full Stack do seu portfólio.

  • Você vai criar os arquivos do Frontend.
  • Vai programar as rotas do Backend.
  • Vai conectar o banco de dados e enviar tudo para a nuvem! Como um verdadeiro mestre das três camadas, você vai liderar o ataque! Seu desafio final é conquistar o Trono de Ferro do desenvolvimento!

🧠 Fundamentos: A Teoria Traduzida

Para garantir a vitória na batalha final, siga o checklist de execução de um projeto Full Stack:

📝 Checklist de Execução:

  1. Construa a Base (Banco de Dados): Crie o seu banco de dados na nuvem (usando o Supabase) e rode o arquivo de schema para criar as tabelas.
  2. Ligue as Máquinas (Backend): Escreva o código do seu servidor Express, crie as rotas GET e POST e use o Prisma para conectar ao banco de dados que você criou no passo .
  3. Abra os Portais (Frontend): Crie as telas do seu site e use o comando fetch apontando para a URL do seu servidor para buscar e enviar dados.
  4. Lançamento (Deploy): Envie o código do frontend para a Vercel e o código do backend para a Render.

4. 📖 Exemplo Guiado: O Checklist do Mestre Full Stack

Antes de considerar a sua jornada concluída e clamar o trono, garanta que você sabe responder a essas perguntas essenciais:

  1. Como o frontend conversa com o backend? (Através de requisições HTTP usando fetch).
  2. Como o backend conversa com o banco de dados? (Através de um ORM como o Prisma).
  3. Como garantir que o app rode igual em qualquer computador? (Usando Docker).
  4. Onde o usuário vê o site? (No Client-side / Navegador).
  5. Onde as senhas são validadas? (No Server-side / Servidor).

5. 🛠️ Prática Obrigatória: Resolução de Conflitos

Durante a “Dança dos Dragões”, imprevistos acontecem. Como você resolveria os seguintes problemas clássicos de um projeto Full Stack?

  1. Problema A: O seu Frontend está pronto na Vercel e o Backend na Render. Mas quando o usuário tenta fazer login, o console do navegador mostra um erro de CORS bloqueando a requisição.
  2. Problema B: Você atualizou o código do backend no seu computador e salvou no GitHub. Mas o site que está no ar na Render continua com a versão antiga, sem as modificações.

7. 📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo 20 FS_ProjetoFinal) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.

8. 📂 Estrutura de Pastas

proj_aplicacoes_full_stack/
├── capitulos/
    └── capitulo_20_game_of_thrones_p2.md

💡 Checkpoint de Lógica

Parabéns por concluir o curso de Projetos Full Stack! Você agora possui uma visão holística (completa) de como a internet funciona. Mesmo que no futuro você decida se especializar apenas em Frontend ou apenas em Backend, saber como as outras camadas funcionam te tornará um profissional infinitamente melhor e mais disputado pelo mercado!

10. 🔥 Desafio de Fixação

Termine a construção do seu projeto final, faça o deploy de todas as partes e mande o link do site funcionando para os seus amigos e familiares testarem!

🔑 Gabarito de Código/Fórmulas

Gabarito da Prática Obrigatória:

  1. Ativar o CORS no Backend. No seu código do Express, você deve instalar e usar o middleware cors (digitando app.use(cors())), autorizando que domínios externos (como o da Vercel) façam requisições para a sua API na Render.
  2. Verificar o Deploy Automático. Você deve acessar o painel da plataforma Render e verificar se ela está configurada para fazer o “Auto-Deploy” sempre que houver um novo push na branch main do seu GitHub. Se não estiver, você deve clicar no botão de deploy manual!

← Capitulo Anterior

Visão de gráfico

Backlinks