30+ app ideas with complete source code

This is an exciting time for technological advancements.

As developers, all of us need to work on side projects that can either generate revenue or help build our reputation.

Today, we'll cover 10 exciting projects and discover 3-4 popular apps that are built using each project. That's over 30 projects in total, with code access for you to learn from.

These will have you coding for awhile, so let's get started!

1. CopilotKit - AI Copilots for your product in hours.

Image description

Integrating AI features in React is tough, that's where Copilot comes into the picture. A simple and fast solution to integrate production-ready Copilots into any product!

You can integrate key AI features into React apps using two React components. They also provide built-in (fully-customizable) Copilot-native UX components like <CopilotKit />, <CopilotPopup />, <CopilotSidebar />, <CopilotTextarea />.

Get started with the following npm command.

Loading plain text code...

Copilot Portal is one of the components provided with CopilotKit which is an in-app AI chatbot that can see the current app state and take action inside your app. It communicates with the app frontend and backend, as well as 3rd party services via plugins.

This is how you can integrate a Chatbot.

A CopilotKit must wrap all components which interact with CopilotKit. It’s recommended you also get started with CopilotSidebar (you can swap to a different UI provider later).

Loading plain text code...

You can set up Copilot Backend endpoints using this quickstart quide.

After this, you can let Copilot take action. You can read on how to provide external context. You can do so using useMakeCopilotReadable and useMakeCopilotDocumentReadable react hooks.

Loading javascript code...

You can read the docs and check the demo video.

You can integrate Vercel AI SDK, OpenAI APIs, Langchain, and other LLM providers with ease. You can follow this guide to integrate a chatbot into your application.

The basic idea is to build AI Chatbots in minutes that can be useful for LLM-based applications.

The use cases are huge, and as developers, we should definitely try to use CopilotKit in our next project.

CopilotKit has 4.2k+ Stars on GitHub with 200+ releases meaning they're constantly improving.

Image description

Star CopilotKit ⭐️

🎯 Popular Apps built with CopilotKit.

We can build lots of innovative apps with CopilotKit, so let's explore a few that stand out!

✅ AI-powered blogging platform.

blogging platform

You can read this article using Next.js, Langchain, Supabase, and CopilotKit to build this amazing app.

LangChain & Tavily is used for a web-searching AI agent, Supabase for storing and retrieving the blogging platform article data while CopilotKit is used for integration of the AI into the app.

You can check the GitHub Repository.

✅ Text to Powerpoint app.

You can read this article using Next.js, OpenAI, and CopilotKit to build a Text to Powerpoint app.

You can check the GitHub Repository.

✅ V0.dev clone.

If you're not familiar, V0 by Vercel is an AI-powered tool that lets you generate UI based on prompts, along with a host of other useful features.

You can use Next.js, GPT4, and CopilotKit to create a clone of V0. This article was featured in the Top 7, and overall it's a great project to add to your portfolio.

You can check the GitHub Repository.

✅ Chat with your resume.

You can read this article using Next.js, OpenAI, and CopilotKit to build this awesome tool.

Not only you can generate your resume with ChatGPT, but you can export it into PDF and even improve it further by having a conversation with it. How cool, right :)

You can check the GitHub Repository.

2. Appwrite - Your backend minus the hassle.

list of sdks with appwrite

Appwrite's open source platform lets you add Auth, DBs, Functions, and Storage to your product & build any application at any scale, own your data, and use your preferred coding languages and tools.

A similar option is supabase, but despite their similarities, they are very different in several areas. Restack covers the Appwrite versus Supabase very beautifully. Check it out!

They have great contributing guidelines and even go to the trouble of explaining architecture in detail.

Get started with the following npm command.

Loading plain text code...

You can create a login component like this.

Loading javascript code...

You can read the docs.

Appwrite makes it very easy to build scalable backend applications with extended features out of the box.

Appwrite's recent launch of "Init" released some exciting features. I'm not up to 100% mark on what are the things that we can do with init, so do comment to let us know more.

It has some cool features and would be useful to take our apps to the next level. Curiosity overload :D

I'm glad it could be connected to Twilio, Vonage, and Mailgun. More options mean better products.

Appwrite has 40k+ Stars on GitHub and is on the v1.5 release.

Star Appwrite ⭐️

🎯 Popular Apps built with Appwrite.

Appwrite is very popular especially due to its ease of use. These are some of the cool projects that you can take inspiration from.

✅ FoodMagic - Augmented Reality Food app.

food magic

FoodMagic is a unique take on food delivery using augmented reality and stunning UI.

It's built using Appwrite and Flutter.

Appwrite functions, database, storage, and more concepts are involved so you can learn a lot using this.

You can check the GitHub Repository.

✅ Repo rater.

This project allows you to rate GitHub Repositories from the Developer Experience (DX) perspective.

It's built using Appwrite, Headless UI (React), Next.js, and Tailwind CSS.

You can check the GitHub Repository and see the live working.

✅ Twitter Clone - FreeCodeCamp (YouTube).

It has various features such as signing up and signing in with email and password, tweeting text, images, and links, identifying and storing hashtags, displaying tweets, liking tweets, retweeting, commenting/replying, following users, searching for users, displaying followers, following, and recent tweets, editing user profiles, showing tweets with specific hashtags, and a premium feature called "Twitter Blue".

The instructor has also implemented a notifications tab that will show notifications when someone replies to you, follows you, likes your tweet, or retweets. By the end of this tutorial, you'll have a fully functional Twitter clone that you can further customize and improve upon. Meaning everything :)

He has used Flutter, Appwrite, and Riverpod and the tutorial is over 9 hours so it's a very long one.

✅ Dart Online Compiler

dart compiler

An app where user can write and run small dart programs without installing dart SDK in their system. This app uses Appwrite functions to run the dart code.

It's built using Appwrite, and Flutter.

This has used Appwrite Auth, Functions, and Database for the working.

You can check the GitHub Repository.

3. Resend - Email API for developers.

You can build and send emails using React. One of the most hyped products of 2023.

They provide a lot of SDK options so you don't have to switch from your preferred tech stack.

Resend is very trusted and a lot of companies like Payload and Dub use it. You can see the list of customers.

Get started with the following npm command.

Loading bash code...

This is how you can integrate it with a next.js project.

Loading javascript code...

You can read the docs.