Build an API SaaS using Next.js, Prisma, Stripe in under an hour (Get paid for your API)

Summary

The video walks through building a paid API service using Next.js, Tailwind CSS, PlanetScale, Prisma, Stripe, and Vercel. It covers user authentication via NextAuth, restricting access to routes, creating customer profiles and subscriptions in Stripe, building the API endpoint, incrementing usage based on requests, logging requests to display in a dashboard, showing usage graphs and metrics, and deploying the full-stack web application.

Takeaways

• 😀 Building a full-stack API SaaS using Next.js, Prisma, PlanetScale, Stripe, and Vercel
• 📝 Using Next.js latest version and app router for easier routing
• 💡 Leveraging server side rendering for session checks and redirects
• 🔐 Adding authentication with NextAuth and Discord OAuth
• 🗄 Setting up PlanetScale MySQL database and Prisma for simplified interactions
• 💰 Integrating Stripe elements for subscriptions, billing and tracking usage
• 🌐 Creating API endpoints to return data and handle authentication
• 📊 Building admin dashboard to display usage graphs, logs and more
• ✏️ Generating unique API keys for users to access protected endpoints
• 💡 Challenges: add customer portal and improve graphs of usage logs

Q & A

What is the main goal of the video?

The main goal is to build an API software-as-a-service that charges users to access data APIs.

What technologies are used to build the API SaaS application?

The technologies used include Prisma, Tailwind, Stripe, Next.js, Vercel, and PlanetScale.

How is user authentication handled?

NextAuth is used along with Discord OAuth for user authentication.

How are users billed for API usage?

Stripe is integrated to bill users $1 for each API request. A metered billing model based on API usage is implemented.

How is the API usage tracked?

A database log table tracks each API request with details like method, status code, timestamp etc. The top recent logs are displayed in the dashboard.

How can users check if they have an active subscription?

The dashboard displays a message indicating if the user has an active subscription or needs to check out.

What databases are used?

PlanetScale MySQL is used along with Prisma as the ORM for simplified interactions.

How are new users handled?

When a new user logs in, a new Stripe customer is created if one does not exist. This associates the user with a billing account.

What additional challenges are proposed?

Some proposed challenges are to add Stripe portal for self-service subscription management and visual graphs for API usage logs.

Where can I get the full source code?

The full source code is available on the presenter's GitHub.