Proyecto
Elements
Tabla periódica interactiva con modelos de Bohr en 3D, visualizador de moléculas y diccionario de química.
Objetivo
Plataforma educativa, solo frontend, para explorar química de forma visual e interactiva. Integra tres modos: una tabla periódica completa con animaciones 3D de los modelos de Bohr, un visualizador de moléculas y un diccionario bilingüe de términos científicos. El contenido —datos de Wikidata, Wikipedia y PubChem, junto con geometría molecular generada con RDKit— se procesa por completo durante el build, así que la aplicación no depende de ninguna API externa en tiempo de ejecución.
Cómo funciona
- Tabla periódica Los 118 elementos, coloreados por categoría, con una vista de detalle que anima la configuración electrónica de cada uno mediante un modelo de Bohr en 3D.
- Visualizador de moléculas 20 moléculas curadas, renderizadas a partir de conformers 3D precomputados con RDKit para explorar su estructura espacial.
- Diccionario de química Diccionario bilingüe de 47 términos científicos, accesible de forma contextual mediante íconos dentro de la tabla y el visualizador.
- Offline-first Todo el contenido se precomputa durante el build; no hay llamadas a APIs en tiempo de ejecución, por lo que la app funciona sin conexión tras la primera carga.
Arquitectura
El repositorio es un monorepo con dos paquetes: frontend/, que
contiene la aplicación Astro + React y el pipeline de contenido que procesa los datos químicos en
tiempo de build, e infra/, con la infraestructura de hosting en AWS CDK v2. El
despliegue está automatizado con GitHub Actions, que corre las pruebas antes de hacer el build y
publicar en S3 servido por CloudFront.
Servicios AWS
- S3 Almacenamiento del sitio estático generado por Astro
- CloudFront CDN para distribución global del contenido
- ACM Certificado TLS para HTTPS
- Route 53 DNS y enrutamiento del dominio
- CloudFormation / CDK Infraestructura como código en TypeScript
- GitHub Actions CI/CD: corre tests, build y despliegue automatizado
Stack