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
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • 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.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • TypeScript

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

    TypeScript

  • prisma1

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

    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.

    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.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  • 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

    Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's 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