I built my first SaaS on Next.js

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
  • Scout APM - Less time debugging, more time building
  • material-ui-phone-number

    Fork of react-phone-input-2 for the Material-UI library

    For the frontend component, I decided to use Material-UI Phone Number, which is a fork of react-phone-input-2 made for Material-UI. I didn't want to spend time building my own phone number input, but having the auto-format and country select was a nice feature.

  • google-libphonenumber

    The up-to-date and reliable Google's libphonenumber package for node.js.

    I also decided to use google-libphonenumber on the server-side to handle formatting and validation of the phone input.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • TypeScript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    TypeScript

  • prisma1

    💾 Database Tools incl. ORM, Migrations and Admin UI (Postgres, MySQL & MongoDB)

    For hosting the database (which is Postgres) I went with supabase. I was already using Prisma for the ORM since it came with Bedrock, so I didn't use the SDJ from Supabase. However, it was simple to setup a new account, grab the connection string, and hook it into my existing code. They have a good free tier for a project like this. And I enjoy their UI when using the web app.

  • Passport

    Simple, unobtrusive authentication for Node.js.

    Passport - User auth already setup and ready to go

  • supabase

    The open source Firebase alternative. Follow to stay updated about our public Beta.

    For hosting the database (which is Postgres) I went with supabase. I was already using Prisma for the ORM since it came with Bedrock, so I didn't use the SDJ from Supabase. However, it was simple to setup a new account, grab the connection string, and hook it into my existing code. They have a good free tier for a project like this. And I enjoy their UI when using the web app.

  • Stripe

    PHP library for the Stripe API.

    Stripe - Basic Stripe integration for subscription plans configured and working.

  • SonarLint

    Deliver Cleaner and Safer Code - Right in Your IDE of Choice!. SonarLint is a free and open source IDE extension that identifies and catches bugs and vulnerabilities as you code, directly in the IDE. Install from your favorite IDE marketplace today.

  • prettier

    Prettier is an opinionated code formatter.

    Things like Prettier and ESLint already configured to lint and auto-fix issues while coding and at pre-commit.

  • material-ui

    MUI Core (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.

    I decided to go with Material-UI for a number of reasons. For starters, I'm not very strong in design, so I wanted an opinionated frontend framework that would guide me to better design. Something that didn't require very much customization to make it look decent. I have heard great things about Material-UI, and it works great with Next.js. They also provide some nice demos to help inspire my non-creative brain.

  • Kutt.it

    Free Modern URL Shortener.

    After some research, I decided to give Kutt a try. It's open source and free, and there is a node SDK which can make it easy to use.

  • foundation

    GraphQL Foundation Charter and Legal Documents (by graphql)

    GraphQL

  • ESLint

    Find and fix problems in your JavaScript code.

    Things like Prettier and ESLint already configured to lint and auto-fix issues while coding and at pre-commit.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts