ArmoTuSitio.com Lab

Plataforma educativa interactiva para aprender TypeScript y SASS sobre una aplicación frontend real.

🌐 Ver plataforma online · Contribuir · Changelog

---

Sobre el proyecto

ArmoTuSitio.com Lab nació como un laboratorio para practicar TypeScript y evolucionó hacia una plataforma de aprendizaje frontend interactiva.

El proyecto combina:

• rutas progresivas de aprendizaje;
• teoría aplicada;
• checkpoints y desafíos;
• progreso persistente en el navegador;
• laboratorio CRUD real;
• búsqueda y bookmarks;
• proyectos finales;
• arquitectura TypeScript y SASS sin frameworks de UI.

La plataforma está pensada para aprender conceptos reales sin esconderlos detrás de demasiadas abstracciones.

El contenido pedagógico completo vive en la plataforma publicada. Este README se mantiene deliberadamente enfocado en el proyecto, su arquitectura y cómo colaborar.

---

Demo

https://drako01.github.io/jugando_con_typescript/

La publicación se realiza automáticamente desde main mediante GitHub Actions hacia la rama gh-pages.

---

Qué incluye

Learning Platform

• 12 módulos de TypeScript.
• 12 módulos de SASS / SCSS.
• 8 desafíos prácticos.
• niveles: Fundamentos, Intermedio, Avanzado y Profesional.
• progreso global y por ruta.
• continuar desde el último módulo visitado.
• bookmarks persistentes.
• búsqueda global y glosario.
• búsqueda dentro de cada curso.
• objetivos y tiempo estimado por lección.
• proyectos finales de TypeScript y SASS.
• desafío integrador.

Laboratorio práctico

El laboratorio utiliza un dominio académico sencillo:

Categoría
   ↓
Profesor
   ↓
Curso
   ↓
Alumno

Permite experimentar con:

• clases y contratos;
• DOM tipado;
• eventos y formularios;
• relaciones entre entidades;
• localStorage;
• serialización JSON;
• estados y validaciones;
• arquitectura modular;
• SASS responsive.

También incluye datos demo, inspector de storage, reset seguro, estados vacíos, feedback visual y operaciones CRUD.

---

Stack

• TypeScript 6
• SASS / SCSS
• HTML5
• DOM APIs
• localStorage
• GitHub Actions
• GitHub Pages

No utiliza React, Vue, Angular ni frameworks de UI.

Esto es intencional: el objetivo del laboratorio es que la arquitectura, el DOM, el tipado y los estilos sean visibles y estudiables.

---

Arquitectura

.
├── assets/
│   ├── css/                  # CSS generado
│   ├── img/
│   └── js/                   # JavaScript generado
│
├── docs/                     # Material histórico / referencia
│
├── sass/
│   ├── base/
│   ├── components/
│   ├── layout/
│   └── styles.scss
│
├── type/
│   ├── functions/
│   ├── learning/
│   │   └── catalog.ts        # catálogo de cursos y metadata
│   ├── models/
│   ├── index.ts              # laboratorio
│   ├── platform.ts           # experiencia de plataforma
│   └── tutorial.ts           # interacción de las rutas
│
├── index.html
├── learn-typescript.html
├── learn-sass.html
├── practice.html
├── package.json
└── tsconfig.json

Piezas principales

Archivo	Responsabilidad
type/learning/catalog.ts	metadata de cursos, módulos, niveles, objetivos y búsqueda
type/platform.ts	dashboard, progreso, búsqueda, bookmarks y navegación
type/tutorial.ts	interacción de lecciones, checkpoints y progreso
type/index.ts	comportamiento del laboratorio práctico
sass/components/_platform.scss	UI específica de la plataforma
sass/styles.scss	entry point de estilos
index.html	dashboard y laboratorio
practice.html	desafíos prácticos

---

Desarrollo local

Requisitos

• Node.js 22+ recomendado
• npm
• navegador moderno

Instalación

git clone https://github.com/Drako01/jugando_con_typescript.git
cd jugando_con_typescript
npm ci

Build completo

npm run build

Compila:

• TypeScript → assets/js/
• SASS → assets/css/styles.css

Después podés servir index.html con cualquier servidor estático local.

Scripts

npm run typecheck
npm run build
npm run watch
npm run styles
npm run styles:watch

Script	Uso
npm run typecheck	valida TypeScript sin emitir archivos
npm run build	compila TypeScript y SASS
npm run watch	observa cambios TypeScript
npm run styles	compila SASS
npm run styles:watch	observa cambios SASS

---

CI/CD

Los Pull Requests contra main ejecutan automáticamente:

npm ci
npm run typecheck
npm run build

Los pushes a main también disparan el despliegue a GitHub Pages.

El pipeline valida que existan los assets compilados antes de publicar para evitar deployments incompletos.

---

Contribuciones

Las contribuciones son bienvenidas.

Podés colaborar con:

• nuevos ejercicios;
• mejoras pedagógicas;
• correcciones conceptuales;
• mejoras TypeScript;
• mejoras de arquitectura SASS;
• accesibilidad;
• UX/UI;
• responsive;
• documentación técnica;
• bugs del laboratorio;
• nuevos desafíos o ejemplos.

Antes de comenzar, leé CONTRIBUTING.md.

El flujo recomendado es:

fork
  ↓
feature branch
  ↓
cambios + validaciones
  ↓
Pull Request → main
  ↓
CI
  ↓
review

---

Changelog

La evolución del proyecto se documenta en CHANGELOG.md.

---

Licencia

Distribuido bajo licencia MIT.

Ver LICENCE.

---

Autor

Alejandro Di Stefano

• GitHub: @Drako01
• Desarrollo: ArmoTuSitio.com

---

Desarrollado como plataforma educativa y laboratorio práctico por ArmoTuSitio.com.