Do TypeScript ao fullstack: minha jornada na DIO com os projetos Aurora

Concluí a Formação TypeScript Fullstack Developer da DIO, uma trilha com carga anunciada de 44 horas, 17 cursos, quatro desafios de projeto e cinco grupos de desafios de código. O percurso conectou fundamentos de TypeScript, orientação a objetos, desenvolvimento de interfaces com React e construção de APIs com Node.js.

Para dar continuidade às entregas, os quatro projetos receberam uma identidade comum: Aurora. Cada repositório explora uma etapa diferente do desenvolvimento fullstack. Neste artigo, compartilho os conceitos trabalhados, as decisões presentes nas implementações e os resultados que podem ser explorados no portfólio.

Tipagem ajuda a tornar as intenções do código mais claras

O primeiro passo foi relacionar TypeScript à base de JavaScript. Tipar parâmetros, propriedades e retornos ajuda a comunicar o que cada parte do programa espera e devolve. Interfaces e classes também tornam os contratos mais explícitos, especialmente quando o código começa a crescer.

Um ponto importante é distinguir tipagem de validação. Uma entrada de formulário ou uma requisição HTTP continua precisando ser verificada durante a execução. O compilador não garante que dados externos respeitem os tipos declarados, nem detecta toda regra de negócio incorreta.

1. Aurora Bank: regras de negócio e persistência

O desafio de construir uma aplicação bancária simples evoluiu para um painel financeiro demonstrativo com contas pessoais e empresariais, operações simuladas e histórico persistido em SQLite.

A interface oferece busca, filtros, exportação e temas claro e escuro. Na organização do código, as classes representam os tipos de conta e suas regras. O projeto também trabalha com valores monetários em centavos inteiros, evitando depender de arredondamentos de ponto flutuante para cada operação.

A principal conexão desta etapa foi perceber que uma interface precisa refletir regras consistentes: não basta exibir um saldo se as operações não respeitam as condições definidas para cada conta.

Conheça o Aurora Bank no GitHub

https://github.com/EVI-DEV1/dio-aurora-bank

2. Aurora Homepage: componentes e interação com React

No segundo projeto, o foco passou para uma página de apresentação e acesso em React, TypeScript e Chakra UI. A estrutura reúne componentes reutilizáveis, propriedades tipadas, tratamento de eventos e um fluxo de acesso de demonstração.

A identidade Aurora aparece na paleta, na tipografia e nos temas claro e escuro. Além da aparência, os testes verificam comportamentos como o envio do formulário, a recusa de dados incorretos, a visibilidade da senha e a alternância de tema.

Essa entrega reforça a utilidade de componentes com responsabilidades definidas: o formulário, o botão de ação e a função de boas-vindas podem ser compreendidos e verificados separadamente.

Explore a Homepage em React

https://github.com/EVI-DEV1/dio-aurora-home-react

3. Aurora Minha conta: estado compartilhado e armazenamento local

A terceira entrega acrescenta uma página de perfil fictício e um fluxo demonstrativo de acesso com Context API. O projeto restaura os dados locais, permite sair da conta e trata situações como armazenamento inválido, indisponível ou expirado durante a restauração.

Há também exportação do perfil, ocultação de valores e sincronização entre abas. A validação foi desenvolvida com uma etapa de TDD e a suíte final reúne 25 testes aprovados.

Persistir um perfil no navegador melhora a continuidade da demonstração, mas não transforma esse armazenamento em autenticação segura. Essa diferença está documentada no repositório: o projeto não possui um servidor de autenticação.

Experimente a versão publicada no Netlify

https://aurora-account-evi.netlify.app/. Na tela inicial, use o botão “Preencher acesso de demonstração”.

Veja o código de Aurora Minha conta

https://github.com/EVI-DEV1/dio-aurora-account-react

4. Aurora Console: uma API acompanhada de interface

O quarto projeto utiliza Node.js, TypeScript, Express e SQLite para cadastrar, listar e excluir clientes fictícios. Um console responsivo permite operar os registros e consultar os dados cadastrados.

A implementação separa controller, serviço e repositório, com validação de entradas, normalização e unicidade de e-mail, consultas parametrizadas e respostas HTTP coerentes. Os 11 testes aprovados cobrem regras e integração HTTP, incluindo persistência após a reabertura do banco.

Essa separação ajuda a localizar responsabilidades: o controller lida com a requisição e a resposta; o serviço concentra regras; o repositório cuida da persistência. O código está publicado, e o servidor é executado localmente conforme as instruções do README.

Acesse o Aurora Console e a API

https://github.com/EVI-DEV1/dio-aurora-api-node

O que conecta as quatro entregas

Os projetos permitiram trabalhar uma sequência completa de preocupações: representar dados, aplicar regras, construir componentes, compartilhar estado, persistir informações e responder a requisições. Os builds e os testes registrados nos repositórios ajudam a verificar essas entregas, dentro do escopo de cada aplicação.

Também houve atenção aos detalhes de uso: responsividade, contraste, temas, mensagens de erro e estados vazios. Uma tela bonita ganha valor quando suas ações fazem sentido e as limitações da aplicação estão claras.

Os quatro repositórios são demonstrações educacionais independentes. Não há movimentação de dinheiro real, integração com instituições financeiras ou uma conexão bancária entre os projetos. As referências da DIO e de Nathally Souza estão preservadas nos respectivos READMEs.

Próximos passos

A formação deixa uma base para continuar evoluindo o portfólio: aprofundar autorização no servidor, estudar estratégias de implantação de APIs e ampliar os testes dos fluxos. Essas possibilidades são continuidade de estudo, e não funcionalidades já disponíveis nas demonstrações.

Certificado da Formação TypeScript Fullstack Developer

https://hermes.dio.me/certificates/V32NCUXZ.pdf

Você já passou pela experiência de transformar um desafio de curso em um projeto de portfólio? Quais cuidados considera mais importantes nessa evolução? Sugestões sobre os projetos Aurora são bem-vindas.