https://github.com/wojciechmarek/periodic-table

A simple and tidy periodic table app with a modern user interface.
https://github.com/wojciechmarek/periodic-table

dark-theme emotion lucide-icons nx periodic-table react react-query typescript

Last synced: about 1 month ago
JSON representation

A simple and tidy periodic table app with a modern user interface.

• Host: GitHub
• URL: https://github.com/wojciechmarek/periodic-table
• Owner: wojciechmarek
• Created: 2023-07-16T10:57:17.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-07-18T16:13:28.000Z (over 1 year ago)
• Last Synced: 2024-04-14T02:10:48.727Z (9 months ago)
• Topics: dark-theme, emotion, lucide-icons, nx, periodic-table, react, react-query, typescript
• Language: TypeScript
• Homepage: https://periodic-table-alpha.vercel.app
• Size: 1.83 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Periodic Table

A modern, clean, and tidy periodic table.

## Purpose

To brush up my frontend skills 🔥 and learn CSS grid, emotion, react-query, and NX.

## Demo

A live demo is available at [https://periodic-table-alpha.vercel.app/](https://periodic-table-alpha.vercel.app/).

## Screenshots

The main periodic table:

![main](./screenshots/main.png)

The element details:

![details](./screenshots/details.png)

## Used technologies

- 🎁 **Repository:** mono-repository by NX

- 🌈 **Framework:** react

- 🛠️ **Tools:** react-query

- 🎨 **Styling:** styled-components by emotion, lucide icons

- 💎 **Others:** desktop-first approach, external data source

## How to run

1. Install [Node.js](https://nodejs.org/en/download/).

2. Clone the repository.

3. Type and run: `npm i` in the root directory.

4. Type and run: `npm run dev` in the root directory.

5. Open `http://localhost:4200` in your browser to see the app.