Chasqui II
Landing page del primer CubeSat peruano
El problema
El proyecto Chasqui II de la UNI necesitaba una web que comunicara la misión del primer satélite peruano estudiantil, reclutara miembros, atrajera sponsors y vendiera merchandise. El contenido estaba completamente hardcodeado y no era mantenible por el equipo no-técnico.
Decisiones UX/UI
Design System con Atomic Design (9/10 en auditoría). Accesibilidad WCAG AA con Lighthouse 96 promedio. Scrollytelling interactivo para la narrativa de la misión espacial. Animaciones con Motion + AOS, respetando prefers-reduced-motion. Soporte dark theme con inline script. Toast notifications para feedback de formularios.
Arquitectura técnica
Remix 2.12 con Vite para SSR y routing basado en archivos. i18n completo (ES/EN) con react-i18next y rutas dedicadas por idioma (/es/, /en/). Visualizaciones geográficas con D3.js y TopoJSON para mostrar la órbita del satélite. Migración completa de datos hardcodeados a Sanity CMS.
Migración a CMS
Se auditó la escalabilidad (4/10 inicial, soportaba solo 2-3x crecimiento). Se migró todo el contenido a Sanity: noticias, productos, equipo, partners, subsistemas. Se eliminaron 7 queries huérfanas. El equipo Chasqui ahora actualiza contenido sin tocar código.
Testing
De 0 tests a 57 unit tests (Vitest + Testing Library) y 19 E2E tests (Playwright). Tipos centralizados en /types/ con 0 "any" viables. Arquitectura de código 9/10 en auditoría final.
Stack
Remix 2.12 · React 18 · TypeScript · Tailwind CSS · Sanity CMS · D3.js · Motion · AOS · react-i18next · Vitest · Playwright