Forem: Sergey Bunas

How I made a GPT-3 Chrome Extension and earned $1143 in 2 weeks

Sergey Bunas — Thu, 02 Feb 2023 13:20:40 +0000

Hey! My name is Sergey Bunas, and in this article I will tell about my experience of building a side-project that was created in 1 day, went viral on Twitter and earned $1143 in 2 weeks.

Replai.so is a GPT-3 Chrome browser extension that generates human-like Twitter replies in seconds to help users grow their audience.

Replai's interface + example of a reply in "Joke" tone

Idea

My fellow hustler friend had experience in creating courses on the growing an audience on Twitter, he knew what hurts the people trying to grow their audience on Twitter from 0.

Pain: One of the main ways to grow your audience on Twitter is to reply to tweets from more famous people. In order for this method to bring results, certain conditions must be met:

Consistency - audience growth on Twitter is a long game, it is very important to respond to at least 5-10 tweets every day.
Speed - you need to be among the first to respond to a tweet, otherwise your answer will drown and no one will notice it.
Creativity - the answer should be in the context of a discussion, also it should contain an emotion.

Solution: With Replai.so, you can generate human-like replies to tweets with a single button.

We use GPT-3 to reply to tweets, and with the help of the Chrome extension we embed it into the Twitter page, reducing friction (no need to go to another site, copy-paste the Tweet and reply)

Code

I've created the first version of the extension in 4 hours.
I immediately submitted it to the Chrome Web Store for review. After 3 days, our extension was approved and published to the public store.

The extension has two main parts:

Extension Frontend

Single javascript file that contains logic of: detecting wether it's the Twitter page, inserting buttons into the Tweeter text field, when you click on the button we send the original tweet (need to find it in the page) and tone of response to the server, insert the response from the server into the text field (emulating paste event).

Backend

Simple node.js server hosted on heroku which contains: logic for creating GPT-3 prompts depending on the tone in which you want to reply, REST calls to the OpenAI GPT-3 API, API keys, analytics, payment verification.

The first version of the product did not have a paywall and a limit on the number of replays, we wanted to test the hypothesis as quickly as possible and let users touch the product.

Viral Launch

When the extension became available in the store, my friend wrote a tweet with an example of using the extension, the tweet went viral and gained 95k views, 140 retweets and attracted the first 400-500 users to us.

We continued to write under the hashtag #buildinpublic about the progress of the product, about experience, insights and mistakes. These tweets gained views, increased awareness, and later word of mouth appeared.

We was featured in various Twitter/AI/Productivity collections. And received great comments from our users

After 4 days, we saw that the bills for requests in OpenAI reached $6 dollars a day, we had 500 people download our extension at that point. We decided to create a pay-wall and to be quick with the payments we decided to use Gumroad. We created a landing page using site-builder and added payments to the extension

Pricing with different reply limits.

2 weeks passed after the time that we've added payments. In 2 weeks we reached the following milestones:

Paying customers = 29
MRR = $291
Revenue = $1,143
Followers on Twitter = 643

Conclusion

ChatGPT/GPT-3 provides significant benefits: it's easy to integrate, it's cheap, and it creates amazing value for customers (if done right).

Chrome Extension provides embedding into the user's already developed habits, allowing you to significantly increase retention.

By combining these technologies, you will have fantastic opportunities to create new products!

We launched on Product Hunt 🎉

Sergey Bunas — Thu, 07 Apr 2022 10:26:21 +0000

Hey everyone after a year of hard work on our product in the team of two people, we're happy to announce Product Hunt launch of our product

Stage is UI/UX design & prototyping tool for non-designers, that helps people without designing experience to design beautiful and efficient mobile apps!

This launch is important to us. Please share some support by upvoting or writing a comment!

https://www.producthunt.com/posts/stage-68f97f54-452c-4867-9127-8f590553c181

How to Design an App: Step-by-Step Guide for Non-Designers

Sergey Bunas — Thu, 24 Mar 2022 16:48:57 +0000

Have you ever wanted to design an app but had no idea where to start? Whether you're an entrepreneur, project manager, or just a curious individual, this article will show you how to design an app even if you don’t have any design experience.

Why not just hire a designer?

Finding and hiring a decent designer is really hard, designers are expensive. It’s not just the cost of hiring a designer, it’s the time and effort to find one that’s a good fit for your project.

Furthermore, you will have to explain your vision and idea to the designer and you will end up with a lot of iterations before you get what you want. Most importantly, you don't want to spend all your money on a design that may not work in the end.

So why not do it by yourself? In fact, you don’t need to be a designer to deliver high-quality mockups for your app.

Defining your app's purpose

Before you design an app, it’s important to define its purpose.

What features would it have?
What problem does your app solve?
What are the main tasks that users will be able to perform?

Think about the answers to these questions, as they determine which design elements you will use and how users will interact with your application.

Wireframing your app

Wireframing is the process of creating a low fidelity (rough) version of an app. The idea is to create a visual map of the layout and functionality of the final product. When the wireframe is complete, you can then start adding visual elements and functionality without having to worry about whether those elements will work together.

You can use wireframes to visualize the flow of content, identify patterns and inconsistencies in your design, and make decisions about the direction of your product.

A wireframe of an app usually consists of two main components: user flow, screens layout.

User flow - How your user flow will look like? How many screens there will be, what will they be responsible for? How the user will navigate between them?
Screen layout - What elements will these screens consist of? The key aim here is to define the best spot for different elements: for example, what should be placed on top of the screen or what is the best area for video content?

Wireframing at Stage

Find inspiration

It’s always difficult to start from scratch, it can be more convenient to begin your design journey by looking at what others have created.

Find inspiration for your future app by browsing through App Store or Google Play in a similar category and see if you find anything useful or interesting. Look for similarities in design and functionality that might give you some ideas on where to start with yours.

Taking screenshots of your favorite screens and UI elements as references will definitely help you when you start building your own app.

Mobbin Design — Comprehensive curated library of mobile interfaces
Behance — The world's largest creative network for showcasing and discovering creative work
Dribbble — A self-promotion and social networking platform for digital designers and creatives

Take advantage of pre-made design systems

All mobile apps consist of the same interface elements. There is no need to reinvent the wheel every time you start a new project.

Design systems save time by including all of the elements needed for app design in one package: blocks, elements, product cards (layouts with placeholders for content like images or text), navigation bars, home screens with buttons or menus, and so on.

E-commerce design system at Stage

Take advantage of ready-made design systems that contain all the components you need and combine them into a perfect-looking design.

Make the first version of your design

The whole point of the design process is to make mistakes and learn from them. You will be surprised by how different your initial idea can be from the final result after several iterations, so start working on your application as soon as possible.

Don't come up with an ideal picture but just get started.

Turn your design into a prototype and get feedback

Once you have a design for your app, it’s time to create a prototype. At this stage, you want to make sure that the flow of your app is correct and that your design matches the purpose of your project.

Making a prototype also helps you get feedback from others who may not be tech-savvy. When presenting your ideas in person or using video, it can be difficult for people to give advice on what works and what doesn't without some type of visual representation.

Prototyping at Stage

Show a prototype to different people and ask them what they think about it. If they can use the app without any problems, then you know that you have done a good job with the design of the app.

Conclusion

Designing an app might seem daunting, but it doesn't have to be. In this article, we talk about the basics of design and how to make your idea a reality. You don’t need any background in design - just creativity! There are also plenty of tools that can help this process- we will tell you more about them in our next article!

This blog post was originally published on Stage.