In a previous post I committed to building 12 products in 12 months.
Well, after a very busy 30 days... I’ve completed my first product!!!

Scratching my own itch with ColorBin

I work full-time as a frontend web dev during the day. I regularly copy/paste color codes around on my Mac during development.

Quite often I don’t know exactly what I’m copying until I paste it into my IDE of choice (currently VS Code).

I do this 100's of times a day and over the course of the day I’ll inevitably get one of these outcomes:

❌ Paste the wrong color code
❌ Paste the right color code without any visual confirmation eg:
#601ac9 πŸ‘€ what color is that?

❌ paste in some random text or code snippet instead of a color code
- causing my debugger to light up bright red (the joys of coding with react) and having to fix it before continuing work.


What is ColorBin?

ColorBin is a beautiful little app that lives in your Mac’s menubar. It only does one thing, but it does it well:

It gives you a place to store color values straight from your clipboard.
My first attempt at Neumorphic UI πŸ€“

Easily copy your color (Rgba, Rgb, Hsl, Hex) from your application of choice and then click on the β€˜+’ button in ColorBin to save this color for later.

The panel will light up displaying your color so you can easily identify it at a glance.

That feeling when a product comes together... πŸ˜‚

Then when you’re ready to use that color again, all you have to do is click on the 'copy to clip board' button and you’re ready to paste it into your IDE or design program of choice!


I'll have to put more thought into my sketches for future challenges 😬

I sketched up a rough plan of how I imagined the drop down should be laid out. Lately a few really nice Neumorphic Ui designs have popped up in my instagram feed.

Given that anyone using ColorBin is likely a frontend web developer or designer I decide that the extra effort adding a Neumorphic Ui will be worth it.


We've all been here 😫

I won't bore you with all the details but challenges pop up in every project. So I think it's worth mentioning what I came up against with ColorBin.

  • Implementing React within an Electron App.
  • Validating that input from the clipboard is actually a valid color code.
  • Dynamically changing the color of text depending on the background color so it stays readable.

Code Signing.... 🀬🀬🀬

Code Signing an Electron app nearly broke me...

What a hellish experience this was... I came so close to throwing in the towel so many times. It just wouldn't work. Why does Apple hate me?!? I've bought all their products... why won't they sign me!!??!?! ARRRRRRRRRRRGH

This part of the project is where I encountered the most resistance to keep going. But finally FINALLY I cracked it!

We did it fam πŸ’ͺ

I could finally upload my app to GumRoad, build out my landing page and ready my self for launch.

πŸ’° Expenses

I'll come back and update this over the course of the year if anything changes... but so far from idea to product ready for sale:

Domain Name: $19.20AUD ($12.89US)
Hosting: Free thanks to Netlify
Regex help from Fiverr: $7.70AUD ($5US)
Apple Developer License (for code signing): $149AUD ($99US)

Total: $175.90AUD Β ($118.11US - yikes!)

I'll be able to share the cost of the Apple developer license over future apps so it's not as bad as it seems - but still a hefty expense for a single product pre revenue. Β 

😘 References, Tools & Credits

It was a big month, I'm really happy with how the product turned out but I couldn't have done it without the help of these resources:

Great free icons: Flat Icons
Beautiful free patterns: Hero Patterns
Javascript help: getContrast.js
Free hosting: Netlify
Regex help: Fiverr
Payment Processor of choice: GumRoad

πŸš€ Launch Results... (coming soon)

I'll update this post and tweet after 1 week with the results πŸ™‚

Checkout it out:

If you've made it this far thanks for taking the time and I hope you enjoyed the post!

Feel free to follow me on Twitter for more regular updates as the challenge continues :)