Next.js SaaS boilerplate for building applications. Includes ready-to-use components and configurations. Starting at $1.
Features
Next.js SaaS boilerplate
Provides a starting point to build SaaS applications with Next.js, reducing configuration time.
Constructor
A tool for constructing and customizing SaaS applications quickly.
Quickstart
Provides a guide to quickly set up and start using the project or application.
Database
Contains information regarding how to configure and manage the database used in the project.
README
Documentation that offers an overview of the project, including how to setup, configure, and maintain it.
Environment Variables (.env)
Instructions for using and managing environment variables necessary for the application's operation.
Git Flow
Guidance on managing version control using Git, including branching strategies and collaboration tips.
Troubleshooting
Provides solutions to common problems and issues that may arise while working with the project.
Full Projects
Examples and explanations of completed projects to illustrate how the tools and components work together.
Appearance
Customization options for the application's appearance, including themes and layouts.
Examples
Provides examples of implementation for features or components of the project.
Main project structure
A feature offering a complete main project structure template.
Auth
A basic authentication module for applications.
Auth with email code
Enables authentication using email code verification.
Auth with Google
Allows users to authenticate via their Google account.
Auth with Apple
Allows users to authenticate via their Apple account.
Auth with Facebook
Allows users to authenticate via their Facebook account.
Edit Account
Provides functionality for users to edit their account details.
Delete Account
Allows a user to delete their account from the system.
Connect another Account
Enables connection with another account for merged access.
Connect socials Accounts
Provides integration to connect accounts with social media profiles.
Content Management
Tools for managing and organizing content effectively.
Email & Password Authentication
Allows users to sign in using their email and password combination.
Third-Party Sign-In Options
Provides integration with Google, Apple, Facebook, and LinkedIn for authentication.
Environment Setup
Create a .env file from .env.example and configure environment variables such as DATABASE_URL.
Install Dependencies
Use `npm install` to install project dependencies, which may include packages for the backend and frontend.
Prisma Setup
Run `npm run prisma` and `npm run prisma:update` to set up the database and apply any Prisma changes.
Development Server
Start the development server with `npm run dev` and access it at `http://localhost:3000`.
Lint and Type Checks
Run `npm run lint` and `npm run check-ts` to perform linting and type-checking to maintain code quality.
Code Quality Practices
Various practices like using memoization where needed, using react-query and axios for API calls, and avoiding unnecessary comments.
Font Rendering Configuration
Sets the path for proper font rendering for Twitter cards using the FONTCONFIG_PATH variable.
Supabase Project Configuration
Includes settings for Supabase integration with SUPABASE_PROJECT_URL and SUPABASE_PROJECT_ANON_KEY for file storage and database.
PostgreSQL Connection
Configures PostgreSQL connection strings with DATABASE_URL and DIRECT_DATABASE_URL. Provides format guides for creating a connection.
JWT Authentication Token
Uses TOKEN_SECRET to set JWT auth token and TOKEN_NAME for naming the token.
Config File Check
Check config files in the config folder and environment variables in the .env file to resolve issues.
Project File Search for TODOs
Search project files for TODO or TODO_FILL comments using ctrl+f or cmd+f to ensure all places are filled with app values.
Database Command Re-generation
If a database is set up, try executing npm run prisma:update and npm run prisma to re-generate command flows.
Lint and Check Imports
Run npm run lint, npx next lint --fix, and npm run check-ts to check for code errors and missing imports.
Component Imports Error Handling
For missing imports of components and functions, contact support about your specific purchase from the dashboard.
Reference to README
Refer to the README documentation for additional help.
Main Template Files
Requirement for installation. You must own the main template files to proceed.
Node.js Installation
Install Node.js as a prerequisite for running the app.
NPM Install Command
Run 'npm install --legacy-peer-deps' in the terminal to install dependencies.
Local Development Server
After installation, run 'npm run dev' to start a local server and view the app.
Optional Database Configuration
If you purchased addons with authentication, you may need to configure the database as well.
Database Update Integration
Allows you to set up and update databases only if you've purchased related backend add-on(s). You need to rename '.env.example' to '.env', generate a TOKEN_SECRET, and update schema files.
Prisma Database Setup
Involves setting the database provider to SQLite by modifying 'schema.prisma' and 'appConfig.ts'. It also requires installing npm packages and running Prisma commands to update the database.
Local Server Access
After setting up the database, you can open the application locally at 'http://localhost:3000/' for testing and development.
Admin User Creation
Requires creating a new user by visiting 'http://localhost:3000/sign-up', followed by setting up user roles in the database and accessing admin dashboards to manage blog posts and other features.
Migration Switch Between Databases
Facilitates switching between PostgreSQL, Local PostgreSQL, and SQLite by renaming migration folders appropriately to ensure schema and data transition without errors.
animate-pulse
This animation feature provides a pulsating effect, making elements appear as though they are fading in and out continuously.
animate-bounce
This animation feature allows elements to bounce, adding a dynamic and playful motion to the components.
animate-slide
This feature makes elements slide into view, creating a smooth transition effect.
animate-popup
This animation makes elements pop up, briefly enlarging to catch the user's attention.
animate-opacity
This feature changes the opacity of an element, allowing for fade in and fade out effects.
animate-tilt
This animation tilts elements, adding a three-dimensional effect to the appearance.
animate-shake
This animation causes elements to shake, which can be used to indicate an error or to grab attention.
Address Input Field
Allows users to enter addresses with an auto-complete feature.
Logo and Image Setup
Place 'logo.png' and 'twitter_og_image.png' into the '/public/images' folder for branding purposes.
Favicon Generation
Generate a favicon from 'logo.png' or any image and move it to the '/public/favicon' folder for site identification in browsers.
Config File Setup
Open '/config/appConfig.ts' and set variables like SITE_URL and METADATA to configure application properties.
PWA Configuration
Modify 'next.config.js' to enable or disable PWA support by setting parameters for the 'next-pwa' plugin.
Environment File Update
Rename '.env.example' to '.env' and set required variables to configure the environment settings.
Manifest Setup
Update '/public/manifest.json' with app name, short name, and screenshots for proper PWA display.
PWA VAPID Details
In '/config/appConfig.ts', set your email in 'PWA.vapidDetails.email' and update environment variables for web push notifications.
Additional Configurations
Set configuration variables listed under TODO or complete these settings later.
PWA and Notifications Add-on
PWA pusher and notifications are available as a separate add-on for additional functionality.
Pre-configured Index Page
Offers a pre-configured index page with a layout container, header, footer, and main sections including first block, FAQ, testimonials, and pricing.
Component Imports
Components such as Faq, Footer, Header, Pricing, Testimonials are imported from 'components/lib' for building the page layout.
Git Repository Setup
Create a new repository on platforms like Github, Gitlab, or Bitbucket and set up the remote URL using a terminal command.
Commit and Push Changes
Add and commit changes to your repository, addressing any TypeScript or ESLint errors, and then push to the main branch.
Deployment Services
Deploy the project on platforms like Vercel, Netlify, or Heroku after registering and following the import instructions.
Environment Variables
Add .env variables to your remote deployment settings to ensure proper configuration.
Local PostgreSQL Database Setup
Guides you to set up or update a local PostgreSQL database by downloading and installing PostgreSQL. It includes steps for creating roles and databases using pgAdmin.
Role Creation
Instructions for creating a Login/Group Role in pgAdmin by right-clicking on Login/Group Roles, selecting Create, and setting name, password, and privileges.
Database Creation
Details about creating a new database in pgAdmin. Right-click on Databases, choose Create, and assign name and owner.
Connection String Format
Provides the required format for the database connection string to connect to the local PostgreSQL database.