🏞️5 beautiful open-source web apps to learn from and get inspired 🙇‍♀️💡

As the title says, in this post, we'll cover open-source web apps you can learn from and use as a starting point for your next project. Stick around till the end, as there is a cool bonus waiting for you there!

Before we get into it, a few words of wisdom (hopefully 😅):

The importance of (open source) role models

When starting a new project from scratch, one of the most helpful things you can do is pick one or more role models. For example, if you’re building a new productivity app, you might look after products such as Trello or Asana. Of course, your app will not be the same, and you probably have in mind some core differences that make your app unique, but there will still be a lot of shared concepts and mechanisms that you don’t want to reinvent.

Even if your role model is a closed-source app, you will still get a lot of value simply by observing it in the wild - design elements, UI, user journey, and terminology used, …

But now imagine if the app you decided to learn from was open source, and you could easily access its full source code on GitHub - that opens a whole new universe of possibilites! Next to simply observing how the app works from the “outside” and guessing what’s happening under the hood, now you get to see every single detail and understand every decision made. Architecture, deployment, API design, libraries, and algorithms used - it’s all in there for you to see!

Mind the scale (aka don’t over-engineer)

One more thing to keep in mind is the stage at which your project is currently. Below, we’ll see different examples of open-source SaaS apps, ranging from indie hacker, “build it in a weekend” side projects to enterprise-grade web platforms. Although you might find a project with millions of users an amazing resource to learn from, keep in mind that not everything they did is what you have to strictly follow. Their architectural and design decisions will often be more complex due to the sheer scale and amount of users they experience daily. If you are just starting out, it is best to stick with the simplest (but still sound) approach until you, hopefully, need a more advanced one.

From here on, for each app we mention, we’ll use a “t-shirt size” methodology (S, M, L, …) to give you a rough feeling of its size and complexity, both in terms of features and users.

Now, with the foreword out of the way, let’s together check out some amazing open-source apps you can start learning from right away:

CoverLetterGPT - the perfect starting spot for an AI-powered SaaS

💾 Source code: https://github.com/vincanger/coverlettergpt
👕 Size: S
🛠️ Stack: Chakra UI, React, Node.js, and Prisma, powered by Wasp

CoverLetterGPT.xyz is every indie hacker’s dream - it’s a GPT-powered SaaS, fully open-source, and most importantly, it’s a real product that people use every day and also pay for! Given your CV and a job description, this tool will generate a professionally written cover letter. You can then further adjust the tone for each paragraph or edit it manually.

It’s perfect for learning since it isn’t too big and the architecture is simple, but it has all the features you might need in an app - social authentication (Google), cron jobs, file upload, GPT integration, payment integration via Stripe, and even payments via Bitcoin!

CoverLetterGPT is made with React, Node.js, and Prisma, powered by the Wasp framework, which takes care of all the plumbing and removes a ton of boilerplate. The best part is you can deploy your app for free when you’re ready by running a single CLI command: wasp deploy.

Hint: The Wasp team recently released OpenSaaS, a completely free and open-source boilerplate starter for React and Node.js. It contains everything mentioned + Tailwind, admin dashboard, landing page, blog, and more. Check it out here to get started even faster.

Supabase Studio - a dashboard masterpiece 🖼️

💾 Source code: https://github.com/supabase/supabase/tree/master/apps/studio
👕 Size: M/L
🛠️ Stack: Next.js (React), Tailwind

Supabase is a renowned open-source project with its core written in Elixir. But, since we are focusing on web apps in this article, we’ll take a look at Supabase Studio - a dashboard where you can see and manage all of your projects. It is a masterpiece in itself and also fully open-source!

The design is custom-made with Tailwind, and there are plenty of elements you might want to reuse for your own project - user management, tables, lists, etc. It also has its own AI integration for writing SQL queries, which works surprisingly well.

Papermark - the open-source DocSend alternative ✉️

💾 Source code: https://github.com/mfts/papermark
👕 Size: M
🛠️ Stack: Next.js (React), Tailwind, Prisma

Papermark has recently been getting a lot of love from the community, especially for its clean design and intuitive interface. Although it might look simple from the outside, this app packs a lot of functionalities that make everything work smoothly: file upload, email sending, built-in analytics, and custom domains…

If you’re building something that involves a lot of document management and user collaboration, this is definitely a project you should take a look at.

Crowd.dev - dev community data platform, made with Vue 📊👩‍💻

💾 Source code: https://github.com/CrowdDotDev/crowd.dev
👕 Size: M
🛠️ Stack: Vue, Node.js

Crowd.dev is one of the latest rising stars of GitHub - it is a platform for monitoring your community activity, be it on Slack or Discord. If you are running your own developer community, a tool like this is a must-have in order to understand what’s happening and who the most active members are.

It offers a lot on the dashboard side, but its other forte is integrations - if you are building an app that ingests and processes a lot of data from outside sources, this is your go-to role model. Bonus points if you are a Vue lover because that’s what this project is made with!

Habitica - Habit tracker as an RPG 🐲⚔️

💾 Source code: https://github.com/HabitRPG/habitica
👕 Size: L
🛠️ Stack: Vue, Bootstrap, SAAS, Node.js, MongoDB

Habitica is one of the coolest web apps (they also have iOS and Android apps) I’ve seen in a while - it helps you organize your life, tasks, and habits through the RPG game! Imagine a Kanban board like Trello, but for each task you complete, you earn XP and gold, and you can even team up with friends to take up quests.

Habitica has been around for 10 years, and it has stood the test of time beautifully with a classical stack of Vue, Node.js/Express, and MongoDB. If you want to see how rich, interactive UIs are built but also what kind of architecture is needed to run a project at this scale, this app is definitely worth checking out. Who knows, you might even end up as a Habitican yourself!

🏆 Bonus 🏆 Appflowy - Notion alternative in Rust and Flutter 🤯

💾 Source code: https://github.com/AppFlowy-IO/AppFlowy
👕 Size: M
🛠️ Stack: Flutter, Rust

If you came this far, you deserved a special treat! This one isn’t a web app, but it is so cool I couldn’t help myself - it is a Notion alternative (so note-taking on steroids) built with Rust and Flutter! Due to its local-first nature, the user experience is extremely smooth, and it also syncs everything to the cloud (which you can host yourself if you wish).

If you’ve been playing around with Rust but are also looking for a project to contribute to that you could use daily, Appflowy might be a perfect fit. It has everything from data storage to business logic and UI, all in one package for you to learn and see what you find the most interesting.

That's it! I'd love to hear from you 🫵

That's all we had for today (drops the mic), thanks so much for reading! I hope you found it useful and/or interesting.

There were so many open-source web apps I came across while writing this, and it was so hard to select only 5 of them.

Now, I'd love to hear from you - what are your favorite open-source apps, and how are you using them? Write it below in the comments 👇

Thank you, and see you next time! 👋