Skip to content

Latest commit

 

History

History
97 lines (70 loc) · 4.51 KB

README.md

File metadata and controls

97 lines (70 loc) · 4.51 KB
Raw

Color Palettes


Web Page   |    Built With   |    About   |    How to Use   |    Pages   |    How to Contribute   |    Author

🔧 Built With

📄 About

This is a project I've made to learn React. A clone of websites like Flat UI Colors and Material UI Colors. It was important so I managed to learn patterns to deal in a big project with React and how to make a Responsive App.

I've also learned how to deal with Draggable boxes even up and down and also side to side. React Sortable HOC in order to sort the boxes after the user drag and drop. Material UI Icons and Components. ChromaJS to get the Luminance of each color box and chance the text colors to make it visible. Emoji Picker so the user can select and emoji the add to the Color Palette. Also I've learned to with JSS in React to style the Application and much more.

💻 How to Use

Online

You can use the App in this site: https://color-palettes-react-app.now.sh/

Locally

  • Clone the project: git clone https://github.com/Lukazovic/color-palettes-react-app.git;
  • Go to the project folder: cd color-palettes-react-app;
  • Download the dependencies: npm install;
  • Start the application: npm start.

It will open a browser page (if it doesn't, go to http://localhost:3000).

😍 Pages

Home Page


In this page you will be able to see all the Palettes including the ones you created. Also, here's where you can delete the Palettes.

Palette Page


In this page you can see all the colors in a specific Palette. You can copy the color you want by click in the box and select if you want it in HEX, RGB or RGBA. Also you can make the colors lighter or darker.

Single Color Page


In this page you can see all the shades of a specific color and copy just like the previous one.

Create New Palette Page


This is the page where you can create your Palette. You are able to select the color in a Color Picker and give it a name or even generate Random Colors to get some ideas of colors. You can even organize the color boxes by dragging and drop them in the place you want.

After select the colors you want in your pallete and how they are organized, you can choose a Name and an Emoji to your Palette.

🤔 How to Contribute

  • Fork this repository;
  • Create your branch with your feature: git checkout -b my-feature;
  • Commit your feature: git commit -m 'feat: My new feature';
  • Push to your branch: git push origin my-feature.

Then merge your pull request, you can now delete your branch

📝 Author


Lucas Vieira