Ozone

Bring chemistry to life by watching them instead of memorizing

Comment

Inspiration

Studying chemistry usually means scrolling through endless pages, memorizing structures, and dealing with confusing textbook diagrams meant just for passing exams. We wanted to build something better: an app where the screen gets out of the way and lets you focus purely on the chemistry itself.

What it does

Ozone is an interactive chemistry tool. Type in any chemical compound, and Ozone looks it up on PubChem, showing it in two ways at once:

  • 3D View: Switch between a "Ball & Stick" view for connections and a "Space Fill" view for molecular volume, with smooth 3D controls.
  • 2D View: A clear, flat drawing of the molecule with ring sizes clearly labeled and easy zoom and export options.
  • Smart Analysis: Automatically counts rings, functional groups, and double/triple bonds.
  • Distinct Colors: Every single element has its own distinct, easy-to-read color so you can tell atoms apart instantly without guessing.
  • Summaries and Descriptions: Gives you a quick Wikipedia explanation along with official registry details and safety information.

How we built it

  • App Core: Built using SolidJS for fast, smooth performance and Three.js / WebGL for 3D graphics.
  • Design: Styled with TailwindCSS using a clean, dark-themed interface that is easy on the eyes.
  • Data: Pulls live information and structures straight from PubChem and Wikipedia.
  • Custom Code: Created special algorithms to automatically detect rings, format chemical formulas correctly, and calculate distinct colors for all 118 elements.

Challenges we ran into

  • Messy Data: Databases often store formulas and names separately, and some salts or oxides come with 2D drawings but no 3D models. We built smart fallback search tools to fix and match these automatically.
  • Strict Formatting: Chemical formulas can be picky about parentheses and capitalization. We automated the cleanup so the user never has to worry about it.
  • Handling Traffic Limits: PubChem has strict request limits. We built smart retry systems and cool-down timers so the app handles busy servers smoothly without crashing.

Achievements that we can show

  • Great on Mobile: Designed a layout that scales down smoothly from a large computer monitor right down to a mobile phone screen.
  • Inorganic Support: Built special algorithms to predict and show inorganic compounds that are missing from standard databases.
  • Helpful Error Handling: Made sure that if the network drops or servers are busy, the app tells you the truth instead of falsely claiming a chemical doesn't exist.

What we learned

  • Chemical Data is Complex: Bridging different database formats requires writing clever backup plans and safety checks for missing information.
  • Color Has a Purpose: Using color strictly to show chemical identity—rather than just for decoration—makes complex data much easier to read.
  • Performance Matters: Using lightweight tools like SolidJS keeps the app fast and responsive even when loading heavy 3D models.

What's next for Ozone

  • Adding VR/AR support so students can immerse themselves in molecular structures.
  • Adding offline caching so common study compounds load instantly without internet.
  • Supporting custom student reaction path simulations and step-by-step drawing tools.
  • Improving export options for homework, lab reports, and presentation slides.

Built With

Share this project:

Updates

Submission history