An interactive, Windows 98-themed periodic table web app built with React, TypeScript, and Vite. Explore all 118 elements with detailed property cards, 3D Bohr atom models, spectral images, and more.
🔗 Live Demo: periodictable.rajathjaiprakash.com
- Interactive Periodic Table — Click any element to view its full detail page
- Category Filtering — Click legend swatches to highlight element groups (alkali metals, halogens, noble gases, etc.)
- 3D Bohr Models — Interactive Three.js atom visualizations with orbital animations and reliable auto-rotation
- Comprehensive Data — Atomic mass, density, melting/boiling points, electron configuration, oxidation states, and more
- Image Gallery — Sample photographs, spectral emission images, and 2D Bohr diagrams for each element
- Discover Feature — A randomized "Discover an Element" card on the home page
- Retro Aesthetic — Full Windows 98 UI theme with beveled borders, system fonts, and flat colors
- Accessible — Skip-to-content link, ARIA roles, keyboard navigation,
prefers-reduced-motionsupport - Error Resilient — ErrorBoundary wrappers with Win98-styled recovery dialogs
- Responsive Design — Works on desktop, tablet, and mobile screens
- GitHub Pages Deployment — Automated CI/CD via GitHub Actions
| Layer | Technology |
|---|---|
| Framework | React 19 + TypeScript 6 |
| Build Tool | Vite 8 |
| 3D Rendering | Three.js + React Three Fiber + Drei |
| Routing | React Router v7 |
| Styling | Vanilla CSS with CSS custom properties (Windows 98 theme) |
| Fonts | Pixelify Sans, VT323, VCR OSD Mono |
| Testing | Vitest + Playwright |
| Quality | ESLint 10 + Prettier |
| Hosting | GitHub Pages |
git clone https://github.com/rajathjn/periodic_table.git
cd periodic_tablenpm installnpm run devThis starts a local Vite dev server at http://localhost:5173 with Hot Module Replacement (HMR). Changes to source files are reflected instantly in the browser.
npm run buildOutputs optimized static files to the dist/ directory.
npm run previewStarts a local server to preview the production build.
| Script | Description |
|---|---|
npm run dev |
Start Vite dev server with HMR |
npm run build |
TypeCheck + production build |
npm run preview |
Serve the production build locally |
npm run lint |
Run ESLint (includes jsx-a11y) |
npm run lint:fix |
Auto-fix lint issues |
npm run format |
Format all files with Prettier |
npm run typecheck |
Run TypeScript type checking |
npm test |
Run unit tests (Vitest) |
npm run test:watch |
Run tests in watch mode |
npm run test:e2e |
Run Playwright end-to-end tests |
npm run test:e2e:install |
Install Playwright browsers |
npm run analyze |
Generate bundle visualizer report |
npm run deploy |
Deploy dist/ to GitHub Pages |
The element data is pre-generated and committed to the repo. You only need to run these scripts if you want to refresh the data from upstream sources.
node scripts/generate-data.cjsFetches the Bowserinator Periodic Table JSON and transforms it into src/data/elements.json with normalized categories, group names, and oxidation states.
node scripts/download-all-assets.cjsDownloads 3D GLB models, 2D Bohr images, spectral images, and sample photographs for all 118 elements into public/assets/elements/. Updates elements.json with local_* paths.
If some downloads fail due to rate limiting, retry with longer delays:
node scripts/download-all-assets.cjs --retrynode scripts/enrich-summaries.cjsFetches extended descriptions from Simple English Wikipedia and stores them as summary_extended in elements.json.
The project deploys automatically to GitHub Pages via the GitHub Actions workflow:
- Push to
mainbranch triggers the workflow npm install→npm run buildproduces thedist/folder- The
dist/folder is deployed to thegh-pagesbranch - GitHub Pages serves the site from
gh-pages
To deploy manually:
npm run build
npm run deploy- Element Data: Bowserinator, PubChem, NIST (Public Domain)
- Element Images: Wikimedia Commons, images-of-elements.com (CC BY 3.0/SA)
- Descriptions: Wikipedia / Simple Wikipedia (CC BY-SA 3.0)
- Bohr Models: Google Arts & Experiments Periodic Table
- Fonts: Pixelify Sans (SIL OFL), VT323 (SIL OFL), VCR OSD Mono (free)
Original content is licensed under CC BY-SA 4.0.
See the License page for full attribution details.