TPE — Atom Lab

TPE Atom Lab turns the periodic table into an interactive chemistry learning environment, using visual atomic models and molecular exploration built with GPT-5.6 and Codex.

Comment

Inspiration

My name is Valentino Carnevale, I am 53 years old, and I am neither a chemist nor a professional developer.

Eight months ago, I started building TPE — Tavola Periodica degli Elementi as a personal study tool. I needed a clearer, more visual, and more organized environment to understand chemistry.

Over time, I realized that this difficulty did not concern only me. Many students encounter an abstract language too early, made of formulas, orbitals, bonds, and molecular geometries, often presented separately without clearly showing how they are connected.

I therefore decided to transform my personal study tool into an educational portal designed to make chemistry more accessible.

When I started, I knew very little about programming. During these months, I learned to use ChatGPT not only as a text or code generator, but as a tool for design, analysis, and development.

The idea, the educational direction, the visual choices, and the decisions about how the project should work are mine. ChatGPT and Codex helped me transform them into a real, working product.

What it does

TPE is an interactive educational environment that connects the periodic table, theoretical content, atomic models, and molecular exploration.

For Build Week, I focused the work on Hydrogen, the first element in the periodic table, creating a complete vertical slice that demonstrates the future direction of the project.

The submission presents two main systems: Atom Lab and ChapterExplorer.

Atom Lab allows the student to observe the hydrogen atom through the Bohr model and the representation of the 1s orbital.

The Bohr model shows the electron through a visual and animated path. The 1s orbital instead introduces the modern concept of the electron’s probability distribution.

The goal is to help students understand that scientific models are not photographs of reality, but different tools used to explain different aspects of the same phenomenon.

ChapterExplorer allows students to explore the H₂ and H₂O molecules through different representations:

  • formula;
  • atoms;
  • bonds;
  • Lewis structure;
  • geometry;
  • polarity.

Students can select atoms and bonds and observe how the scientific explanations change.

In H₂, they can understand the equivalence of the two hydrogen atoms and the formation of a nonpolar covalent bond.

In H₂O, they can observe the central oxygen atom, the O–H bonds, the lone electron pairs, the bent molecular shape, the angle of approximately 104.5°, and the dipole moment that makes water a polar molecule.

The interaction directly connects what the student sees, what they select, and the scientific concept they need to understand.

How we built it

TPE is built with React and TypeScript.

During Build Week, I used GPT-5.6 and Codex to analyze the existing architecture and build Atom Lab and ChapterExplorer without compromising the rest of the portal.

Codex was used to:

  • analyze the existing codebase;
  • identify the responsibilities of the modules;
  • design explicit scientific contracts;
  • separate data, logic, visualization, and interface;
  • avoid duplicated states and behaviors;
  • implement Atom Lab and ChapterExplorer;
  • run automated tests;
  • verify TypeScript, linting, and builds;
  • diagnose visual and functional problems;
  • prepare a dedicated Build Week branch;
  • publish a separate deployment on Vercel.

Atom Lab was built as a modular, data-driven system designed to be extended in the future to more complex atoms without rewriting the logic for each element.

The principle we followed was simple: not to create an isolated feature that works only today, but to build a stable foundation that can be extended tomorrow.

Challenges we ran into

I received the invitation to participate in Build Week only a few days before the deadline.

It would not have been realistic to update the entire portal in such a short time. I therefore had to identify a limited but complete part of the project that could clearly demonstrate its potential.

The main difficulty was transforming complex scientific concepts into simple interactions without reducing them to visual decoration.

An animated atom can be visually interesting, but it must also explain correctly what it represents. A molecule can be beautiful to observe, but it must clearly show the relationship between atoms, bonds, electron pairs, geometry, and polarity.

Another challenge was integrating the new systems into an already large project without introducing regressions or duplicating the existing logic.

The deployment also required specific controls to keep the Build Week candidate separate from the stable public version of the portal.

Accomplishments that we're proud of

I am particularly proud of having transformed a personal study need into a real educational product that is accessible online.

The Hydrogen vertical slice now connects:

  • editorial content;
  • the Bohr atomic model;
  • the representation of the 1s orbital;
  • interactive exploration of H₂;
  • interactive exploration of H₂O;
  • bonds, Lewis structure, geometry, and polarity.

The complete journey, from the periodic table to Atom Lab and ChapterExplorer, is working and has been verified through automated tests and manual checks.

The Build Week candidate was published through a separate and controlled Vercel deployment.

The portal also contains the structure dedicated to all 118 elements and to the Foundations of chemistry. Hydrogen currently represents the most complete model of how these contents can evolve.

I am also proud that the project demonstrates how a person without professional computer science training can use artificial intelligence to develop a complex educational idea.

What we learned

I learned that artificial intelligence produces better results when it is not used only to request code quickly.

During the project, I learned how to define editorial rules, modular architectures, scientific contracts, verification procedures, and quality criteria.

I also learned that educational graphics should not simply make a page more attractive. Every animation, selection, or visual change must help the student build a relationship between a representation and the scientific concept behind it.

Finally, I learned the importance of clearly separating logic, data, and interface. A good architecture makes it possible to correct, verify, and extend a project more safely.

What's next for TPE — Atom Lab

TPE Atom Lab is not the conclusion of the project, but a concrete demonstration of its future direction.

The next objective is to progressively extend Atom Lab to more complex elements while maintaining the same modular and data-driven architecture.

ChapterExplorer will be expanded with new molecules, new representations, and additional connections between atomic structure, bonds, geometry, and chemical properties.

The content dedicated to all 118 elements and to the Foundations of chemistry will also be progressively connected to the new interactive tools.

TPE began as a personal need, but it aims to become a tool for anyone who has thought at least once:

“Chemistry is too difficult for me.”

The project wants to answer:

“You can understand it, if it is shown to you in the right way.”

Built With

Share this project:

Updates