Uma aplicação web interativa para ensinar TypeScript a desenvolvedores que já conhecem JavaScript
Esta aplicação foi desenvolvida para acelerar a transição de desenvolvedores JavaScript para TypeScript através de uma experiência de aprendizado estruturada e prática. A plataforma oferece lições progressivas, exercícios práticos e exemplos comparativos entre JavaScript e TypeScript.
Facilitar o aprendizado de TypeScript para desenvolvedores que já possuem conhecimento em JavaScript, fornecendo:
- Lições interativas organizadas por dificuldade
- Exercícios práticos com feedback instantâneo
- Comparações lado a lado entre JavaScript e TypeScript
- Sistema de progresso personalizado
- Interface moderna e responsiva
- 🏠 Página Inicial: Visão geral da aplicação e módulos de aprendizado
- 📖 Lições: Conteúdo organizado em três níveis (Básico, Intermediário, Avançado)
- 💻 Exercícios: Editor de código interativo com validação em tempo real
- 📑 Referência: Documentação rápida, cheat sheet e glossário de tipos
- ✅ Lições Interativas: Conteúdo progressivo com exemplos práticos
- ✅ Editor de Código: Syntax highlighting e autocomplete
- ✅ Comparações JS vs TS: Visualização lado a lado das diferenças
- ✅ Sistema de Progresso: Acompanhamento local do aprendizado
- ✅ Interface Responsiva: Otimizada para desktop e mobile
- ✅ Navegação Intuitiva: UX moderna e acessível
- Next.js 15 - Framework React com SSR
- TypeScript - Superset tipado do JavaScript
- Tailwind CSS - Framework CSS utilitário
- shadcn/ui - Componentes UI modernos
- Lucide React - Ícones SVG
- Zustand - Gerenciamento de estado
- LocalStorage - Persistência do progresso do usuário
- Node.js 18+
- pnpm (recomendado) ou npm
- Clone o repositório
git clone https://github.com/AyrtonMedrano/learning-typescript.git
cd learning-typescript- Instale as dependências
pnpm install
# ou
npm install- Execute o servidor de desenvolvimento
pnpm dev
# ou
npm run dev- Abra no navegador
http://localhost:3000
pnpm dev # Inicia o servidor de desenvolvimento
pnpm build # Gera build de produção
pnpm start # Inicia servidor de produção
pnpm lint # Executa linting
pnpm type-check # Verifica tipos TypeScriptsrc/
├── app/ # App Router do Next.js
│ ├── globals.css # Estilos globais
│ ├── layout.tsx # Layout principal
│ ├── page.tsx # Página inicial
│ ├── lessons/ # Páginas de lições
│ ├── exercises/ # Páginas de exercícios
│ └── reference/ # Página de referência
├── components/ # Componentes reutilizáveis
│ ├── ui/ # Componentes base (shadcn/ui)
│ ├── CodeBlock.tsx # Bloco de código com syntax highlighting
│ ├── Navigation.tsx # Navegação principal
│ └── ProgressBar.tsx # Barra de progresso
├── data/ # Dados das lições e exercícios
│ ├── lessons.ts # Conteúdo das lições
│ └── exercises.ts # Exercícios práticos
├── lib/ # Utilitários e configurações
│ └── utils.ts # Funções auxiliares
└── store/ # Gerenciamento de estado
└── useProgressStore.ts # Store do progresso
- Primária:
#3178C6(Azul TypeScript) - Secundária:
#1E1E1E(Cinza escuro) - Sucesso:
#10B981(Verde) - Background:
#FFFFFF/#F5F5F5
- Texto: Inter
- Código: JetBrains Mono
- Faça um fork do projeto
- Crie uma branch para sua feature (
git checkout -b feature/AmazingFeature) - Commit suas mudanças (
git commit -m 'Add some AmazingFeature') - Push para a branch (
git push origin feature/AmazingFeature) - Abra um Pull Request
- Adicionar mais exercícios práticos
- Implementar sistema de conquistas
- Adicionar modo escuro
- Criar testes automatizados
- Adicionar suporte a múltiplos idiomas
- Implementar playground de código avançado
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Ayrton Medrano
- GitHub: @AyrtonMedrano
- LinkedIn: Ayrton Medrano
Feito com ❤️ e TypeScript
⭐ Se este projeto te ajudou, considere dar uma estrela!