Host your side-projects / SaaS for free in 2024 with this resources

Manuel Gudiño — Fri, 17 Nov 2023 15:25:18 +0000

Hey! Today I'm gonna share with you lots of platforms to ship any side-project, or even a Landing Page or SaaS completely for free. No need to spend any 💲 on it. Let's begin!

I'm talking about:

Frontends
Backends & Docker Images
BaaS (Backend as a Service)
Databases (MySQL, PostgreSQL, Redis, SQLite)
Auth
CronJobs
Emails
And more!

Frontends

Vercel

You can create unlimited projects using Next.js, React, Astro, SvelteKit, Vue... Basically anything. It should be enough for all of your side-projects. One-click deployments also!

Netlify

Similar to Vercel. Probably the closest alternative out there.

There's other alternatives as AWS Amplify, Railway or Render. If you're trying to host static options there are a bunch of free options such as Github Pages.

Backends & Docker Images

Koyeb

In my opinion, Koyeb is really good if you want to deploy Python APIs based on frameworks like FastAPI, Flask and Django. You can also host Node.js and Bun here.

Provides a limited free tier. After adding a billing method, unlocks a bunch of new features and free $5 USD of credits per month. Great for hosting small or even medium API's and databases. Be aware of not surpassing the free credits or you'll get charged.

Fly.io

Fly.io provides a scaling plan. It requires a billing method, but provides three VM's that could be useful for small apps or experiments. Be aware of not surpassing the free credits or you'll get charged.

Backend as a Service

Supabase

Most respected in the community. Good free tier, comes with other features as Auth,Realtime and file storage. PostgreSQL Wrapper, but you can also use only the cloud Postgres instance and the file storeage if needed.

PocketBase

Still in development but pretty cool. SQLite Wrapper, there's no cloud solution. You have to self-host it.

Databases

This is probably the best section of this guide and the one you need most.

PostgreSQL

Neon

Serverless PostgreSQL, good free tier.

Cockroach DB

Great free tier.

Xata

Great free tier, innovative AI integration.

MySQL

PlanetScale

One of the best options out there. Great free tier, but requires Credit Card and only let's you create one database for free.

SQLite

Turso

Offers the best free tier. Unlimited databases, up to 3 locations, branches...

Redis

Upstash

Only Redis provider that offers a competitive free tier for now.

Auth

Clerk

Good free tier, highest quality solution right now. Be aware of the insane prices after the free tier, huge vendor lock-in. I personally recommend it for personal projects that won't scale, just to save time.

Kinde

Great free tier, a bit cheaper compared to Clerk.

CronJobs

QStash

Serverless solution provided by Upstash, good free tier.

Vercel

Much more limited free resources. Might be convenient if you're already hosting on Vercel and just need a simple cron-job.

Emails

SendGrid

SendGrid offers a free forever plan with 100 emails/day. Pretty decent to start.

MailerSend

SendGrid alternative. 3000 monthly emails offered for free.

Github Students Pack (Bonus: Only for students)

This pack offers a bunch of free stuff, that you wouldn't get free access to otherwise. You only need an email from an educational institution.

Domains

The pack comes with 3 free domains for 12 months:

.tech
.live
.me

If you're trying to host your own portfolio or blog with a nice domain you can pick the .me one. That's what I did!

Cloud Hostings

Digital Ocean

With the pack, you get a full year free to use the included $200 in credits.

Heroku

You get $13/month for TWO whole years. The amount of credits is not amazing tho, you'll only be able to purchase small instances.

Dev Tools

Github Copilot

Yep, you get free copilot as long as you have the students pack.

JetBrains

Pretty well known IDEs. The license lasts for a year but you can renew it if you still hold the students pack.

API's & Infra

MongoDB Atlas

You get $50 in credits for free and a ~~$150~~ certification is included.

Stripe

Waived transaction fees on first $1000 in revenue processed. Really nice if you're starting your SaaS.

Mailgun

20,000 free emails per month for a whole year. Great as well if you're starting your SaaS or newsletter.

That's it! You can do anything for free right now. All types of databases, domains, auth... Literally anything! And without spending a single cent.

If you liked this post and want me to post more, let me know in the comments! For the next post, I plan to write about my stack, which I consider the fastest for shipping SaaS. I'm also open for opportunities right now, feel free to contact me if you're interested and check out my portfolio to know more about me!

I made a Pricing Page template with TailwindCSS and ShadcnUI 🔥

Manuel Gudiño — Thu, 16 Nov 2023 00:10:54 +0000

Hey everyone! I noticed that there aren't a lot of free and open-source pricing pages with Tailwind, and none with Shadcn UI, so I made my own from scratch and wanted to share it with the community. You can copy-paste the code in the repo and have a fully functional pricing page in two clicks!

Demo Gif

✅ Dark & Light Mode
✅ Monthly / Yearly Plan
✅ Yearly Plan savings automatically calculated and highlighted
✅ "Popular" tag (PRO Plan in the live preview)
✅ "Exclusive" tag (EXCLUSIVE Plan in the dark theme live preview)

Customization

This template is fully customizable and responsive. You can easily add and delete plans, and fill them with the data you what. At the bottom of src/app/page.tsx (which is the only relevant file) you'll find the customization array:

const plans = [
    {
      title: "Basic",
      monthlyPrice: 10,
      yearlyPrice: 100,
      description: "Essential features you need to get started",
      features: ["Example Feature Number 1", "Example Feature Number 2", "Example Feature Number 3"],
      actionLabel: "Get Started",
    },
    {
      title: "Pro",
      monthlyPrice: 25,
      yearlyPrice: 250,
      description: "Perfect for owners of small & medium businessess",
      features: ["Example Feature Number 1", "Example Feature Number 2", "Example Feature Number 3"],
      actionLabel: "Get Started",
      popular: true,
    },
    {
      title: "Enterprise",
      price: "Custom",
      description: "Dedicated support and infrastructure to fit your needs",
      features: ["Example Feature Number 1", "Example Feature Number 2", "Example Feature Number 3", "Super Exclusive Feature"],
      actionLabel: "Contact Sales",
      exclusive: true,
    },
  ]

Card variations

I also made two card variations. You can add them with popular:true or exclusive:true in the specific plan you want to highlight.

Popular tag

The first one is the "popular" tag, that you can see in the PRO plan in the example. It adds the gradient outline to highlight the card.

Exclusive tag

The second one is the exclusive tag, only available in dark mode. It's the shine effect in the EXCLUSIVE plan.

Github Repo.
Live Demo

Follow me if you wanna see more of my work 😊. I'm currently looking for opportunities, feel free to contact me at mgud@proton.me

That's it!

DEV Community: Manuel Gudiño