Elementum-V2

Futuristic periodic table with smart-home design. Explore 118 elements with real-time data, molecular 3D modeling, safety insights, and environmental impact analysis for a visual chemistry journey.

Comment

Inspiration

The project was inspired by the need to modernize the way students and researchers interact with the periodic table. We aimed to move away from static, dull charts and create an experience that feels like a modern "smart home" interface—captivating, interactive, and deeply informative.

What it does

Elementum is a smart, interactive periodic table web application. It allows users to:

  • Search for any element instantly by name, symbol, or atomic number.
  • Access comprehensive chemical properties, rarity data, and global prices.
  • Analyze safety risks (allergen risks, toxicity) and view proper testing precautions.
  • Assess environmental impact, including CO2 footprint and recyclability.
  • Compare two elements side-by-side to understand differences in risk and cost.
  • Analyze molecular compounds (e.g., $H_2O$) with 2D structures and interactive 3D models.

How we built it

We built the application using Node.js and Express for the backend server to handle requests efficiently. The frontend was developed using HTML, CSS, and vanilla JavaScript for dynamic data rendering. We utilized the PubChem API to fetch real-time chemical data for the compounds. The project is deployed on Vercel for high availability.

Challenges we ran into

  • Performance: Displaying 118 elements with high-quality background video caused slow load times and layout shifts (FOUC).
  • Mobile Responsiveness: Adapting a wide grid table to fit small mobile screens required complex CSS media queries to ensure all 118 elements were reachable via horizontal scrolling.
  • Data Fetching: Managing asynchronous API calls to PubChem to ensure data consistency for element properties and 3D structures.

Accomplishments that we're proud of

  • Creating a visually stunning, immersive user interface that feels modern and futuristic.
  • Successfully implementing a complex 3D molecular viewer within the compound analysis section.
  • Building a complete end-to-end web application that handles both frontend display and backend data processing.

What we learned

  • CSS Optimization: Learned advanced techniques to prevent layout shifts and manage video background performance.
  • API Integration: Gained deep experience in fetching, parsing, and displaying complex JSON data from REST APIs.
  • Responsive Design: Mastered flexbox and grid layouts to create tables that work flawlessly on both desktop and mobile.

What's next for Elementum-V2

  • Implementing user accounts to allow users to save their favorite elements and comparison reports.
  • Adding more interactive 3D simulations for molecular reactions.
  • Expanding the database to include industrial applications and more rare earth element data.

Built With

Share this project:

Updates