Project
Elements
Interactive periodic table with 3D Bohr models, a molecule visualizer, and a chemistry dictionary.
Goal
A frontend-only educational platform for exploring chemistry visually and interactively. It brings together three modes: a full periodic table with 3D Bohr-model animations, a molecule visualizer, and a bilingual dictionary of scientific terms. The content — data from Wikidata, Wikipedia, and PubChem, along with molecular geometry generated with RDKit — is fully processed at build time, so the app never depends on any external API at runtime.
How it works
- Periodic table All 118 elements, color-coded by category, with a detail view that animates each one's electron configuration through a 3D Bohr model.
- Molecule visualizer 20 curated molecules, rendered from 3D conformers precomputed with RDKit to explore their spatial structure.
- Chemistry dictionary A bilingual dictionary of 47 scientific terms, accessible contextually through icons inside the table and the visualizer.
- Offline-first All content is precomputed at build time; there are no runtime API calls, so the app keeps working offline after the first load.
Architecture
The repository is a monorepo with two packages: frontend/, which
holds the Astro + React application and the content pipeline that processes chemistry data at
build time, and infra/, with the AWS CDK v2 hosting infrastructure. Deployment is
automated through GitHub Actions, which runs the tests before building and publishing to S3 served
by CloudFront.
AWS services
- S3 Hosting for the static site generated by Astro
- CloudFront CDN for global content distribution
- ACM TLS certificate for HTTPS
- Route 53 DNS and domain routing
- CloudFormation / CDK Infrastructure as code in TypeScript
- GitHub Actions CI/CD: runs tests, build, and automated deployment
Stack