How To Make Money Developing React Components
TL;DR — Developers spend a huge amount of time learning new technical skills, and not enough time learning how to make money themselves. So they’re stuck in the hamster wheel of finding, getting, and having a job (a.k.a. one source of income). In this article, I’m going to show you how I open-sourced a cool React component that records audio from the browser, and then in Part II (please note: not complete yet) I’ll show you how I make money from its enhanced version that solves a big problem.
(DISCLAIMER: The following article is meant to share with you my experience of how I adopted a “fremium” model to open source development. So throughout the article, I need to share with you what I actually sell.)
The Background Story
A while ago, I developed a Web-based audio recorder that’s built with React and its awesome ecosystem of libraries. The goal was to create an app that could run on any device on the planet, both mobile and desktop. The app is called Voice Record Pro, and it’s a “no-install” app. Meaning users don’t have to go to the App Store or Google Play Store to download it. It’s just a web link away.
While I was developing the app, I needed a React component that could record a user’s voice from a Web browser. I also wanted to display a cool visualization that synchronized with the user’s voice.
I couldn’t find a simple plug-n-play React component that did this, so I created one and published it on NPM. The free component is called React-Mic. It’s super easy to use and it gets hundreds of downloads per week.
The React-Mic Component
Like I said, React-Mic is super easy to use since it’s just a component you drop into your React app. It uses the getUserMedia() Web API to get access to the audio stream from a users’s device after permission has been granted.
It passes that audio stream to the Web Audio API, and then paints a visualization onto an HTML5 <canvas> element.
To save an audio stream that’s been captured into a format that can be played back, I use the MediaRecorder API which is literally one line of code. It simply takes the captured media stream and creates a WebM audio file that users can play back.
Stitching together these various Web APIs didn’t require a lot of code. So all I did was package everything up as a React component, added a demo and a README, and published the component on NPM.
To my surprise, people discovered the component and then started asking for new features (I really wasn’t expecting that). Over time, I realized a specific request was being made over and over again and this helped me discover a pain point that needed to be addressed.
You Need To Solve A Problem
Because React-Mic uses the super simple MediaRecorder API, it saves audio using the open-sourced WebM format. This happens to be a major limitation because the WebM audio format isn’t supported by Apple. This means any app you create with React-Mic won’t run in Safari on either iOS or desktop.
On the desktop, not supporting Safari isn’t a huge problem. That’s because Chrome dominates the browser market on desktop.
But if you’re trying to create a no-install Web application that renders on every device (both mobile and desktop), not supporting Safari means your app won’t run on Iphone.
Not supporting iOS/Iphone is a huge, huge problem. Especially in a country like the US where half the population has an Iphone.
So I was getting a lot of requests from users of the open-source React-Mic component to support other audio compression formats like WAV.
Based on that feedback, I created an enhanced (and paid) version called React-Mic-Plus that lets you record audio from any browser on any device. And it supports two cool visualizations to boot.
The React-Mic-Plus Component
Based on the overwhelming feedback I was getting on my Github page for React-Mic, and based on my own experience trying to get people to use my no-install app on their Iphones, I created the enhanced version of React-Mic called React-Mic-Plus.
React-Mic-Plus does everything React-Mic does, it just saves audio as a WAV file. This means the component can record audio (and display a cool visualization) on every device.
Think about this. Now you can create voice-activated Web applications, using the insanely popular React.js, that run in *all* major browsers and platforms (including iOS and Android). And you don’t have to develop and deploy a native mobile application for both Iphone and Android. Just create a responsive web application.
One codebase, every device.
React-Mic-Plus was a very time consuming component for me to make. So I decided to ask others to make a contribution if they want to use it.
But how do you package up an NPM component that you can then distribute and sell? After all, NPM is a platform for sharing free code. It doesn’t let open source developers monetize off of their hard work.
Get Paid For Your Work
First off, I want to say that I love open source development and the open-source community at large. I’ve benefitted immensely, and I create free code all the time.
But over time, I realized I was putting in a lot of effort satisfying people’s requests for new features and demands for quick updates. That’s what happens when you start releasing free code that people use. They want you addressing their requests all the time.
So I was working full time, and then I’d come home and write more code to satisfy the community at large. I had to continuously release updates and then coordinate and communicate with others on Github.
It takes a lot of time.
Ultimately, I realized that it wasn’t fair to my body to work for free all the time. Seriously, I’d rather go out in nature than sit in front of a laptop all day.
So I came up with the following logic. If I create a component that’s a few lines of code that does something useful, and it didn’t take that much time to write, then I give it out for free. But if I spend months trying to get something to work, and it solves a problem, then I’m going to ask for money.
And you can too. After all, we have bills to pay.
The formula goes something like this. Create something cool and useful, and make it easy for another person to consume (like a drop-in React component). Then, as time goes by, listen to your audience’s requests for new enhancements and features and figure out the common pain points and feature requests.
Once you realize a serious pain point, address the paint point and create an “upgrade”, or enhanced paid version of your component.