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.
🚨 Attention 🚨
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! 👋
Top comments (45)
Good Article. Nice mix of humour and actual content.
I have one general suggestion for habit tracking.
Even though habitica is fun, I had more success with "Loop habit tracker" to create habits. This one is also open source - github.com/iSoron/uhabits.
As far as I am aware, it has only mobile app though.
Thanks, glad you liked the memes, I always have fun with it :D Awesome suggestion btw, I wasn't aware of uhabits, but I see it has over 7k gh stars! I'm always on the lookout for new apps in this space, I'll definitely give it a lookl
The repo says "uhabits" but the android app store listing says "Loop". I am not sure why there is this discrepancy in naming.
When I wanted to track my habits few years back I took a look at habitica too. But for me it felt to much. I didn't need the gamifications stuff. All I needed was just a chart to check my progress. This Loop app fullfilled my need at that time.
For me loop app worked, but it may not for everyone. So, try both apps and stick with the one which works for you.
I will, thanks so much for the recommendation!
Love the t-shirt size analogy!
I am creating an open-source app called Cyclops, so it is obviously my favorite 😄
But from a less biased point of view - mad respect for Blender
Oh yeah, Blender is an amazing piece of engineering!
tldraw github.com/tldraw/tldraw !
I never looked at the code I have to admit, but I think it is very cool an open source app like this exists, and I love using it.
Excalidraw github.com/excalidraw/excalidraw
is really cool as well!
Oh I wasn't aware it is open source also! In that case absolutely agree!
dsaf
I agree, I see tldraw is super popular actually. Not a typical saas, but they do a plenty of cool stuff with canvas which cannot be seen in many other projects probably.
Great article @matijasos, I am happy to see some of my favourite OSS repos. I am a big fan of supabase. It's studio is just awesome. Papermark and Crowd.dev are also great choices.
I am also building open source API development platform, I hope you'll like it too. github.com/firecamp-dev/firecamp
We just started the open source journey, I appreciate all feedbacks and criticism for Firecamp. TIA.
Thanks Nischit, and thanks for sharing Firecamp! I guess postman was your role model for it? Are there any core differences?
Thanks for featuring CoverLetterGPT! If anyone has any questions, I’d be happy to answer them :)
Thanks for making it! CoverLetterGPT is really cool as a learning resource but also fun to use :)
Good read, thanks! Some great tools in here. And I used to use habitica all the time, great app 👌
Thanks for sharing, Kieran! Habitica looks very cool but I haven't tried it "for real" yet. What made you stop using it?
I think it was to do with another service offering geolocation habit reminders so when I got in the vicinity of my home between certain hours it would remind me to do something. Habitica didn’t have that at the time so I jumped ship
The cover letter app reminds me of Reactive Resume. It's an open source cv-builder which is extremely elegant IMO.
rxresu.me/
Rooting for Crowd.dev folks! Had the honor to try it out early, it's fascinating to see how far they've come in the last couple of years :)
Hey buddy, how do you find early-open source projects to contribute
Great Read!! Also have something for DevOps absolute beginner : DevOps newbies
Oh Wow! I really liked Cover Letter GPT thanks for introducing that @matijasos
Awesome, really good and well structured article!
I would add appwrite.
Great Article!!
Thank you for your efforts :)
Habitica looks really fun!
Supabase and Appflowy are pretty well engineered.
Really love this piece! A lot of effort put in there - thanks a ton!
Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more