Build a Complete SaaS Platform with Next.js 13, React, Prisma, tRPC, Tailwind | Full Course 2023

Video Title

Build a Complete SaaS Platform with Next.js 13, React, Prisma, tRPC, Tailwind | Full Course 2023

Overview

Josh, a software engineer, demonstrates building a full SaaS platform from scratch using modern web technologies including Next.js 13, React, Prisma, tRPC, Tailwind CSS, and more. The course covers all aspects of a SaaS app: landing page, authentication, PDF file upload and chat functionality, subscription plans with Stripe payments, and deployment.

Key Technological Concepts & Tools

• Next.js 13: Utilizes the new app router, server and client components, dynamic routing, and middleware.
• React: Functional components, hooks (useState, useEffect, useRef, useContext), and context API for state management.
• TypeScript: Strong typing, interfaces, utility types (e.g., Awaited, Omit), and integration with tRPC.
• Tailwind CSS: Utility-first styling, extended configuration, plugins for animation and typography.
• tRPC: Type-safe API routes, infinite queries, optimistic updates, and integration with React Query.
• Prisma: ORM for database schema, migrations, and queries with PlanetScale as the MySQL-compatible cloud database.
• Kind Authentication: Secure passwordless authentication integrated with Next.js.
• UploadThing: Managed file upload service wrapping AWS S3, integrated with Next.js API routes.
• React Dropzone: Drag and drop file upload UI.
• React PDF: Rendering PDFs in React with zoom, rotate, pagination, and full-screen support.
• LangChain + Pinecone: Semantic querying of PDFs via vector embeddings for AI-powered chat.
• OpenAI API: Streaming chat completions with GPT-3.5 Turbo for answering PDF queries.
• Stripe: Subscription payments with customer and billing portal integration.
• Vercel: Deployment platform with environment variables, GitHub integration, and serverless functions.

Product Features & Functionalities Built

1. Landing Page
   • Responsive design with Tailwind CSS.
   • Navigation bar with conditional rendering based on auth state.
   • Pricing page with plans, features, and upgrade buttons.
   • SEO optimized with custom metadata and favicons.
2. Authentication
   • Passwordless email login via Kind.
   • Sync authenticated users with Prisma database.
   • Protected routes with Next.js middleware.
3. PDF Upload & Chat
   • Drag and drop file upload with UploadThing.
   • File size and page limits enforced per subscription plan.
   • Real-time progress bar with simulated progress.
   • PDF rendering with React PDF (zoom, rotate, pagination, full screen).
   • Chat interface streaming AI responses in real time.
   • Optimistic UI updates for instant message feedback.
   • Infinite scroll loading for chat messages.
   • Semantic search of PDF content using LangChain + Pinecone vector DB.
   • AI answers generated via OpenAI GPT-3.5 Turbo with streaming.
4. Subscription & Payments
   • Stripe subscription plans: Free and Pro.
   • Stripe checkout session creation and billing portal.
   • Webhook handling for subscription updates.
   • UI reflects subscription status with ability to upgrade or manage plan.
   • Limits on file size and pages per PDF vary by plan.
5. Deployment
   • GitHub integration and Vercel deployment.
   • Environment variables configured for production.
   • Redirects and middleware configured for auth and routes.
   • Stripe and Kind configured with deployed URLs and webhooks.

Tutorials & Guides Included

• Step-by-step Next.js 13 project setup with TypeScript and Tailwind CSS.
• Creating reusable UI components (MaxWidthWrapper, Button, Modal, Tooltip, etc.).
• Implementing secure passwordless auth with Kind.
• Setting up Prisma schema and syncing users/files/messages.
• Integrating UploadThing for file uploads with drag & drop.
• Rendering PDFs with React PDF and enhancing UX (zoom, rotate, full screen).
• Building a chat UI with optimistic updates and infinite scroll.
• Using LangChain and Pinecone for semantic PDF querying.
• Streaming AI responses with OpenAI and just-ai package.
• Creating subscription plans and payment flows with Stripe.
• Deploying the full app on Vercel with environment variables and webhooks.
• Adding SEO metadata, favicons, and social sharing images.
• Responsive navigation including mobile menu with conditional auth links.

Summary of Main Components Built

• LandingPage, PricingPage, DashboardPage, AuthCallbackPage, BillingPage
• UI Components: MaxWidthWrapper, Navbar, MobileNav, UploadButton, PDFRenderer, ChatWrapper, Messages, ChatInput, UserAccountNav, UpgradeButton, BillingForm
• API Routes via tRPC: auth, uploadThing