Aula 16 - Projeto Final 🏆

Objetivo

Objetivo: Aplicar TODO o conhecimento adquirido (Reatividade, Componentes, Stores, Roteamento e APIs) para construir uma aplicação web robusta, funcional e profissional utilizando Svelte.

1. O Desafio: "Svelte Connect" 🚀

Chegou a hora de consolidar seu aprendizado. Você deve escolher um dos temas abaixo para desenvolver sua aplicação final:

📑 Sistema de Tarefas (Task Manager)

Funcionalidades: Login, criar categorias, adicionar/remover tarefas, marcar como concluído e salvar tudo em uma API.

📊 Dashboard Administrativo

Funcionalidades: Visualização de métricas (gráficos), listagem de usuários de uma API, edição de perfis e controle de tema (Dark Mode).

🛒 Pequeno E-commerce

Funcionalidades: Catálogo de produtos vindo de API, filtro por categoria, carrinho de compras (Store) e resumo do pedido.

2. Mapa Mental do Curso (Mermaid) 📊

mindmap
  root((Svelte Master))
    Fundamentos
      Compilação
      Sintaxe .svelte
      Reatividade
    UI e Componentes
      Props
      Slots
      Eventos e Binding
      Estilo Escopado
    Ecossistema
      Roteamento SPA
      Svelte Stores
      Fetch API
    Produção
      Arquitetura
      Build e Otimização
      Deploy

3. Requisitos Obrigatórios 📋

Seu projeto deve conter pelo menos: - [ ] Componentização: Mínimo de 5 componentes reutilizáveis. - [ ] Reatividade: Uso de declarações reativas ($:) e binding de formulários. - [ ] Estado Global: Pelo menos uma Svelte Store (ex: Carrinho ou Perfil do Usuário). - [ ] Consumo de API: Realizar pelo menos uma operação de GET e uma de POST/PUT/DELETE. - [ ] Roteamento: Uso de roteador SPA com pelo menos 3 rotas diferentes. - [ ] Estilização: Uso correto de escopo de CSS e um layout responsivo (mobile-friendly).

4. Dicas para Excelência ✨

UX/UI: Use o que você aprendeu em Design para criar algo "limpo" e atraente.
Tratamento de Erros: Se a API falhar, não deixe a tela em branco! Mostre uma mensagem amigável para o usuário.
README: Capriche na documentação do projeto no GitHub.
Performance: Verifique no onDestroy se você limpou todos os recursos necessários.

5. Conclusão da Jornada 🎓

<div id="termynal" data-termynal>
    <span data-ty="input"># Finalizando o curso de Svelte...</span>
    <span data-ty="progress"></span>
    <span data-ty>✔ Módulo de Fundamentos Concluído</span>
    <span data-ty>✔ Módulo de Arquitetura Concluído</span>
    <span data-ty>✔ Projeto Final Publicado</span>
    <span data-ty>🚀 Parabéns, Desenvolvedor Svelte!</span>
</div>

6. Onde continuar? 📚

O Svelte é uma porta de entrada. Para os próximos passos, recomendamos: 1. SvelteKit: O framework Full-Stack oficial para aplicações de grande escala. 2. TypeScript: Para adicionar tipagem e segurança ao seu código. 3. Tailwind CSS: Para uma estilização rápida e moderna.

Mensagem Final

Dominar o Svelte é entender que o navegador deve trabalhar menos para o usuário ver mais. Continue praticando e construindo interfaces incríveis!

FIM DO CURSO 🚀🚀🚀 Desejamos muito sucesso na sua jornada como Desenvolvedor Frontend!