DS & II

🚀 Capítulo 20: Projeto Final - Millenium Falcon

Leitura de 2 min

🚀 Capítulo 20: Projeto Final - Millenium Falcon

🎯 Objetivo da Aula

Chegou a hora de colocar à prova todo o seu conhecimento da Força! Neste capítulo final, você não terá um exemplo guiado. O seu desafio será construir uma aplicação completa integrando todos os conceitos vistos ao longo do curso.

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

A Aliança Rebelde precisa de um sistema completo de gestão para a frota. Você foi encarregado de construir o Sistema de Comando da Millenium Falcon. Este sistema deve integrar tudo o que vimos!

🛠️ Requisitos do Projeto

Sua aplicação deve conter, no mínimo, as seguintes funcionalidades:

1. Sistema de Rotas (Capítulos 13 e 14)

  • Crie pelo menos 3 páginas (rotas) usando o react-router-dom:
    • /painel: A tela principal com os status da nave.
    • /alistamento: O formulário para cadastrar novos tripulantes.
    • /galaxia: Uma lista de planetas reais.
  • Proteja a rota do /painel ou /galaxia usando o conceito de Rota Protegida (Capítulo 14).

2. Estado Global com Context API (Capítulo 10)

  • Crie um contexto para o Tema (Modo Escuro / Modo Claro) da nave.
  • Todas as páginas devem mudar de cor de fundo quando o tema for alterado.

3. Conexão com API (Capítulo 12)

  • Na rota /galaxia, use o useEffect e o fetch para buscar a lista de planetas da API https://swapi.dev/api/planets/ e exiba-os em uma lista na tela.

4. Formulários Controlados (Capítulo 9)

  • Na rota /alistamento, use o formulário que criamos para capturar o nome e a função do voluntário.

5. Custom Hooks (Capítulo 8)

  • Use o hook useContador (ou crie um novo) para simular o cronômetro de tempo de missão no painel.

🕹️ Como Executar e Validar seu Projeto

  1. Certifique-se de que não há erros no console do navegador.
  2. Teste a navegação e a proteção de rotas.
  3. Teste se o tema muda a cor de fundo de todas as telas.

📤 Instruções de Entrega Final

  1. Garanta que todos os arquivos estão salvos.
  2. Faça o commit final no GitHub Desktop com a mensagem Projeto Final React Concluído.
  3. Dê o Push origin para enviar tudo para o seu GitHub público.
  4. Envie o link do repositório na tarefa do Microsoft Teams correspondente ao Projeto Final.

💡 Mensagem Final

Parabéns, Mestre Jedi do React! Você dominou a Força e agora está pronto para construir interfaces incríveis e profissionais no mercado de trabalho. Que a Força esteja com você em seus próximos projetos! 🌌

← Capitulo Anterior

Visão de gráfico

Backlinks