KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

react-periodic-table

★ 19 Open GitHub ↗

React Periodic Table app, built with Next.js, allows users to explore elements in various modes, including Chemical Group Block and CPK Convention. It features a 3D Bohr Model visualization and temperature simulations.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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.

![screenshot](https://raw.githubusercontent.com/ShaheenJawadi/react-periodic-table/main/screenshots/1.png)

## Demo
Explore the live version of the app here:  [React Periodic Table Demo](https://shaheenjawadi.github.io/react-periodic-table/)

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:
 
```Bash
git clone https://github.com/ShaheenJawadi/react-periodic-table.git
```
2. Install dependencies:
```Bash
cd react-periodic-table
npm install
``` 
or
```Bash
cd react-periodic-table
yarn
```
3. Start the development server:

```Bash
npm run dev
```
or
```Bash
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:
```Bash
git clone https://github.com/your-username/react-periodic-table.git
```

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

```Bash
git checkout -b feature/new-feature
```

4. Make your changes and commit them:

```Bash
git commit -m "Add new feature"
```

5. Push your changes to your fork:

```Bash
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](https://github.com/Bowserinator/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](https://github.com/Bowserinator/Periodic-Table-JSON)  project for making this data available for educational and development purposes.

## License

This project is licensed under the  [`MIT License`](https://github.com/ShaheenJawadi/react-periodic-table/blob/main/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!

react-periodic-table

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README