Periodic Table Explorer

🏆 NSoC'26 Selected Project

This project has been selected for the Nexus Spring of Code program.

We welcome contributions from NSoC participants. If you're an NSOC contributor, please check the Contributing Guidelines to get started.

Periodic Table Explorer is an interactive React-based web application that visually represents the periodic table of elements. It is designed to make learning chemistry intuitive and engaging through a clean, interactive interface.

Features

• Interactive Periodic Table: Elements are displayed in their correct positions with color-coded blocks (s, p, d, f) for easy identification of categories.

• Element Detail Cards: Click on any element to view essential information, including:

  • Symbol
  • Atomic number
  • Atomic mass
  • Group and period
  • Block (s, p, d, f)
  • Physical phase
  • Discovery details

• Clean UI Design: User-friendly and visually appealing interface.

• Component-Based Architecture: Built with reusable React components for easy maintenance and scalability.

• Beginner-Friendly Contribution: Ideal for developers looking to contribute to an educational open-source project.

---

Tech Stack

• Frontend: React (Create React App)
• Language: JavaScript (ES6+)
• Styling: CSS

---

Getting Started

Prerequisites

• Node.js (v14+)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/periodic-table-explorer.git

2. Navigate to the project folder:

   cd periodic-table-explorer

3. Install dependencies:

   npm install

   or

   yarn install

4. Start the development server:

   npm start

   or

   yarn start

5. Open http://localhost:3000 in your browser to see the app in action.