Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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.

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)





Logo





View Demo
·
Report Bug


Table of Contents



  1. About The Project



  2. Getting Started


  3. Contributing

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

(back to top)

---

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

(back to top)

---

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

(back to top)