Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sayedshehata1/colors-app
A clone of websites like Flat UI Colors and Material UI Colors.
https://github.com/sayedshehata1/colors-app
Last synced: about 1 month ago
JSON representation
A clone of websites like Flat UI Colors and Material UI Colors.
- Host: GitHub
- URL: https://github.com/sayedshehata1/colors-app
- Owner: SayedShehata1
- Created: 2023-06-09T10:20:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-20T23:07:10.000Z (over 1 year ago)
- Last Synced: 2024-04-24T22:19:43.623Z (9 months ago)
- Language: JavaScript
- Homepage: https://react--colors-app.vercel.app/
- Size: 1.33 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Colors App
![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white)
![Materia UI](https://img.shields.io/badge/Material%20UI-007FFF?style=for-the-badge&logo=mui&logoColor=white)
![JSS](https://camo.githubusercontent.com/45b13f7a9724dcf21613c23f3aab8900a583ebd09d7c8c38cb31ea2350159703/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4a53532d4637444631453f7374796c653d666f722d7468652d6261646765266c6f676f3d4a5353266c6f676f436f6c6f723d7768697465)
![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)Table of Contents
## About The Project
A clone of websites like Flat UI Colors and Material UI Colors using React.
![Preview](./src/assets/preview-1.png)
![Preview](./src/assets/preview-2.png)
![Preview](./src/assets/preview-3.png)
![Preview](./src/assets/preview-4.png)### Features
- list default and custom palettes with ability to create/delete palettes
- create custom color palette that:
- contains colors entered by user through color picker or (Random Color) button
- enable user to change the order of ColorBoxes by **Drag & Drop**
- enable user to save custom palette with name and emoji :smiley:
- explore color palettes and generate different color levels
- click on color box to **copy** color code with the ability to select the color format from:
- `HEX` format
- `RGB` format
- `RGBA` format
- click on `More` button on each color box to generate colors from selected color### Built With
- React
- Material-UI
- chroma-js
- emoji-mart
- React Color
- rc-slider
- react-copy-to-clipboard
- react-material-ui-form-validator
- react-router
- react-transition-group---
## Getting Started
This project require some perquisites and dependencies to be installed, you can view it online using this [demo](https://react--colors-app.vercel.app/). or you can find the instructions below:
> To get a local copy, follow these simple steps :
### Installation
#### installing Locally
1. Clone the repo
```sh
git clone https://github.com/SayedShehata1/Colors-App.git
```2. go to project folder
```sh
cd React-Colors-App
```3. install dependencies
```bash
npm install --force
```4. Run development server
```sh
npm start
```---
## Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request