Giter VIP home page Giter VIP logo

boxyhq / saas-starter-kit Goto Github PK

View Code? Open in Web Editor NEW
3.1K 20.0 691.0 9.45 MB

πŸ”₯ Enterprise SaaS Starter Kit - Kickstart your enterprise app development with the Next.js SaaS boilerplate πŸš€

Home Page: https://boxyhq.com/blog/enterprise-ready-saas-starter-kit

License: Apache License 2.0

JavaScript 4.82% TypeScript 94.90% CSS 0.27% Procfile 0.01%
nextjs saas-boilerplate saas-kit saas boilerplate js-boilerplate starter-template react starter-kit tailwindcss

saas-starter-kit's Introduction

BoxyHQ Banner

⭐ Enterprise SaaS Starter Kit

Github stargazers Github issues license Twitter LinkedIn Discord

The Open Source Next.js SaaS boilerplate for Enterprise SaaS app development.

Please star ⭐ the repo if you want us to continue developing and improving the SaaS Starter Kit! πŸ˜€

πŸ“– Additional Resources

Video - BoxyHQ's SaaS Starter Kit: Your Ultimate Enterprise-Compliant Boilerplate
Blog - Enterprise-ready Saas Starter Kit

Next.js-based SaaS starter kit saves you months of development by starting you off with all the features that are the same in every product, so you can focus on what makes your app unique.

πŸ› οΈ Built With

  • Next.js This is a React framework that provides features such as server-side rendering and static site generation. It's used for building the user interface of your application. The main configuration for Next.js can be found in next.config.js.
  • Tailwind CSS This is a utility-first CSS framework for rapidly building custom user interfaces. It's used for styling the application. The configuration for Tailwind CSS can be found in postcss.config.js.
  • Postgres This is a powerful, open source object-relational database system. It's used for storing application data. The connection to Postgres is likely managed through Prisma.
  • React This is a JavaScript library for building user interfaces. It's used for creating the interactive elements of your application. The React components are located in the components directory.
  • Prisma This is an open-source database toolkit. It's used for object-relational mapping, which simplifies the process of writing database queries. Prisma configuration and schema can be found in the prisma directory.
  • TypeScript This is a typed superset of JavaScript that compiles to plain JavaScript. It's used to make the code more robust and maintainable. TypeScript definitions and configurations can be found in files like next-env.d.ts and i18next.d.ts.
  • SAML Jackson (Provides SAML SSO, Directory Sync) This is a service for handling SAML SSO (Single Sign-On). It's used to allow users to sign in with a single ID and password to any of several related systems i.e (using a single set of credentials). The implementation of SAML Jackson is primarily located within the files associated with authentication.
  • Svix (Provides Webhook Orchestration) This is a service for handling webhooks. It's used to emit events on user/team CRUD operations, which can then be caught and handled by other parts of the application or external services. The integration of Svix is distributed throughout the codebase, primarily in areas where Create, Read, Update, and Delete (CRUD) operations are executed.
  • Retraced (Provides Audit Logs Service) This is a service for audit logging and data visibility. It helps track user activities within the application i.e (who did what and when in the application). The usage of Retraced would be dispersed throughout the codebase, likely in the files where important actions are performed.
  • Stripe (Provides Payments) This is a service for handling payments. It's used to process payments for the application. The integration of Stripe is likely found in the files associated with billing and subscriptions.
  • Playwright (Provides E2E tests) This is a Node.js library for automating browsers. It's used to run end-to-end tests on the application. The Playwright configuration and tests can be found in the tests directory.
  • Docker (Provides Docker Compose) This is a platform for developing, shipping, and running applications. It's used to containerize the application and its dependencies. The Docker configuration can be found in the Dockerfile and docker-compose.yml.
  • NextAuth.js (Provides Authentication) This is a complete open-source authentication solution for Next.js applications. It's used to handle user authentication and authorization. The NextAuth.js configuration and providers can be found in the pages/api/auth/[...nextauth].ts file.

πŸš€ Deployment

Deploy with Vercel Deploy to Heroku Deploy to DO

✨ Getting Started

Please follow these simple steps to get a local copy up and running.

Prerequisites

  • Node.js (Version: >=18.x)
  • PostgreSQL
  • NPM
  • Docker compose

Development

1. Setup

  • Fork the repository
  • Clone the repository by using this command:
git clone https://github.com/<your_github_username>/saas-starter-kit.git

2. Go to the project folder

cd saas-starter-kit

3. Install dependencies

npm install

4. Set up your .env file

Duplicate .env.example to .env.

cp .env.example .env

5. Create a database (Optional)

To make the process of installing dependencies easier, we offer a docker-compose.yml with a Postgres container.

docker-compose up -d

6. Set up database schema

npx prisma db push

7. Start the server

In a development environment:

npm run dev

8. Start the Prisma Studio

Prisma Studio is a visual editor for the data in your database.

npx prisma studio

9. Testing

We are using Playwright to execute E2E tests. Add all tests inside the /tests folder.

Update playwright.config.ts to change the playwright configuration.

Install Playwright dependencies
npm run playwright:update
Run E2E tests
npm run test:e2e

Note: HTML test report is generated inside the report folder. Currently supported browsers for test execution chromium and firefox

Fully customizable boilerplate out of the box, see images below πŸ‘‡πŸ‘‡πŸ‘‡

saas-starter-kit-poster

πŸ₯‡ Features

  • Create account
  • Sign in with Email and Password
  • Sign in with Magic Link
  • Sign in with SAML SSO
  • Sign in with Google [Setting up Google OAuth]
  • Sign in with GitHub [Creating a Github OAuth App]
  • Directory Sync (SCIM)
  • Update account
  • Create team
  • Delete team
  • Invite users to the team
  • Manage team members
  • Update team settings
  • Webhooks & Events
  • Internationalization
  • Audit logs
  • Roles and Permissions
  • Dark mode
  • Email notifications
  • E2E tests
  • Docker compose
  • Prisma Studio
  • Update member role
  • Directory Sync Events
  • Avatar Upload
  • SAML SSO
  • Audit Log
  • Webhook
  • Payments
  • Security Headers

➑️ Coming Soon

  • Billing & subscriptions
  • Unit and integration tests

✨ Contributing

Thanks for taking the time to contribute! Contributions make the open-source community a fantastic place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Please try to create bug reports that are:

  • Reproducible. Include steps to reproduce the problem.
  • Specific. Include as much detail as possible: which version, what environment, etc.
  • Unique. Do not duplicate existing opened issues.
  • Scoped to a Single Bug. One bug per report.

Contributing Guide

🀩 Community

  • Discord (For live discussion with the Open-Source Community and BoxyHQ team)
  • Twitter / LinkedIn (Follow us)
  • Youtube (Watch community events and tutorials)
  • GitHub Issues (Contributions, report issues, and product ideas)

🌍 Contributors

Made with contrib.rocks.

πŸ›‘οΈ License

Apache 2.0 License

saas-starter-kit's People

Contributors

aniruddhagawali avatar belkhoujaons avatar cristuker avatar deepakprabhakara avatar dependabot[bot] avatar devkiran avatar dhoni77 avatar emmacode avatar g3root avatar jatingodnani avatar kiran-alex avatar kkumar-gcc avatar kunal144 avatar musyonchez avatar nathantarbert avatar niwsa avatar rohitmondal03 avatar saptarshee94 avatar saqibtanveer786 avatar shartrooper avatar shiva-sai-ssb avatar shreyas0924 avatar shubhamsingh-s34 avatar snyk-bot avatar steven-tey avatar ukrocks007 avatar vivekboii avatar vrmartins avatar yacineahmaich avatar young-einstein10 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

saas-starter-kit's Issues

Missing Dependencies

Default clone (main branch)

yarn install
yarn dev

Result:

Error: Cannot find module 'autoprefixer'

Okay, lets add the dependency:

yarn add -D autoprefixer
yarn dev

Next Error::

Error: Cannot find module 'daisyui'

Okay, lets fix this. I believe this is a direct dependency, so add it:

yarn add daisyui
yarn dev

Working at last

Add Dark mode

The user should be able to choose their preference from the settings.

Here is the basic idea.

dark-mode

This UI is not implemented yet.

Google - Github Callbacks

I was just setting up Github and Google SSO and I need to know what the format of the callback url is for Saas starter kit. Both Github and Google require it. Cheers, Dave

Update a member's role

  • Add an Edit button against a member in the "Team Members" section.
  • Display a modal popup to choose a new role from Admin, Owner, or Member.
  • Only Admin or Owner can edit a member's role.

Audit logs

Audit Logs allow you to track and analyze each member activity.

Internationalization (i18n): Add remaining translation strings

  • Add the remaining translation string to locales/en
  • Use the translation keys in the components and pages.

Example

{
"hi": "Hi",
"logged-in-using": "You have logged in using"
}

const { t } = useTranslation("common");

{`${t("hi")}, ${session?.user.name} ${t("logged-in-using")} ${

Email notification after signup

It is a good idea to send a welcome email notification to the new users after they signup on to the app. Keep the email template simple for now.

Sending email functionality is already there in the code; see how we send an invitation email to the users.

Delete SAML connection for a team

  • Add an option to delete the existing SAML connection.
  • Only ADMIN or OWNER can delete the connection.
  • Call Jackson delete method to delete the connection.

psycopg not found on local install

I'm trying a fresh install locally and after I run ./setup.sh http://localhost then docker compose up I get the following error when it tried to load the apiserver:

plane-createbuckets-1 exited with code 0
plane-db               | 2023-07-17 15:59:35.674 UTC [23] LOG:  database system was not properly shut down; automatic recovery in progress
plane-db               | 2023-07-17 15:59:35.680 UTC [23] LOG:  redo starts at 0/19319F0
plane-db               | 2023-07-17 15:59:35.680 UTC [23] LOG:  invalid record length at 0/1931A28: wanted 24, got 0
plane-db               | 2023-07-17 15:59:35.680 UTC [23] LOG:  redo done at 0/19319F0 system usage: CPU: user: 0.00 s, system: 0.00 s, elapsed: 0.00 s
plane-db               | 2023-07-17 15:59:35.706 UTC [21] LOG:  checkpoint starting: end-of-recovery immediate wait
plane-db               | 2023-07-17 15:59:35.815 UTC [21] LOG:  checkpoint complete: wrote 3 buffers (0.0%); 0 WAL file(s) added, 0 removed, 0 recycled; write=0.057 s, sync=0.013 s, total=0.121 s; sync files=2, longest=0.011 s, average=0.007 s; distance=0 kB, estimate=0 kB
plane-db               | 2023-07-17 15:59:35.841 UTC [1] LOG:  database system is ready to accept connections
planefrontend          | + /usr/local/bin/replace-env-vars.sh http://localhost:8000 http://localhost
planefrontend          | Replacing all statically built instances of http://localhost:8000 with this string http://localhost .
planebgworker          | Traceback (most recent call last):
planebackend           | Traceback (most recent call last):
planebgworker          |   File "/usr/local/lib/python3.11/site-packages/django/db/backends/postgresql/base.py", line 25, in <module>
planebackend           |   File "/usr/local/lib/python3.11/site-packages/django/db/backends/postgresql/base.py", line 25, in <module>
planebackend           |     import psycopg as Database
planebackend           |   File "/usr/local/lib/python3.11/site-packages/psycopg/__init__.py", line 9, in <module>
planebackend           |     from . import pq  # noqa: F401 import early to stabilize side effects
planebgworker          |     import psycopg as Database
planebgworker          |   File "/usr/local/lib/python3.11/site-packages/psycopg/__init__.py", line 9, in <module>
planebackend           |     ^^^^^^^^^^^^^^^^
planebackend           |   File "/usr/local/lib/python3.11/site-packages/psycopg/pq/__init__.py", line 114, in <module>
planebgworker          |     from . import pq  # noqa: F401 import early to stabilize side effects
planebgworker          |     ^^^^^^^^^^^^^^^^
planebgworker          |   File "/usr/local/lib/python3.11/site-packages/psycopg/pq/__init__.py", line 114, in <module>
planebackend           |     import_from_libpq()
planebackend           |   File "/usr/local/lib/python3.11/site-packages/psycopg/pq/__init__.py", line 106, in import_from_libpq
planebgworker          |     import_from_libpq()
planebackend           |     raise ImportError(
planebackend           | ImportError: no pq wrapper available.
planebgworker          |   File "/usr/local/lib/python3.11/site-packages/psycopg/pq/__init__.py", line 106, in import_from_libpq
planebgworker          |     raise ImportError(
planebgworker          | ImportError: no pq wrapper available.
planebgworker          | Attempts made:
planebgworker          | - couldn't import psycopg 'c' implementation: No module named 'psycopg_c'
planebgworker          | - couldn't import psycopg 'binary' implementation: No module named 'psycopg_binary'
planebgworker          | - couldn't import psycopg 'python' implementation: libpq library not found
planebgworker          | 
planebgworker          | During handling of the above exception, another exception occurred:
planebgworker          | 
planebgworker          | Traceback (most recent call last):
planebgworker          |   File "/usr/local/lib/python3.11/site-packages/django/db/backends/postgresql/base.py", line 27, in <module>
planebgworker          |     import psycopg2 as Database
planebgworker          | ModuleNotFoundError: No module named 'psycopg2'
planebgworker          | 
planebgworker          | During handling of the above exception, another exception occurred:
planebgworker          | 
planebgworker          | Traceback (most recent call last):
planebgworker          |   File "/code/manage.py", line 17, in <module>
planebgworker          |     execute_from_command_line(sys.argv)
planebgworker          |   File "/usr/local/lib/python3.11/site-packages/django/core/management/__init__.py", line 442, in execute_from_command_line
planebackend           | Attempts made:
planebackend           | - couldn't import psycopg 'c' implementation: No module named 'psycopg_c'
planebackend           | - couldn't import psycopg 'binary' implementation: No module named 'psycopg_binary'
planebackend           | - couldn't import psycopg 'python' implementation: libpq library not found
planebackend           | 
planebackend           | During handling of the above exception, another exception occurred:
planebackend           | 
planebackend           | Traceback (most recent call last):
planebackend           |   File "/usr/local/lib/python3.11/site-packages/django/db/backends/postgresql/base.py", line 27, in <module>
planebackend           |     import psycopg2 as Database
planebackend           | ModuleNotFoundError: No module named 'psycopg2'
planebackend           | 
planebackend           | During handling of the above exception, another exception occurred:
planebackend           | 
planebackend           | Traceback (most recent call last):
planebackend           |   File "/code/manage.py", line 17, in <module>
planebackend           |     execute_from_command_line(sys.argv)
planebackend           |   File "/usr/local/lib/python3.11/site-packages/django/core/management/__init__.py", line 442, in execute_from_command_line
planebgworker          |     utility.execute()
planebgworker          |   File "/usr/local/lib/python3.11/site-packages/django/core/management/__init__.py", line 416, in execute
planebackend           |     utility.execute()
planebackend           |   File "/usr/local/lib/python3.11/site-packages/django/core/management/__init__.py", line 416, in execute
planebackend           |     django.setup()
planebackend           |   File "/usr/local/lib/python3.11/site-packages/django/__init__.py", line 24, in setup
planebgworker          |     django.setup()
planebgworker          |   File "/usr/local/lib/python3.11/site-packages/django/__init__.py", line 24, in setup
planebgworker          |     apps.populate(settings.INSTALLED_APPS)
planebgworker          |   File "/usr/local/lib/python3.11/site-packages/django/apps/registry.py", line 116, in populate
planebgworker          |     app_config.import_models()
planebgworker          |   File "/usr/local/lib/python3.11/site-packages/django/apps/config.py", line 269, in import_models
planebgworker          |     self.models_module = import_module(models_module_name)

Social login

As a user I should be able to login with social login such as Github, Google.

NextAuth.js support social login.

  • Add social login button to the login and signup page.
  • Update the README with the appropriate instructions.

Include a theme toggler in the navbar

Having to log in and navigate to the user settings page is a long journey to change the theme. There should be a theme toggler in the Navbar (Public and Private) to make this accessible to everyone.

Example
Screenshot 2023-09-06 at 08 26 34

I'd love to work on this.

Set up issues

Just trying out the project locally, following along with the README.md instructions.

I get as far as step 6 to set up the db schema: npx prisma db push

I'm seeing the following error:

Error: P1000: Authentication failed against database server at localhost, the provided database credentials for adminare not valid. Please make sure to provide valid database credentials for the database server atlocalhost.

I'm using a Docker container for the db and that all seems OK so not sure why I'm getting this error. Any ideas?

See the screenshot for details of my .env file.

image

image

Support login via OIDC

  • We have the SAML login working, but we need to support OIDC as well.
  • Ability to add a new OIDC connection (Either OIDC or SAML).
  • Please check what additional fields we need to add form.

i18n internationalization

Internationalization (i18n) is the process of preparing the app so that it can support multiple languages.

  • Support i18n using best practices for React and Next.js.
  • Figure out a good solution for supporting translations of string used in the app.

Add profile picture upload field on account page

Design and implement the UI components necessary to add a profile picture upload field on the Account Page.

  • This task focuses solely on the user interface (UI) and does not involve backend functionality.
  • Display the avatar image on the Account Page.
  • Clicking on the avatar image should open image upload dialog.

Screenshot 2022-10-17 at 4 23 25 PM

Create a 'Deploy to Heroku' Button

The β€˜Deploy to Heroku’ button enables users to deploy apps to Heroku without leaving the web browser, and with little or no configuration. The button is ideal for customers with a quick and easy way to deploy and configure a Heroku app.

Send Events

Trigger actions when certain events happen with the Webhook to customize business logic.

Send events for the following actions

  • member.created
  • member.removed
  • invitation.created
  • invitation.removed

Follow the best practice for the payload structure and sending events.

Note: we're using Svix for the webhook integration.

Reset password

As a user I want to reset my password when I forgot it.

What needs to be done
Build a new "forgot password" view where a user can enter his email address and request a new password. An email should send to the user with the password reset link.

Authenticated user shouldn't be able to access landing page

An user after login can still redirect to the landing page and, hence, to the sign in and sign up pages. IMO, authenticated users ought to be redirected towards the dashboard if they attempt to access through the root URL '/'.

With React Router, this can be achieved by dynamically mounting either "private" route components if there's an active session (token authentication or some other means), or "public" route components if there is not. On Next Im not pretty sure yet how's implemented, but I can learn and perform this task if you people agreed in limiting route access by ongoing session.

Update password

As a user I want to update my current password.

What needs to be done
Add an "Update Password" section under the account page. The user should be able to enter their current and new password. Then, update the database with the new password for that user.

Add a "Deploy to DigitalOcean" Button

The Deploy to DigitalOcean Button allows users to launch an application onto App Platform. It can be embedded in the README file, allowing users who are browsing your repository to deploy project in one click.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.