Forem: Gabe Ragland

How my dev tool did $16,285 in sales last month

Gabe Ragland — Tue, 23 Feb 2021 20:37:36 +0000

Hey Dev.to community,

I thought I'd share my experience launching my dev tool (divjoy.com) on Product Hunt last month. It ended up resulting in my best month ever at $16,265 in sales.

For context, I've included a chart below with my entire traffic/sales history, including product milestones. As you can see, the Product Hunt launch led to a large sales spike (~250% higher than the previous month) and this month is shaping up to be around 30% higher than normal.

High-res version

In this post I'm going to talk about how I optimized my launch, what worked, what I would do differently next time, and what's next for Divjoy. Okay, let's get into it 🤘

⚛️ The product

Divjoy is a tool that allows you to generate a custom Node + React codebase with everything you need for your next project like authentication, database, subscription payments, marketing pages, forms, account settings, etc. Everything works out of the box.

Unlike most templates or boilerplates, Divjoy allows you to customize your technical options and template in a low-code editor before downloading your codebase. That means you get exactly what you need, nothing you don't, and you can get right to working on your actual product (you know, the fun part!).

The main feature in this launch was Material UI integration. That meant in addition to supporting the Bulma and Bootstrap CSS frameworks, you could now have your entire front-end built using Material UI.

🤔 Launch planning

Planning an effective Product Hunt launch involves getting together the copy/media you need to make your launch interesting and ensuring you're leveraging any existing audiences or connections to amplify your launch. I highly recommend starting a brainstorm doc at least a month in advance.

There are no shortage of launch checklists on the web, but it's a mistake to think you can just quickly go through a checklist the day before. The devil is in the details. Get a doc up and periodically jot down any ideas you have, ranging from practical to "I'll probably think this is dumb in the morning".

By starting early I was able to ...

Find an awesome designer to do an animated logo for me.
Figure out an unconventional plan for getting hundreds of readers on usehooks.com to support the launch.
Realize I actually needed to increase the scope beyond Material UI if I wanted to call this "Divjoy 2.0". This became obvious as I was planning out my pitch. I ended up pushing back the launch 2 weeks, adding betters docs, a members-only Discord community, and an interactive data component.
Figure out a good launch day pricing strategy. I decided to bump up my price from $99 to $149, but I kept the launch day price at $99 "for the next 24 hours". This ended up working well because.. well FOMO, but it also allowed to me get existing customers to support the launch without them feeling like they overpaid.

🌘 Launch Day (well actually night)

I submitted Divjoy 2.0 to Product Hunt right after midnight (PST) on January 14th. The earlier you submit the more time your product has to climb the rankings before the front page resets.

At this point I was exhausted and hadn't yet written my launch announcements for Twitter and my customer mailing list. I was planning on writing them earlier that day, but it was a push to get everything ready and it somehow slipped my mind. Whoops. About 2 minutes after launching I could see other products climbing up the rankings and Divjoy was dead last. I finally managed to muster enough brain energy to get a tweet out. It wasn't a great tweet, but it did the job. I could see people I knew from Twitter dropping upvotes/comments and I could see Divjoy slowly moving upwards. Okay, time to get some sleep 😴

I woke up the next morning with Divjoy at #5. Wow, much better than expected. The rest of the day was about leveraging my existing audience and connections to keep the momentum going. Here's everything I did:

Emailed all Divjoy customers, letting them know about the new features and asking for their support on the Product Hunt launch.
Emailed a couple hundred Divjoy customers that were on an old yearly plan, letting them know I was upgrading them to a lifetime account for free. Since I had moved entirely to lifetime pricing I was planning on doing this anyway, but waiting until launch day allowed me to channel this good will towards the launch.
Emailed my 7,454 usehooks.com subscribers with a tutorial on how to build a useKonamiCode React hook. In order to see an example of it in action they had to head over to divjoy.com and enter the famous Konami code. A lot of those visitors went on to click the Product Hunt launch announcement at the top of the website.
Made sure to reply to everyone to PH and Twitter. A fun side-effect of the Konami code easter egg was people started tweeting about it, I could retweet those, driving more interest in checking it out, and so on. Lesson: Try something fun/different that helps your launch stand out.

In the end, I managed to make it to the #3 product of the day and I'm really happy with how it turned out. It's hard to say exactly how much all my outreach efforts above helped. I'd guess around a 30% boost? Your success on Product Hunt is mostly going to come down to whether the community finds it interesting. That said, if you have any audience at all, it's worth thinking about how you can engage with them on launch day to give yourself the best chance possible.

I was surprised to see the Product Hunt page continue to drive traffic/sales over the next few weeks, ending the month at $16,265 total, with $10,452 directly attributable to the launch.

😬 What I would do differently next time

My biggest mistake was not preparing my tweet and email content ahead of time. If you're going to launch right after midnight (which I recommend) then you're going to be tired and winging all this isn't the best idea. My outreach spanned most of launch day, when ideally it could have all gone out right after midnight.

🌈 What's next?

So far my strategy has been to spend 90% of my time coding and 10% being active on Twitter, Indie Hackers, etc.. with a big launch announcement every 3-4 months. Basically, spend as much time possible building while doing the minimum to keep sales up. That's what I'm most comfortable with. But my goal for 2021 is to do $100k in sales and that means finding more scalable marketing channels. That means getting my SEO game together, trying out paid advertising, and spending more time looking for affiliate partners. I still have a lot of product improvements planned for 2021, but maybe it will need to be more like 50% coding and 50% marketing. It's time to get comfortable with that.

I hope you found this write-up interesting and that it helps inform your next launch. Feel free to ask me anything in the comments below.

Useful links
🔗 twitter.com/gabe_ragland — follow my startup journey 👀
🔗 divjoy.com?promo=devto — 30% off, valid for next 24 hours 😘

How to create a useKonamiCode React hook 🎮

Gabe Ragland — Fri, 15 Jan 2021 19:26:25 +0000

This hook makes it easy to fire off a function when the visitor enters the Konami Code on their keyboard (↑ ↑ ↓ ↓ ← → ← → B A). Every web app needs a cheat code right? Read through the code comments below to see how it works. Want to try it out? I'm using this hook in production on divjoy.com. Head over there, enter the code, and something amazing will happen. You won't regret it 😻

import React, { useState, useEffect } from 'react';

// Usage
function App(){
  // Call hook with function to fire off  
  // after konami code is entered.
  useKonamiCode(() => {
    alert('Good job 🥳');
  });

  // Render whatever you like
  return (
    <div>
      Can you find the easter egg?
    </div>
  );
}

function useKonamiCode(handler) {
  // State to hold array of recently pressed keys
  const [keys, setKeys] = useState([]);

  // Convert stored keys to string and match against konami code string
  const isKonamiCode = keys.join(' ') === 'up up down down left right left right B A';

  useEffect(() => {
    let timeout;

    // When a key is pressed
    window.document.onkeydown = (e) => {
      // Update array of keys in state with new key
      setKeys((currentKeys) => [...currentKeys, getKeyName(e.keyCode)]);

      // Clear 5s timeout since key was just pressed
      clearTimeout(timeout);

      // Reset keys if 5s passes so user can try again
      timeout = setTimeout(() => setKeys([]), 5000);
    };
  }, []);

  // Once konami code is entered call handler function
  // and reset keys so user can do it again.
  useEffect(() => {
    if (isKonamiCode) {
      handler();
      setKeys([]);
    }
  }, [isKonamiCode, handler]);

  return isKonamiCode;
}

const getKeyName = (keyCode) => {
  return {
    37: 'left',
    38: 'up',
    39: 'right',
    40: 'down',
    65: 'A',
    66: 'B',
  }[keyCode];
};

Now you've got nothing stopping you from adding the Konami Code to your React app. If you do, be sure to share a link in the comments ⤵️

How my dev tool made $10,041 in 4 days

Gabe Ragland — Wed, 15 Jul 2020 18:18:36 +0000

Hey Dev.to community,

I just wanted to share how a recent feature launch for my dev tool (divjoy.com) ended up making $10,041 in 4 days. That's more than its earned in the previous 4 months! What's more, this happened in entirely on Twitter. I'll be talking about some things I learned, pricing insights, as well as tactics for launching on Twitter and keeping the hype going for multiple days. Okay, let's do this ⛷

⚛️ The product

Divjoy is tool that allows you to generate a custom Node + React codebase with everything you need for your next project like authentication, database, subscription payments, marketing pages, forms, account settings, etc. Everything works out of the box.

🤔 Launch planning

The feature I launched was Stripe payments integration. This was a big step for the product because it meant that customers would now be able to export a complete SaaS app. Just export your code, add some environment variables, and you've got a functioning web app with pricing page, Stripe payments flow, customer billing management, webhooks, and everything else you need.

I knew there was a good number of people waiting on this feature, but I really wanted to do everything I could to ensure the launch was a success. Frankly, being a solo-founder is tough and I knew that I needed more than a small uptick in sales from this to keep my enthusiasm and productivity going strong.

After some lively debate between me and my dog (what can I say, this whole pandemic thing is getting to me), I decided to combine the launch with an awesome lifetime deal. For $49 you'd get access to Divjoy for life. That's less then the normal yearly price! Maybe I went a bit overboard on the discount, but I decided it was better to hedge my bets on a successful launch even if it meant leaving money on the table.

In terms of where and how to launch, that honestly didn't require too much planning. My entire audience is on Twitter and I know Twitter well. My plan was to post an announcement tweet in the morning and periodically update the thread throughout the day with product details and launch stats (more on this tactic later).

The last thing I did was add an announcement to the homepage:

And update the pricing section to show the deal:

☀️ Launch day

The launch started with a single tweet on Thursday, July 2nd. Here's a screenshot + some tips for a successful feature launch tweet:

Likes and retweets started rolling in pretty quickly. Basically, my Twitter followers are awesome people and have made every single one of my launches successful. I really wouldn't be anywhere without their support ❤️

The major difference this time was that sales were coming in quickly as well. In past feature launches I might see a couple hundred people hit the website and 5 extra sales that day, but this time I passed 5 sales within the first 20 minutes. And I hadn't even mentioned the deal yet...

A little while later I added a new tweet to the thread, announcing the lifetime deal and some perks.

And sales started coming in even faster and continued at a steady pace over the next 48 hours. I continued to update the thread over the course of the launch, but ending up spending the vast majority of that time answering support questions and giving new customers advice on how to extend their code. It was exhausting and hard to keep up.. but also really validating to see so many people hacking away on product ideas right after purchasing. That's the whole point! A lower barrier to entry means more people building that idea they've always wanted to build.

By the time the deal ended Friday evening it had done $7,448, but I ended up extending through the weekend after waking up to a bunch of messages from people asking if it was too late.

📈The final results

👀 The Twitter thread was viewed 127,384 times
👋 Sending 2,619 people to divjoy.com
💬 Resulting in 46 support chats and 9 screen-share sessions
💸 Driving $10,041 in sales over 4 days

🤗 What worked

I really really did not expect things to go so well and was honestly kind of baffled the whole time. After finally getting some good sleep Sunday night and reflecting on what happened I came up with a few thoughts:

There was pent up demand for Stripe integration. A lot of people waiting to buy Divjoy wanted to build a SaaS product and now they finally could. I think it's also safe to assume that people building paid products are generally more willing to shell out some cash to speed things up.
The lifetime deal made it an easy decision. Use Divjoy once at any point in the future and you've gotten your money's worth. Hell, even if you simply wanted to use it as a reference or see how I handle some specific edge case around auth or payments it's worth the $49.
The members-only community was appealing, even though I only briefly hinted at it in one of my tweets. A good number of customers brought this up and it was clearly a factor in their purchasing decision. People need community now more than ever and I've got big plans for this.
I kept the Twitter hype going. By spacing out tweets in my Twitter thread over 4 days I ensured that it would keep getting bumped to the top of people's newsfeeds. Periodic updates about how the launch was going created a fun story people could follow. Lastly, if someone tweeted about how they grabbed the deal or shared a testimonial I made sure to immediately retweet them. This is free publicity, shows people you appreciate their support, and the more you do it the more it encourages other people to buy and share.

😬 What could have been better

I could have done a better job at showing videos of the product and Stripe integration. After someone asked, I quickly recording a video, but this could have been much better.
I could have launched in more places (like Dev.to, Indie Hackers, and HN). I planned on doing this but never found the time with the sheer number of support requests coming in.
If I had known it would blow up like this I'd have prioritized getting a really good FAQ in before the launch rather than later. Less time answering common questions would have freed me up for more important things.

🌈 What's next?

All in all I'm ecstatic about how the launch went. I was hoping to break $1,000 in sales and ended up doing 10x that. What more can I ask for?

Since the launch I've spent most of my time talking to new customers and learning about what they're building. Over the next month I'm going to be focused on expanding the selection of templates/components, working on an improved onboarding flow, and finally getting my SEO game together.

I hope you found this writeup interesting and that it helps inform your next launch. Feel free to drop any questions you have in the comments below.

Useful links

🔗 divjoy.com?promo=devto (40% off deal for you)
🔗 twitter.com/gabe_ragland

Divjoy in 2019 and what's coming in 2020 🚀

Gabe Ragland — Tue, 21 Jan 2020 19:29:30 +0000

Divjoy is a React codebase and UI generator that saves you weeks of development time when starting a new project.

2019 was a great year for Divjoy. I launched it to the public on Hacker News and had 15k people hit the site and over 5k people export React codebases in a single day. I added support for Next.js and React Bootstrap. I added a bunch of new components to the library based on feedback. I launched again on Product Hunt. I won a $15,000 grant from Startup School to support Divjoy's development. Finally, in order to grow this into a sustainable business, I started charging money for code export. People are paying and the future is looking bright! None of this would have been possible without the many many people who've given me feedback along the way and all the developers and open-source maintainers that have made the React-ecosystem what it is. So thank you all!

🌈 What's in store for 2020:

Stripe integration
I'll be adding Stripe integration so that all the templates have a fully-functional payments flow right out of the box. Divjoy will automatically export all the backend logic needed to charge cards and handle webhooks.
Material UI support
I've gotten a ton of requests for Material UI. Over 500 people are signed up just to be notified when this lands. Rest assured it’s coming!
Gatsby support
Many people have asked for Gatsby support and I'm excited to get it in this year. There's also some interesting potential to integrate with the Gatsby's data and plugin system.
Components, components, components!
I’m going to be focused on expanding the selection of components for the next couple of months. Things like user onboarding flows, accounts settings pages, dashboards, activity feeds, dynamic CRUD interfaces, searchable content lists, and so on. You'll be able to drop any of these into your app using our built-in editor and they'll just work.
Editor improvements
The built-in app editor definitely needs some love this year. The initial version was a bit of a crazy experiment. Could I build a drag and drop React UI builder that also allows direct editing of component code? Well, yes.. kind of, but the reality is most people want to do the code stuff after export. So the plan is to drastically simplify the interface by removing (or at least hiding) the more advanced features and focus on providing a really nice UI over things like component props, global styles, and data fetching.
Single component export
You’ll be able to browse our component library and export single components to drop into an existing codebase. Right now Divjoy is optimized for people who need a full codebase, but I'm going to make it an awesome tool for people who've already started and would like to grab what they need. Imagine being able to grab a <Payments/> component that comes with all the necessary JS and server-side logic needed to make it functional. In less than 5 minutes you should be able to export code from Divjoy and add a new feature to your app.

❤️ How you can help

Help spread the word
If you’ve got friends starting a new React project soon let them know that Divjoy can save them a ton of time.
Send me your feedback
What do you like and dislike about Divjoy? What kind of components and templates would you like to see? I'd love to hear your thoughts and I always appreciate critical feedback.

Have an awesome 2020 🌟

Best,
Gabe

Debouncing with React Hooks

Gabe Ragland — Thu, 17 Jan 2019 19:24:04 +0000

Today I'm going to show you how to build a useDebounce React Hook that makes it super easy to debounce API calls to ensure that they don't execute too frequently. I've also put together a demo that uses our hook. It searches the Marvel Comic API and uses useDebounce to prevent API calls from being fired on every keystroke.

Pretty nifty huh? Okay, now on to the code!

First let's figure out how we want our hook to be used and we can let that guide or actual implementation of the hook logic. Rather than debounce the calling of our API request we're going to design this hook to debounce any value within our component's render function. We're then going to combine this with useEffect to fire off a new API request whenever that input value changes. This code example assumes some familiarity with the useState and useEffect hooks, which you can learn about in the React Hook docs.



import React, { useState, useEffect } from 'react';
import useDebounce from './use-debounce';

// Usage
function App() {
  // State and setter for search term
  const [searchTerm, setSearchTerm] = useState('');
  // State and setter for search results
  const [results, setResults] = useState([]);
  // State for search status (whether there is a pending API request)
  const [isSearching, setIsSearching] = useState(false);

  // Now we call our hook, passing in the current searchTerm value.
  // The hook will only return the latest value (what we passed in) ...
  // ... if it's been more than 500ms since it was last called.
  // Otherwise, it will return the previous value of searchTerm.
  // The goal is to only have the API call fire when user stops typing ...
  // ... so that we aren't hitting our API rapidly.
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  // Here's where the API call happens
  // We use useEffect since this is an asynchronous action
  useEffect(
    () => {
      // Make sure we have a value (user has entered something in input)
      if (debouncedSearchTerm) {
        // Set isSearching state
        setIsSearching(true);
        // Fire off our API call
        searchCharacters(debouncedSearchTerm).then(results => {
          // Set back to false since request finished
          setIsSearching(false);
          // Set results state
          setResults(results);
        });
      } else {
        setResults([]);
      }
    },
    // This is the useEffect input array
    // Our useEffect function will only execute if this value changes ...
    // ... and thanks to our hook it will only change if the original ...
    // value (searchTerm) hasn't changed for more than 500ms.
    [debouncedSearchTerm]
  );

  // Pretty standard UI with search input and results
  return (
    <div>
      <input
        placeholder="Search Marvel Comics"
        onChange={e => setSearchTerm(e.target.value)}
      />

      {isSearching && <div>Searching ...</div>}

      {results.map(result => (
        <div key={result.id}>
          <h4>{result.title}</h4>
          <img
            src={`${result.thumbnail.path}/portrait_incredible.${
              result.thumbnail.extension
            }`}
          />
        </div>
      ))}
    </div>
  );
}

// API search function
function searchCharacters(search) {
  const apiKey = 'f9dfb1e8d466d36c27850bedd2047687';
  const queryString `apikey=${apiKey}&titleStartsWith=${search}`;
  return fetch(
    `https://gateway.marvel.com/v1/public/comics?${queryString}`,
    {
      method: 'GET'
    }
  )
    .then(r => r.json())
    .then(r => r.data.results)
    .catch(error => {
      console.error(error);
      return [];
    });
}

Okay, so that looks pretty good! Now let's build the actual hook so that our app works.



import React, { useState, useEffect } from 'react';

// Our hook
export default function useDebounce(value, delay) {
  // State and setters for debounced value
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(
    () => {
      // Set debouncedValue to value (passed in) after the specified delay
      const handler = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);

      // Return a cleanup function that will be called every time ...
      // ... useEffect is re-called. useEffect will only be re-called ...
      // ... if value changes (see the inputs array below). 
      // This is how we prevent debouncedValue from changing if value is ...
      // ... changed within the delay period. Timeout gets cleared and restarted.
      // To put it in context, if the user is typing within our app's ...
      // ... search box, we don't want the debouncedValue to update until ...
      // ... they've stopped typing for more than 500ms.
      return () => {
        clearTimeout(handler);
      };
    },
    // Only re-call effect if value changes
    // You could also add the "delay" var to inputs array if you ...
    // ... need to be able to change that dynamically.
    [value] 
  );

  return debouncedValue;
}

And there you have it! We now have a debounce hook that we can use to debounce any value right in the body of our component. Debounced values can then be included in useEffect's input array, instead of the non-debounced values, to limit the frequency of that effect being called.

Also check out my React codebase generator. It will give you a nice UI, auth, database, payments and more. Thousands of React devs use it to build and launch apps quickly.