3 Ideas for Web Apps to Generate Passive Income as a Junior Dev
Tags: webdev, javascript, sideprojects, react
Published: 2021-03-30 07:41:09

Most people understand the value of passive income. Some are more vocal about it than others, but in general, there's a consensus that an additional revenue stream that requires minimal effort to maintain is a desirable thing. Yet there's some initial resistance to generating passive income among developers who could and would like to make money on apps. Reading between the lines, I've noticed a few types of concerns that hinder junior (but not only) devs in pursuing their monetization goals.
> “I want to make money on apps, but I don’t have any app ideas.” 

> “What if time and energy invested in coding never pay off?"

> “Will I manage to build a fully working app as a beginner?” 

> “I’m a pretty good developer with terrible design skills.” 
(Some even say they're good developers BECAUSE of their poor design skills, but @sarah_edo debunked this myth long ago 😉)

Well, let’s make a deal. We, the LiveChat Platform, will suggest a few app ideas – not just some random ones – but the ones based on feature requests. What's more, all these ideas will be junior-developer-friendly. We'll also show you how to get started in our Developer Console and link the most useful resources so that you don’t get lost in the documentation jungle. Things will get even more exciting once you publish your app on the Marketplace. After your first sale, we’ll sweeten it up with some extra money to kick start your app monetization journey. 

Let’s sum up. You get:

✓ An app idea based on a feature request, possible to implemented by a junior developer
✓ Onboarding in the LiveChat Developer Console
✓ Guides, tutorials, videos that will help you build the app
✓ A set of ready-to-use components aka LiveChat Design System
✓ Extra $50, $75, or $100 to reward your effort after your first sale

What we need from you is **motivation** and **intermediate coding skills**. 

If that's something you might be up for, keep on reading.

## Wait, but what is the LiveChat Platform?

Skipping the introduction was rude. Let me fix that.

<a rel="noopener noreferrer" href="https://www.livechat.com/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">LiveChat</a> is an online customer service software with live support, help desk software, and web analytics capabilities. It's used by more than 31,000 companies all over the world.

The <a href="https://developers.livechat.com/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">LiveChat Platform</a> is where developers come in. The Platform is a range of products and services that can be used to build a variety of communication tools for businesses. Our <a href="https://developers.livechat.com/developer-program/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">Developer Program</a> and <a href="https://www.livechat.com/marketplace/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">Marketplace</a> create an open ecosystem for developers, partners, and customers.

![livechat-platform-chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvlfi7goiw0kkabad91t.png) 

## Onboarding in the Developer Console

Developer Console is a place where developers create new applications (also called integrations), manage them, submit them for review, keep track of the income, and many more. 

Following these 4 steps will help you get onboarded in the new environment:

  1. [Sign up](#1-sign-up-to-developer-console)
  2. [Create an app](#2-create-an-app)
  3. [Discover building blocks](#3-discover-building-blocks)
  4. [Play with sample apps](#4-play-with-sample-apps)

### 1. Sign up to Developer Console
Start off by creating a free account in <a href="https://developers.livechat.com/console/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">Developer Console</a>.

### 2. Create an app
While theory is important, learning through practice is more effective. Get to know our Developer Console by creating a sample app, just for the sake of training. 

#### Follow the App Wizard

For those who prefer interactive tutorials rather than static instructions, the best choice is to log in to Developer Console and start the App Wizard, our follow-along guide. It will take you through the creation process of an Agent App widget. It's the most commonly built type of integration displayed in the Details section of the LiveChat App. 👇 

![customer-details-initial-state-livechat 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdx5cz1pu0zyezeysepb.png) 

#### See also

📖 <a href="https://developers.livechat.com/docs/extending-agent-app/agent-app-sdk/#before-you-start/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">A written tutorial on how to create a basic app in Developer Console</a>

🎥 <a href="https://developers.livechat.com/docs/getting-started/livechat-apps/#building-apps-webinar/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">Building apps 101 webinar</a>

### 3. Discover building blocks

After entering Developer Console, you'll quickly notice various types of so-called _building blocks_. They allow you to configure different functionalities of your applications, for example, app location, app authorization, or webhooks.

📖 <a href="https://developers.livechat.com/docs/getting-started/app-guides/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">Read more about particular building blocks.</a>

### 4. Play with sample apps

Use one of our sample apps to experiment with building blocks or to look up the code. 

🔌 <a href="https://github.com/livechat/sample-apps/">Samples apps on GitHub</a>

These examples serve as a great reference as they implement **authorization** and **data fetching**.

## Design System

Regardless of how advanced your design skills are, we encourage you to build LiveChat integrations using our Design System. 

It contains a wide variety of React components, such as buttons, toasts, dropdowns, tooltips. They're all already in line with the LiveChat look & feel, which will make your app integrate seamlessly with the LiveChat App UI.

🎨 <a href="https://developers.livechat.com/docs/design-system/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">Design System</a>

Take a look at this simple UI built entirely with Design System components. Feel free to use it as a boilerplate or reference.

{% codesandbox form-kz2lw %}

It's worth pointing out that aligning with our visual guidelines will help you go through the app review process more smoothly. 

## Ideas

Since you already know a lot about _how_, now, let's discuss _what_ and _why_. Below, you'll find 3 ideas we would like you to turn into apps. To each idea, I added some business context and mentioned what parts of the LiveChat Development Kit you can use to build them. 

### UTM Builder 
A widget that allows for the quick creation of UTM-enabled links. Despite being uncomplicated function-wise, such an app would speed up the manual process of adding UTMs to links, increasing agents' efficiency at work.

💻 Development Kit:
 - <a href="https://developers.livechat.com/docs/getting-started/app-guides/agent-app-widgets/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">Agent App Widgets</a> 
 - <a href="https://developers.livechat.com/docs/authorization/sign-in-with-livechat/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">Sign in with LiveChat</a> 

💸 Bonus money: $50

### URL shortener [already done] 
An easy-to-use widget that would allow agents to shorten lengthy URLs, just as bit.ly does it. Long URLs can look suspicious and unprofessional, while the short ones are way more user-friendly and elegant. Being able to quickly shorten a link without leaving the chat context is a huge advantage for each busy agent. 

💻 Development Kit:
 - <a href="https://developers.livechat.com/docs/getting-started/app-guides/agent-app-widgets/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">Agent App Widgets</a> 
 - <a href="https://developers.livechat.com/docs/authorization/sign-in-with-livechat/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">Sign in with LiveChat</a> 

💸 Bonus money: $75

### Web Status [already done]
An app for displaying the status of a website and sharing it with customers in the chat. When something breaks down and there's a server error, agents will be able to send to customers visually appealing messages informing them about the current page status. 

💻 Development Kit:
 - <a href="https://developers.livechat.com/docs/getting-started/app-guides/agent-app-widgets/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">Agent App Widgets</a> 
 - <a href="https://developers.livechat.com/docs/extending-chat-widget/chat-widget-moments/#sample-use-cases/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">Chat Widget Moments</a> 

💸 Bonus money: $100

## App review & monetization

Once you finish app development, you need to submit it for review which consists of three parts: functionality tests, design review, and copy review (app description on the Marketplace). You can read more about the app review process <a href="https://developers.livechat.com/docs/monetization/app-review-process/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">in this document</a>.

After passing the review, you'll be able to publish your app on the LiveChat Marketplace and start earning money from it. LiveChat takes a 20% commission from each sale.

As we mentioned before, if you implement one of the ideas presented in this article, we'll give you some extra money after your first sale (how much exactly is specified in the [Ideas](#ideas) section).

📖 <a href="https://developers.livechat.com/docs/monetization/how-to-monetize-apps/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">Read about monetization rules</a>

## Resources

Our <a href="https://developers.livechat.com/docs/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">documentation</a> is a treasure trove, but we handpicked the most valuable and relevant resources to ease you into the LiveChat Platform. Feel free to discover more on your own.

- <a href="https://developers.livechat.com/docs/getting-started/livechat-apps/#building-apps-webinar/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">Building LiveChat apps 101 webinar</a>
- <a href="https://www.youtube.com/watch?v=FDmLqEiCH60/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">Live coding session: Web app authorization</a>
- <a href="https://developers.livechat.com/docs/extending-agent-app/agent-app-sdk/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">Agent App SDK</a>
- <a href="https://developers.livechat.com/docs/authorization/sign-in-with-livechat/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">Sign in with LiveChat</a> 
- <a href="https://developers.livechat.com/docs/extending-chat-widget/chat-widget-moments/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner">Chat Widget Moments</a>  

Last but not least, consider joining our Discord for Developers. It's a community of developers gathered around [the LiveChat Platform](https://developers.livechat.com/developer-program/?utm_source=dev.to&utm_medium=referral&utm_campaign=3-ideas-for-web-apps-to-generate-passive-income-as-a-beginner); a place where you can seek advice, exchange ideas, and hang out with fellow devs. If you need more info about those app ideas or the Platform in general, feel free to contact us at developers@livechat.com or on Discord.

👉 <a href="https://discord.gg/gRzwSaCxg4">Join Discord</a> 👈