React Periodic Table

This app is developed using Next.js and provides a user-friendly interface to explore the elements of the periodic table in three different modes: Chemical Group Block, Element Images, and CPK Convention. Additionally, users can categorize elements based on their properties such as Noble Gas, Alkali Metal, and more. The app also includes a temperature simulation feature, allowing users to observe state changes at different temperatures.

Demo

Explore the live version of the app here: React Periodic Table Demo

Full link: https://shaheenjawadi.github.io/react-periodic-table/

Features

1. Chemical Group Block Mode: Explore elements based on their chemical group block in the periodic table.

2. Element Images Mode: View elements using visual representations for easy identification.

3. CPK Convention Mode: Visualize elements according to the CPK (Corey-Pauling-Koltun) convention.

4. Bohr Model 3D Visualization: Get a detailed 3D visualization of the atom in the Bohr model when viewing element details.

5. Categories: Categorize elements into groups such as Noble Gas, Alkali Metal, and more.

6. Temperature simulation: Visualize how elements change state (solid, liquid, gas) with varying temperatures

Getting Started

1. Clone the repository:

git clone https://github.com/ShaheenJawadi/react-periodic-table.git

2. Install dependencies:

cd react-periodic-table
npm install

or

cd react-periodic-table
yarn

3. Start the development server:

npm run dev

or

yarn dev

4. Open the app in your browser: http://localhost:3000

Usage

• Select a viewing mode from the dropdown menu.
• Explore elements by clicking on them to view their details.
• In element details, experience a detailed 3D visualization of the atom in the Bohr model.
• Adjust the temperature slider to see how elements change state.

Contributing

If you'd like to contribute to the project, please follow these steps:

1. Fork the repository.
2. Clone your forked repository:

git clone https://github.com/your-username/react-periodic-table.git

3. Create a new branch for your feature or bug fix:

git checkout -b feature/new-feature

4. Make your changes and commit them:

git commit -m "Add new feature"

5. Push your changes to your fork:

git push origin feature/new-feature

6. Open a pull request to the main repository.

Acknowledgments

Element information and properties in this app are sourced from the comprehensive Periodic-Table-JSON repository. Some data has been processed and formatted for optimal display and functionality within this project.

We extend our gratitude to the contributors of the Periodic-Table-JSON project for making this data available for educational and development purposes.

License

This project is licensed under the MIT License.

Feel free to explore and enjoy the React Periodic Table! If you have any questions or issues, please don't hesitate to reach out. Happy exploring!