Orbital Pro

Interactive laboratory for atomic structure: electron configuration, shells and subshells, noble-gas notation, the Aufbau principle and the Bohr model for all 118 elements.

---

Contents

• Overview
• Features
• Screenshots
• Scientific scope and accuracy
• Architecture
• Tech stack
• Local development
• Testing
• Deployment
• Roadmap
• License

Overview

Orbital Pro turns an atomic number into a visual, verifiable account of an atom's electronic structure. Enter a symbol, a name (in any of the four supported languages) or an atomic number and the app computes the full electron configuration, the shell distribution, the condensed noble-gas notation, the valence shell and an animated Bohr model.

The configuration is produced by an Aufbau/Madelung engine, not read from a static table, and the 20 known ground-state exceptions are handled and explained. The interface is available in English, Italian, French and Spanish.

Live demo: https://orbital-pro.netlify.app/

Features

Feature	Description
Search	By atomic number, symbol or name, with live suggestions in the four languages.
Element card	Name, symbol, Z, group, period, category, atomic mass, electronegativity, block and isolated-atom magnetism.
Electron configuration	Condensed noble-gas notation in the standard by-shell (NIST) order, with one-click clipboard copy; the filling order is shown in the Aufbau panel.
Energy matrix	Table of the shell (K–Q) and subshell (s/p/d/f) distribution, with the valence shell highlighted.
Atom views	Three modes: Orbiting and Static Bohr models (SVG), plus a Quantum electron cloud — a 3D point cloud sampled from the real hydrogen-like orbital density |ψ|² (canvas 2D, quality Low/Medium/High, no WebGL). Orbital selector and PNG export.
Physical properties	State at 25 °C, melting/boiling points, density, first ionization energy and discovery.
Chemical behaviour	Short reactivity summary derived from the element's category and outer electrons.
Orbital diagram	Box-and-arrow diagram (↑↓) showing Hund's rule and the Pauli principle, plus s/p/d/f shape gallery.
Ions and oxidation states	Common oxidation states with the electron configuration of each ion, computed by the engine.
Periodic table	118 clickable elements, category colours or a heatmap by electronegativity / ionization / mass, with keyboard navigation.
Aufbau, step by step	Madelung diagram with animated filling and a comparison against the real exceptions.
Element comparison	Two elements side by side: configuration, shells, valence.
Quiz mode	Four exercise types (configuration, Aufbau, valence, ions) with difficulty levels, a timed mode and a best score.
Glossary and disclaimer	Tooltips on key terms and a scientific note on the Bohr model.
Shareable links	Each element has its own URL (?z=26); browser back/forward works.
Light & dark themes	A theme toggle with the preference stored locally.
Installable (PWA)	Installs to the home screen and works offline; a "Print" action produces a clean element sheet.
Multilingual	English, Italian, French and Spanish, with the preference stored locally.

Screenshots

Explore the live application at orbital-pro.netlify.app — every element has a shareable link, e.g. ?z=26 for iron.

Scientific scope and accuracy

• 118 elements with IUPAC 2021 standard atomic weights (the mass number of the most stable isotope is shown in [ ] for radioactive elements).
• Ground-state configurations computed with the Madelung rule and corrected with the 20 known experimental exceptions, consistent with the NIST Atomic Spectra Database.
• Element names follow IUPAC nomenclature in the four languages.
• Extended physical properties (state, melting/boiling points, density, ionization energy, discovery) are sourced from the public Periodic-Table-JSON dataset (compiled from Wikipedia / CRC Handbook); values unknown for the superheavy elements are shown as "—".

The 20 Madelung exceptions handled

d-block	f-block / other
Cr [Ar]3d⁵4s¹ · Cu [Ar]3d¹⁰4s¹	La [Xe]5d¹6s² · Ce [Xe]4f¹5d¹6s²
Nb [Kr]4d⁴5s¹ · Mo [Kr]4d⁵5s¹	Gd [Xe]4f⁷5d¹6s²
Ru [Kr]4d⁷5s¹ · Rh [Kr]4d⁸5s¹	Ac [Rn]6d¹7s² · Th [Rn]6d²7s²
Pd [Kr]4d¹⁰ · Ag [Kr]4d¹⁰5s¹	Pa [Rn]5f²6d¹7s² · U [Rn]5f³6d¹7s²
Pt [Xe]4f¹⁴5d⁹6s¹ · Au [Xe]4f¹⁴5d¹⁰6s¹	Np [Rn]5f⁴6d¹7s² · Cm [Rn]5f⁷6d¹7s²
	Lr [Rn]5f¹⁴7s²7p¹

Documented simplifications

• The Bohr model is a historical, teaching representation: real electrons occupy orbitals (probability regions), not circular orbits.
• The diamagnetic/paramagnetic behaviour refers to the isolated atom in its ground state; real materials may differ (solid iron is ferromagnetic).
• Groups are not shown for lanthanides and actinides: the group-3 assignment (La/Lu, Ac/Lr) is debated.
• Configurations for Z ≥ 104 are theoretical predictions and are labelled as such in the app.

Orbital Pro is an educational tool. Although it is based on authoritative sources (IUPAC, NIST), it is not a substitute for primary sources in professional or research use.

Architecture

A pure, tested scientific engine is kept separate from the presentation layer and from internationalisation.

src/
├─ core/                 # Scientific engine — pure, typed, tested
│  ├─ elements.ts        #   Dataset of the 118 elements (IUPAC 2021)
│  ├─ constants.ts       #   Madelung order, capacities, noble gases
│  ├─ exceptions.ts      #   The 20 experimental exceptions (NIST)
│  ├─ configuration.ts   #   Configuration, shells, valence, unpaired electrons
│  ├─ search.ts          #   Multilingual search and suggestions
│  └─ configuration.test.ts
├─ i18n/                 # EN / IT / FR / ES (type-safe dictionaries) + element names
├─ ui/                   # DOM components: card, atom, table, Aufbau, quiz…
├─ styles/main.css       # "Lab" theme (Tailwind v4)
└─ main.ts               # Bootstrap + state/language orchestration

The scientific logic has no knowledge of the DOM; the UI consumes the engine through pure functions. This keeps the engine unit-testable and the UI replaceable.

Tech stack

• Vite 7 and TypeScript (strict) — no runtime framework, zero runtime dependencies, minimal bundle.
• Tailwind CSS v4 (@tailwindcss/vite) for the theme.
• Vitest for the scientific-engine tests.
• @fontsource (Inter, JetBrains Mono), self-hosted — no external network requests, works offline.
• Progressive Web App: a hand-rolled service worker (offline-first) and web manifest, with light/dark themes.
• ESLint and Prettier.
• Deployed on Netlify.

Local development

Prerequisites: Node.js ≥ 20.

npm install       # install dependencies
npm run dev       # dev server (http://localhost:5173)
npm run test      # run the engine tests (Vitest)
npm run build     # type-check + production build in dist/
npm run preview   # local preview of the build
npm run lint      # static analysis

Testing

The scientific engine is covered by 59 Vitest tests, which verify, among other things:

• the invariant Σ electrons = Z for all 118 elements;
• the NIST reference configurations for critical elements (H, C, O, Cr, Cu, Pd, Ag, La, Ce, Gd, Pt, Au, Ac, Th, Lr, Og, …);
• noble-gas notation, shell distribution, valence and unpaired electrons;
• ion configurations, orbital occupancy (Hund/Pauli), oxidation states and the hydrogen-like wavefunctions used by the electron cloud;
• exact resolution and suggestions in the four languages.

npm run test

Deployment

The build produces a fully static dist/ folder. Only the compiled application is published, never the source.

npm run build
netlify deploy --prod   # requires an authenticated Netlify CLI

Configuration lives in netlify.toml: build command npm run build, publish folder dist, with security headers.

Roadmap

• Raster (PNG) social preview and app icons.
• Orbital diagrams for ions and excited states.
• A guided "tour" mode for classroom use.

License

All rights reserved. The code may not be copied, modified or redistributed without the author's explicit permission. See LICENSE.md.

---

_{Author: Cheikh Tidiane Tireira · Data: IUPAC 2021 and NIST Atomic Spectra Database}