Boilercode.co

screenshot of Boilercode.co
nextjs
react
tailwind
prisma

A SaaS boilerplate built on Nextjs, NextAuth & Tailwind.

How to Use NextJs SaaS Boilerplate

Initial Setup

  1. Obtain the boilerplate code
  2. Update your credentials in the .env file.
    • Open the .env.example file and find the variables needed.
    • Create a new file .env.local, copy variables from .env.example, and update your credentials.
    • Documentation links for each env variable are provided in the .env.example file.
  3. Run npm install to install required dependencies.
  4. Run npm run dev to start the server on localhost.

User Auth

  • NextJs SaaS boilerplate uses NextAuth for user authentication.
  • Check the package.json file for the NextAuth dependency.
  • Modify authentication methods in /pages/api/auth/[...nextauth].js.
  • PrismaAdapter is used for storing user information in the database.
  • Customize themes in authentication pages.

Langchain, Pinecone & OpenAI Integration

  • Update API keys in the .env file for OpenAI and Pinecone.
  • AI components are integrated into /pages/dashboard.js and /components/aiComponent/.
  • Components include FeedDataCard and Chatbot, integrated with Langchain, Pinecone, and OpenAI.

Email Integration

  • Mailgun SMTP Server is used for sending emails.
  • Update SMTP configurations in .env.local.
  • User Auth emails are handled in /pages/api/auth/[...nextauth].js.
  • Boilerplate code for sending custom HTML-supported emails is in /lib/mailService.js.

Database Integration

  • Prisma and Postgres are used for the database.
  • Modify the /prisma/schema.prisma file to add database tables.
  • Change the database provider in the same file if needed.

Landing Page

  • Landing page components are available in /components/landingPage.
  • Components include LandingHeader, LandingHero, LandingFeature, LandingHowTo, LandingPricing, LandingTestimonials, and LandingCta.

Dynamic Payment Integration

  • Pricing configurations are in /config/pricing.js.
  • Integration for both LemonSqueezy and Stripe payment plans is provided.
  • Checkout for Stripe is available in /lib/stripe-checkout.js.
  • Extensive LemonSqueezy integrations are in /lib/lemonSqueezy.js.

Webhooks

  • Stripe and LemonSqueezy webhook receivers are available in /pages/api/payments/stripe_webhook.js and /pages/api/payments/lemon-squeezy-webhook.js.

Customer Support

  • Integration with Crisp for customer support is available in config/crispSupport.js.

Google Analytics

  • Integration with Google Analytics is available in config/googleAnalytics.js.

Custom SEO

  • SEO components are in components/additional/seo.js.
  • Modify with your values for a customized SEO setup.

Custom Blog

  • Utilize the Custom Blogs feature by placing markdown files in the /pages/blog/ folder.
  • Theme configuration is available in theme.config.js.

Additional Components

  • Extra components are in /components/elements/, including button.js, card.js, customDialog.js, customLink.js, pricingCard.js, productHunt.js, sprinkle.js (for a unique icon), and video.js (for integration videos).
nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

prisma
Prisma

Prisma is a server-side library that helps developers read and write data to the database in an intuitive, efficient and safe way.

boilerplate
Boilerplates

A boilerplate includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.

fullstack
Fullstack

A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.