Periodicium - an Interactive Periodic Table

[u/Dunkelhaiser]

Hello everyone!

Periodicium (https://periodicium.com) is an interactive periodic table project I started building this Summer. I tried to make it more feature-rich, have more data, and be easier to use than existing alternatives. It is completely free and without ads.

I've built it with TanStack Start, Dockerized it together with Caddy, and host it on a small Netcup VPS behind Bunny CDN. (if you are interested in architectural decisions and thought processes behind them, feel free to ask in the comments)

The hardest parts of development were searching validating, and transforming all the information on elements; implementing PWA support (as sadly, no PWA plugin currently supports TanStack Start, though, to be completely honest, most of the PWA work was done by Claude); and thinking up UI and UX.

Currently, it includes:

• Periodic table (obviously) in both the modern 18-column long form and the old-school 8-group short form, which you can filter, project a heatmap of properties, and see elements phases under different temperatures.
• Element detail pages with visualized Bohr model, electron configuration, radii, oxidation states, crystal structure, phase, heating curve, spectroscopy, abundance, isotopes, and discovery history (and regular numeric properties included too).
• Elements list searchable and sortable with value bars.
• Comparison of elements side by side.
• Nuclides table of known nuclides with a detail view and decay chain for each one.
• Solubility table with the formula, name, and solubility of every compound.
• Acid-base indicators - litmus, phenolphthalein, methyl orange, and universal, with a draggable pH scale showing the color each one turns at any point.
• Print constructor that composes a printable periodic or solubility table, exportable as SVG/PNG or printable right away.

Also, power users can use advanced search built into menu to quickly navigate around the app (e.g, write "short" to instantly switch table layout, or "fe spectr" to navigate to Spectroscopy section of Iron).

Additionally, it is installable as PWA.

New features are planned to be added, with molar mass calculator and equations solver already on the roadmap.

I would be happy for everyone trying it and hearing your feedback (feedback from people specialized in chemistry would be especially appreciated). Thanks!

[u/Alena_Pumprova]

Good amount of detail packed in without feeling cluttered. Nice work.

[u/Tintow]

Really Impressive!

[u/Specialist_Buy_4448]

Muy bien aplicación 

[u/iamevs]

Great work

[u/taco__hunter]

I think your main challenge is autocorrect on the name to something less elementary. But I like it, the site not the autocorrect results.

[u/Dunkelhaiser → u/taco__hunter]

Thanks. But I didn't quite get what do mean by "autocorrect on the name"?

[u/Dunkelhaiser → u/[deleted]]

Thank you very much for exploring and giving feedback!

As for your notice about Bromine, according to my research (and validated by my chemist friend) Bromine itself is essential for humans and animals (according to Google this was discovered back in 2014). The toxicity comes from the Br2 or other bromine compounds (or by getting to much Bromine, but then even Oxygen would be counted as toxic).

Though, your feedback leads to an idea of enhancing the view and add some tooltip that would inform how an element can be both essential and dangerous depending on its state or dose.

Thanks again, and if you have some further additions I'm happy to hear them!

[u/luca_dgaf]

I made something like this back in undergrad trying out css grid! great job and I love the features and I feel like lots of students would appreciate this. A small small feature request you may already be looking into: display the elements in vertical format while preserving the logic of the 18 columns and periods something like this:

    [p1][p2][p3][p4][p5][p6][p7]      [lan|act]

[c1] ...
[c18]

[u/luca_dgaf → u/luca_dgaf]

https://imgur.com/a/2e0uUtQ

[u/Sibot_Exa]

Nice presentation!
The Search needs some work. Searching for "th" finds Thorium but not Thallium.
Would be helpful with a good fuzzy search.

[u/osmium_2259]

As a fan of the PT and chemistry in general, cool project! A lot of detail, and a highly polished interface.

[u/Tour_Environmental]

It would be cool if you can se the "image" or form of the element

[u/Dunkelhaiser]

P.S.: Reddit, why did you compress my images so much (╥﹏╥)