/coscribe

Primary LanguageTypeScript

Next.js SAAS Boilerplate

![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.

Features

With this template, you get all the awesomeness you need:

Features

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.

🎯 Getting Started

To get started with this boilerplate, follow these steps:

  1. Fork & clone repository:
## Don't forget to ⭐ star and fork it first :)
git clone https://github.com/<your_username>/saas.git
  1. Install the dependencies:
yarn install --frozen-lockfile
  1. Run the development server:
yarn dev
  1. Open http://localhost:3000 with your browser to see the result.

🚀 Deployment

Easily deploy your Next.js app with Vercel by clicking the button below:

Vercel

📃 Scripts Overview

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: Runs yarn run dev to start the development server.
  • start-ngrok: Exposes the local server to the internet using ngrok at template.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.

🧪 Testing

This boilerplate comes with various testing setups to ensure your application's reliability and robustness.

Running Tests

  • 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

Smoke Testing

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.

💾 State Management

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

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.

🤝 Contribution

Contributions are always welcome! To contribute, please follow these steps:

  1. Fork the repository.
  2. Create a new branch with a descriptive name.
  3. Make your changes, and commit them using the Conventional Commits format.
  4. Push your changes to the forked repository.
  5. Create a pull request, and we'll review your changes.

📜 License

This project is licensed under the MIT License. For more information, see the LICENSE file.