![Project intro image]
Welcome to the Next.js SAAS Boilerplate, a template for SAAS projects! It's has all the features that'll help you jumpstart and build a high-performance, maintainable, and enjoyable app.
With this template, you get all the awesomeness you need:
With this template, you get a versatile, efficient starting point, equipped with:
- ποΈ Next.js - Optimized for speed, providing a top-notch developer experience.
- βοΈ React - Build powerful and interactive UIs with this JavaScript library.
- π οΈ TypeScript - Supercharges JavaScript with static types.
- π§Ά Yarn - Fast, reliable, and secure dependency management.
- π Tailwind CSS - Rapidly craft modern designs with this utility-first CSS framework.
- πΌοΈ Framer Motion - Animate components with this production-ready motion library.
- πͺ Prisma - Modern database access for TypeScript & Node.js.
- π§ͺ Zustand - Small and fast state-management solution.
- π§βπΌ Clerk Authentication - Secure and scalable authentication for Next.js.
- π§ Sanity - Structured content CMS built with JavaScript and React.
- π³ Stripe - Comprehensive and secure solution for online payments.
- π Svix - Effortlessly manage your applicationβs APIs.
- β¨ ESlint - Pluggable JavaScript linter to maintain code quality.
- ποΈ Prettier - Ensure consistent code style across your project.
- πΊ Husky - Use git hooks with ease to improve your codebase.
- π Commitizen - Standardized commit messages to maintain a clean commit history.
- π§Ά lint-staged - Run linters on pre-committed files in git.
- π Playwright - Write reliable end-to-end tests for your application.
- π§ͺ Jest and React Testing Library - For rock-solid unit and integration tests.
- π GitHub Actions - Automate, test and deploy your code seamlessly.
- π PostgreSQL - Robust and powerful open-source database system.
- π Supabase - Open-source alternative to Firebase, providing instant APIs on top of Postgres.
- π£ React Hook Form - Manage your forms efficiently with React Hooks.
- ποΈ Component-based Architecture - Modular and reusable components for scalable development.
- π Ngrok - Expose your local development server to the internet.
- π§ React Email - Create responsive HTML emails with React components.
To get started with this boilerplate, follow these steps:
- Fork & clone repository:
## Don't forget to β star and fork it first :)
git clone https://github.com/<your_username>/saas.git
- Install the dependencies:
yarn install --frozen-lockfile
- Run the development server:
yarn dev
- Open http://localhost:3000 with your browser to see the result.
Easily deploy your Next.js app with Vercel by clicking the button below:
The following scripts are available in the package.json
:
dev
: Starts the development server allowing you to work on your project.start:prod
: Starts the production server after building the app.build
: Creates a production build of the application.start
: Runsyarn run dev
to start the development server.start-ngrok
: Exposes the local server to the internet using ngrok attemplate.ngrok.app
domain.start-stripe
: Starts the Stripe CLI and forwards webhook events to your local development server.email:preview
: Starts a development server for previewing emails at the designated port.lint
: Runs ESLint to identify and report on patterns in TypeScript.lint:fix
: Automatically fixes linting issues found by ESLint.prettier-check
: Checks the code for proper formatting with Prettier.prettier-format
: Automatically formats files using Prettier with the project's configuration.test
: Runs the Jest testing suite.coverage
: Executes Jest and generates a coverage report.test:e2e
: Runs end-to-end tests using Playwright.cz
: Initiates Commitizen for standardizing commit messages.
This boilerplate comes with various testing setups to ensure your application's reliability and robustness.
- Unit and integration tests: Run Jest tests using
yarn test
- End-to-end tests (headless mode): Run Playwright tests in headless mode with
yarn e2e:headless
- End-to-end tests (UI mode): Run Playwright tests with UI using
yarn e2e:ui
In this boilerplate, we use Storybook's out-of-the-box support for smoke testing to verify that components render correctly without any errors. Just run yarn test-storybook
to perform smoke testing. Remember to write stories in JSX or TSX format only. Smoke testing and a lot of other functionalities dont work well with MDX stories.
While this boilerplate doesn't include a specific state management library, we believe it's essential for you to choose the one that best suits your project's needs. Here are some libraries we recommend for state management:
Zustand is a small, fast, and scalable state management library. It's designed to be simple and intuitive, making it a great choice for small to medium-sized projects. It's also optimized for bundle size, ensuring minimal impact on your app's performance.
Choose the library that best fits your requirements and project structure to ensure an efficient state management solution for your application.
Contributions are always welcome! To contribute, please follow these steps:
- Fork the repository.
- Create a new branch with a descriptive name.
- Make your changes, and commit them using the Conventional Commits format.
- Push your changes to the forked repository.
- Create a pull request, and we'll review your changes.
This project is licensed under the MIT License. For more information, see the LICENSE file.