Jumpstart your next SaaS product with Bedrock

The modern full-stack Next.js & GraphQL boilerplate with user authentication, subscription payments, teams, invitations, emails and everything else you need

Watch the video demo to learn more

Every time I build a SaaS product I waste weeks gluing together standard tooling and functionality: user authentication, cookie sessions, subscription payments, billing management, team management, GraphQL API, transactional emails, ESLint, TypeScript, Prettier, Cypress,...

That's why I created Bedrock.

Bedrock combines all the best tools the JS ecosystem has to offer into one solid foundation for your SaaS product. It feels fantastic to work with now and sets you up to scale as your code- and userbase grows.

And the best part is: you don't have to read thousands of pages of documentation to learn how to use Bedrock. If you know Next.js and GraphQL you can start coding almost immediately!

Max's Face
Max Stoiber (@mxstbr)

Tools

Bedrock combines all the best tools the JS ecosystem has to offer and makes them work well together. This means you get the best developer experience and can just focus on building your product.

The only downside to Bedrock is that it's made me feel like an idiot for not using these technologies earlier. It feels so nice to work with!

There is absolutely no magic in Bedrock, just a bunch of glue code to make all of these tools best friends. You do not have to know most of these technologies to be productive and Bedrock is designed so you can easily remove all the optional tools!

Core
Optional

Something about all these technologies put next to each other made a few things click for me and it's made programming really really fun for me for the first time in a while.

I love how my app turned out and it took less than 3 days to build it! I had no experience with GraphQL, Prisma, or Next but I found my way around Bedrock pretty quickly.

Bedrock saved me a couple hundred hours of work for a stupidly low price.

Building a modern SaaS product on top of Next.js and GraphQL is incredible once you get everything set up — but you can waste weeks getting to that point! With Bedrock we were able to focus on what makes our product unique. The codebase also immediately made sense to me, even without reading the documentation.

Typically I've not been happy with boilerplates I've tried out, because I have to deal with coding styles and ideas that are different from mine, and as a result I have to work around them. Bedrock is a delightful exception to the rule. The fact that everything is incredibly modular makes it so that I can tailor my projects the way I want to, while still having a core that I don't have to recreate over and over.

Features

  • User authentication

    Authenticate users without worrying about security and storing passwords. Users get a magic link sent to their email and as soon as they click it they're logged in!

  • Team support

    Bedrock is ready for teams out of the box. Users can create "projects", each of which has its own billing and members. The pre-built invitation system allows users to invite their colleagues to their projects.

  • Subscription payments

    Securely accept subscription payments with Stripe Checkout. Bedrock comes ready for any plans you want (including yearly, per-seat pricing and everything else) and already handles invoices, billing management, PCI compliance, and much more.

  • Unstyled

    Bedrock comes without any kind of styling or component library because, let's be honest, you'd just delete it anyway. The frontend contains the minimal code necessary to make the functionality work. Make it look the way you want it to by bringing your own component library or using any open source one!

  • GraphQL API & integrations

    Enjoy the fantastic developer experience of creating a GraphQL API with Pothos & Prisma and querying it with urql. Bedrock also comes with token-based API authentication, allowing users to programmatically integrate with your product.

  • Adjustable to your preferences

    Bedrock is designed to be modular so you can fine-tune it to your preferences. All tools except for Next.js are completely optional and can easily be removed or swapped for your favorite alternative. (learn more)

  • The best developer experience

    There is a lot of fantastic tooling in the JavaScript ecosystem, but making it all work well together can be tricky. Bedrock comes with everything you need, configured perfectly, so you (and your team) can move fast.

  • Type-safe from the database to the client

    Move fast thanks to TypeScript catching your bugs before you even hit "Save". Rename a field in the database schema or GraphQL API? TypeScript will immediately highlight where you need to update your code.

  • Code generation

    Bedrock leverages code generation where it can so you have to code less and move faster. Prisma generates a custom ORM and migrations from your database schema, Pothos generates a custom GraphQL API from your Prisma schema and GraphQL Codegen generates React hooks for fetching data from your GraphQL API.

  • Infinite scalability

    Thanks to serverless, you never have to worry about scaling your servers. No matter how much traffic your product gets, Next.js will be able to handle it.

Here is the full list of everything Bedrock does for you so you don't have to:

  • Create the Next.js site
  • Setup TypeScript
  • Configure ESLint
  • Make ESLint work well with TypeScript
  • Configure Prettier
  • Make Prettier work well with ESLint
  • Setup pre-commit hooks for ESLint, Prettier and TypeScript
  • Establish a solid, scalable folder structure
  • Stop devs from importing server code on the client
  • Prepare CI with tests and type checking
  • Automatic dependency updates
  • Setup basic database schema
  • Put magic login authentication together
  • Setup email sending service
  • Create the basic GraphQL schema
  • Make development environment fast and solid
  • Expose the GraphQL schema from an API route
  • Handle SSR vs. SSG with authentication
  • Setup projects in the database and API
  • Build subscription payments system
  • Sync the necessary Stripe state to the database
  • Create migration setup and migrate production database from CI
  • Support multiple paid plans with upgrades & downgrades
  • Avoid exposing implementation details in the GraphQL API
  • Make authentication work on deploy previews
  • Build user invitation system
  • Avoid externalResolver issues with Next.js and Apollo Server
  • Abstract API route middleware management in one central place
  • Handle unauthenticated "accept invitation" link clicks
  • Setup client-side data fetching
  • Setup the normalized urql cache for the best user experience
  • Setup GraphQL Code Generator to generate data fetching React hooks
  • Build "Login" page that redirects to "Check your mailbox" page
  • Handle payments from client with Stripe Checkout
  • Global GraphQL error handling
  • Build project dashboard page
  • Build project settings page
  • Make sure projects can manage their billing
  • Implement human-readable and shareable URL paths
  • Build user-level dashboard page
  • Build user settings page
  • Build separate "Sign up" page
  • Handle global elements like Navbar and Footer
  • Avoid re-creating Prisma client on every hot reload during "next dev"
  • Figure out the best VSCode extensions to use
  • Setup Cypress end-to-end test setup
  • Typesafely seed database for end-to-end tests
  • Support authentication during end-to-end tests
  • Create the database in CI and connect it to app
  • Run end-to-end tests in CI
  • Create the Next.js site
  • Setup TypeScript
  • Configure ESLint
  • Make ESLint work well with TypeScript
  • Configure Prettier
  • Make Prettier work well with ESLint
  • Setup pre-commit hooks for ESLint, Prettier and TypeScript
  • Establish a solid, scalable folder structure
  • Stop devs from importing server code on the client
  • Prepare CI with tests and type checking
  • Automatic dependency updates
  • Setup basic database schema
  • Put magic login authentication together
  • Setup email sending service
  • Create the basic GraphQL schema
  • Make development environment fast and solid
  • Expose the GraphQL schema from an API route
  • Handle SSR vs. SSG with authentication
  • Setup projects in the database and API
  • Build subscription payments system
  • Sync the necessary Stripe state to the database
  • Create migration setup and migrate production database from CI
  • Support multiple paid plans with upgrades & downgrades
  • Avoid exposing implementation details in the GraphQL API
  • Make authentication work on deploy previews
  • Build user invitation system
  • Avoid externalResolver issues with Next.js and Apollo Server
  • Abstract API route middleware management in one central place
  • Handle unauthenticated "accept invitation" link clicks
  • Setup client-side data fetching
  • Setup the normalized urql cache for the best user experience
  • Setup GraphQL Code Generator to generate data fetching React hooks
  • Build "Login" page that redirects to "Check your mailbox" page
  • Handle payments from client with Stripe Checkout
  • Global GraphQL error handling
  • Build project dashboard page
  • Build project settings page
  • Make sure projects can manage their billing
  • Implement human-readable and shareable URL paths
  • Build user-level dashboard page
  • Build user settings page
  • Build separate "Sign up" page
  • Handle global elements like Navbar and Footer
  • Avoid re-creating Prisma client on every hot reload during "next dev"
  • Figure out the best VSCode extensions to use
  • Setup Cypress end-to-end test setup
  • Typesafely seed database for end-to-end tests
  • Support authentication during end-to-end tests
  • Create the database in CI and connect it to app
  • Run end-to-end tests in CI

Bedrock reflects how I'd set up new projects, straight out of the box, and is the perfect balance of both sensible choices & exciting newer techologies.

The Bedrock stack is how we want developers to use Prisma. In fact, we build our own apps exactly like this!

FAQ

Who made this?

👋 Hi, I'm @mxstbr! I'm the creator of react-boilerplate, one of the most popular early React boilerplates (27k stars) and co-creator of styled-components, the most popular CSS-in-JS library (32.5k stars).

I've spent the past seven years thinking deeply about developer experience and scaling full-stack JavaScript applications. At Gatsby, GitHub and Spectrum I had the chance to test my ideas and many tools in varied contexts.

I've packed all of that knowledge and experience into Bedrock to allow you to take advantage of it — without having to spend seven years of your life. I hope you enjoy it!

Are there any products online that use Bedrock?

The first app built by an early access customer is online at companies.remotion.dev! 🎉

Other than that, I've been using early versions of this stack for the past year to build my own products, like Feedback Fish. Some of my friends have also used it for their products, like Splitbee, IndieBrands and PSTunnel!

I've personally also used variations of this stack for internal projects at GitHub and for Spectrum.

Can I actually easily remove the optional stuff?

Yes! I explicitly designed Bedrock to make everything except for Next.js and GraphQL easy to remove and/or ignore. There will also be extensive documentation on how to remove every single optional tool.

Removing most of the optional tools only requires deleting a single file or folder (ESLint, Prettier, Postmark, Pothos, GraphQL Codegen, urql), only a few also require deleting code in a handful of other files (Passport, Stripe, Prisma). Either way it's not going to take more than five minutes.

Can I get support?

There is an invite-only Discord community for folks who have purchased Bedrock to ask questions and help each other out. Once you complete your order, you will get an invite link for you and your team.

On top of that, if your company would like an ongoing technical support contract contact me at bedrock@mxstbr.com.

How many products can I use Bedrock for?

You are granted a license to use the SOFTWARE as the basis of one application, so long as that application is owned and operated by you, the LICENSEE, or is owned and operated by clients of LICENSEE.

Every license you purchase allows you to use Bedrock to build one product, no matter how many people work on that single product. You can purchase unlimited licenses.

There is also an unlimited licenses that allows you to use Bedrock for as many products as you want.

How long can I use Bedrock?

You can use Bedrock for the entire lifetime of your product. There are no ongoing costs or time limitations.

Can I get a refund?

I offer a 14 day money-back guarantee. If you're not satisfied with Bedrock after using it for two weeks I'll refund you your money!

Do I get access to the entire codebase?

Yes! Once you purchase Bedrock you will get a license key, which you can redeem for access to the private GitHub repository.

Do I get access to updates?

You will have access to all future updates since all development happens in the private GitHub repository!

Note that applying the updates to your product might be tricky depending on how much you change the existing Bedrock code. However, you can always at least look at the changes between versions and copy-paste the changes you like manually.

Do you offer ongoing support contracts?

Contact me at bedrock@mxstbr.com if your company would like ongoing support for their product using Bedrock.

I have other questions!

Feel free to contact me at bedrock@mxstbr.com.