/colorshare-react-app

🎨 A straightforward React project designed to simplify the process of sharing and managing color codes. This application allows users to easily pick, save, and share color codes in various formats.

Primary LanguageJavaScriptMIT LicenseMIT

🎨 ColorShare

A simple and intuitive React project for sharing, saving, and managing color codes. ColorShare lets users easily work with color codes in various formats like HEX, RGB, and HSL, making it an essential tool for designers, developers, and color enthusiasts.

🚀 Features

  • Pick Colors: Use the integrated color picker to select colors and instantly view them in HEX, RGB, and HSL formats.
  • Save & Share: Save favorite colors to a personal collection and share them through a unique link.
  • Format Conversion: Seamlessly convert between HEX, RGB, and HSL color formats.
  • Copy to Clipboard: Quickly copy color codes to the clipboard for convenient use in other projects.
  • Dark Mode Support: Experience the app in light or dark mode, with your preference saved in local storage.

🎯 Live Demo

Check out the live demo here

📦 Installation

  1. Clone the Repository:

    git clone https://github.com/CodeskStudio/colorshare-react-app.git
cd colorshare-react-app

  2. Install Dependencies:

    npm install

  3. Run the App:

    npm run dev

  4. Open http://localhost:5173 to view the app in your browser.

🛠️ Usage

  1. Choose a color using the color picker or enter a specific color code.
  2. View the color code in multiple formats (HEX, RGB, HSL).
  3. Save colors to your collection for quick reference and reuse.
  4. Share saved colors with others using a generated link.
  5. Use the Dark Mode Toggle for an optimized viewing experience.

📁 Project Structure

Here's a brief overview of the project structure:

colorshare/
├── src/
│   ├── components/
│   │   ├── ColorCode.jsx
│   │   ├── ColorPicker.jsx
│   │   ├── DarkModeToggle.jsx
│   │   ├── Footer.jsx
│   │   ├── SavedColors.jsx
│   ├── utils/
│   │   ├── colorUtils.js
│   ├── App.jsx
│   ├── index.css
│   └── index.js
└── tailwind.config.js

🧪 Testing

To run tests, use the following command:

npm test

🤝 Contributing

We welcome contributions! To contribute:

  1. Fork the repository.
  2. Create a new branch: git checkout -b feature-branch-name.
  3. Make your changes and commit: git commit -m 'Add some feature'.
  4. Push to the branch: git push origin feature-branch-name.
  5. Open a pull request.

📜 License

This project is licensed under the MIT License.

📝 Acknowledgments

Special thanks to the contributors (aka. ChatGPT) and libraries that helped make this project possible, including react-colorful for the color picker, color-namer for naming color codes, react-hot-toast for notifications, and Tailwind CSS for styling.