Builder Book logo

Book: SaaS Boilerplate

  1. Introduction. Project structure.
  2. GitHub. VS Code Editor. Node. Yarn. TypeScript. TSLint. Next.js. Environmental variables.
  3. Material-UI. Theme. Dark theme. Shared layout. Shared styles. Shared components. Mobile browser.
  4. HTTP. APP server. Next-Express server. Fetch method. API methods. async/await. API server. Express server. Environmental variables. Logs.
  5. User model. Mongoose and MongoDB. MongoDB index. Jest testing. Your Settings page. File upload to AWS S3.
  6. Login page. Session and cookie. Google OAuth API. Authentication HOC withAuth. firstGridItem logic in App HOC.
  7. AWS SES API. Passwordless OAuth API. Mailchimp API.
  8. Application state, App HOC, store and MobX. Data store for User. Toggle theme API. Team. Invitation.
  9. Discussion API. Post API. Websockets.
  10. Stripe API and paid subscription. Email notification for new post. AWS Lambda. AWS API Gateway.
  11. Environmental variables, production/development. Logger. API server. Server-side caching. SEO - robots.txt, sitemap.xml. Server-side caching. Heroku. AWS Elastic Beanstalk.

Introduction. Project structure.

The price will become $249 at midnight of December 31, 2020.


  • Table of Contents
  • Why this book?
  • Who is this book for?
  • What will you learn?
  • Screenshots
  • Project structure
  • Authors

Note that we update packages and code in this book every 6 months. Our next review/update will be in December 2020.


link Table of Contents

In this book, you'll build a full-stack JavaScript web application from scratch. The final app is a boilerplate to build any SaaS product. We used it ourselves to build our team communication software, Async

The book has 10 chapters, which are shown in the Table of Contents on the left menu. Click any title to see a free preview of that chapter.

By the end of chapter 10, you will write over 10,000 lines of code (mainly TypeScript).


link Why this book?

This is our second book for web developers. The first one is Builder Book, which is targeted to junior or mid-career web developers who are learning a modern JavaScript stack: React, Next, Material UI, Express.

The motivation for this book is two-fold. First, we want to explain more advanced topics that did not fit logically into our first book. In our first book, we discussed basic concepts such as: request, response, async-await, promise, session, cookie, single payments, and Stripe API. In this book, we introduce more advanced topics, such as: store, file upload, passwordless authentication, websockets, 2-app infrastructure, AWS API Gateway, and AWS Lambda.

The scond motivation is we recognized that the world is mostly made of coporations that gain more monopoly. We believe that monopolies are overall bad for the economy. In this book, we walk you through the process of building SaaS Boilerplate. We hope that you will use this SaaS boilerplate to build your own independent SaaS business. We used this SaaS boilerplate to build our own profitable business: Async.

link Who is this book for?

Similar to our first book, this book assumes basic knowledge of HTML, CSS, React, and JavaScript.

This book also assumes basic understanding of HTTP, API, and promise - basic topics that we discussed in our first book.

As mentioned in the above section, you may have at least one of two reasons to purchase this book. One reason could be purely educational: you want to learn how to put together a boilerplate using modern tools such as React, Next, Material-UI, Express, MongoDB, AWS Lambda, TypeScript, and more. The second reason could be to use the knowledge acquired from this book to build your own SaaS business.

If you agree with at least some ideas of the Basecamp founders, Pinboard founder, or author of Company of One - then you will save weeks or months of work by using this SaaS boilerplate to buid your own independent SaaS business. The SaaS boilerplate can be easily modified to satisfy business models other than SaaS.

The final project that you build by the end of Chapter 10 is practically the same as our open source project: SaaS. All code for this book is public and can be found in the /book directory.

link What will you learn?

This book will:

  • introduce you to TypeScript
  • show you how to integrate Next.js with Material-UI
  • explain the difference between server-side rendering (SSR) and client-side rendering (CSR)
  • teach you how to create MongoDB models
  • walk you through implementation of Google and passwordless authentication
  • show you how to integrate essential AWS services into your web app: S3, SES, Lambda, API Gateway
  • introduce you to web sockets and show you how real-time updates can improve user experience
  • show you how to use Stripe's API to create subscriptions, customers, and invoices
  • help you create a few dozen pages and components using React, Next, Material-UI, JavaScript
  • help you create a few dozen internal and external APIs
  • help you create a few dozen static methods for MongoDB models
  • finally, describe in detail how to prepare your web app for production and how to deploy the app to AWS Elastic Beanstalk

You could spend weeks searching these topics on Google. We did all heavy lifting. Our book puts everything about building a web app into one place.

link Screenshots

In this book, you will build a SaaS boilerplate app. You are welcome to add the final app you build in this book to your portfolio. You can even use it to start a business.

Below are screenshots of the app you will build.

Google or passwordless login:
Builder Book

Dropdown menu for settings:
Builder Book

Personal settings page:
Builder Book

Team settings page:
Builder Book

Creating Discussions between multiple team members:
Builder Book

Builder Book

Builder Book

Builder Book

Billing settings:
Builder Book

Builder Book

link Project structure

Take a look at the final code and the codebase for each chapter.

In total, you will write more than 10,000 lines code over 10 chapters. Your final web app will have the following structure:

├── api
│   ├── .elasticbeanstalk
│   │   └── config.yml
│   ├── server
│   │   ├── api
│   │   │   ├── index.ts
│   │   │   ├── public.ts
│   │   │   ├── team-leader.ts
│   │   │   └── team-member.ts
│   │   ├── models
│   │   │   ├── Discussion.ts
│   │   │   ├── EmailTemplate.ts
│   │   │   ├── Invitation.ts
│   │   │   ├── Post.ts
│   │   │   ├── Team.ts
│   │   │   └── User.ts
│   │   ├── utils
│   │   │   ├── slugify.ts
│   │   │   └── sum.ts
│   │   ├── aws-s3.ts
│   │   ├── aws-ses.ts
│   │   ├── env.ts
│   │   ├── google-auth.ts
│   │   ├── logger.ts
│   │   ├── mailchimp.ts
│   │   ├── passwordless-auth.ts
│   │   ├── passwordless-token-mongostore.ts
│   │   ├── server.ts
│   │   ├── sockets.ts
│   │   └── stripe.ts
│   ├── static
│   │   └── robots.txt
│   ├── test/server/utils
│   │   ├── slugify.test.ts
│   │   └── sum.test.ts
│   ├── .eslintignore
│   ├── .eslintrc.js
│   ├── .gitignore
│   ├── package.json
│   ├── tsconfig.json
│   ├── tsconfig.server.json
│   └── yarn.lock
├── app
│   ├── .elasticbeanstalk
│   │   └── config.yml
│   ├── components
│   │   ├── common
│   │   │   ├── Confirmer.tsx
│   │   │   ├── LoginButton.tsx
│   │   │   ├── MemberChooser.tsx
│   │   │   ├── MenuWithLinks.tsx
│   │   │   ├── MenuWithMenuItems.tsx
│   │   │   └── Notifier.tsx
│   │   ├── discussions
│   │   │   ├── CreateDiscussionForm.tsx
│   │   │   ├── DiscussionActionMenu.tsx
│   │   │   ├── DiscussionList.tsx
│   │   │   ├── DiscussionListItem.tsx
│   │   │   └── EditDiscussionForm.tsx
│   │   ├── layout
│   │   │   ├── index.tsx
│   │   ├── posts
│   │   │   ├── PostContent.tsx
│   │   │   ├── PostDetail.tsx
│   │   │   ├── PostEditor.tsx
│   │   │   └── PostForm.tsx
│   │   ├── teams
│   │   │   └── InviteMember.tsx
│   ├── lib
│   │   ├── api
│   │   │   ├── makeQueryString.ts
│   │   │   ├── public.ts
│   │   │   ├── sendRequestAndGetResponse.ts
│   │   │   ├── team-leader.ts
│   │   │   └── team-member.ts
│   │   ├── store
│   │   │   ├── discussion.ts
│   │   │   ├── index.ts
│   │   │   ├── invitation.ts
│   │   │   ├── post.ts
│   │   │   ├── team.ts
│   │   │   └── user.ts
│   │   ├── confirm.ts
│   │   ├── isMobile.ts
│   │   ├── notify.ts
│   │   ├── resizeImage.ts
│   │   ├── sharedStyles.ts
│   │   ├── theme.ts
│   │   └── withAuth.tsx
│   ├── pages
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   ├── billing.tsx
│   │   ├── create-team.tsx
│   │   ├── discussion.tsx
│   │   ├── invitation.tsx
│   │   ├── login-cached.tsx
│   │   ├── login.tsx
│   │   ├── team-settings.tsx
│   │   └── your-settings.tsx
│   ├── public
│   │   └── pepe.jpg
│   ├── server
│   │   ├── robots.txt
│   │   ├── routesWithCache.ts
│   │   ├── server.ts
│   │   └── setupSitemapAndRobots.ts
│   ├── .babelrc
│   ├── .eslintignore
│   ├── .eslintrc.js
│   ├── .gitignore
│   ├── next.env.d.ts
│   ├── next.config.js
│   ├── package.json
│   ├── tsconfig.json
│   ├── tsconfig.server.json
│   └── yarn.lock
├── lambda
│   ├── .estlintignore
│   ├── .eslintrc.js
│   ├── .gitignore
│   ├── api
│   ├── handler.ts
│   ├── package.json
│   ├── serverless.yml
│   ├── tsconfig.json
│   └── yarn.lock
├── .gitignore

link Authors

Together, we've built a profitable SaaS business Async and wrote well-regarded book for junior web engineers, Builder Book.

We enjoy maintaining our popular and open source repositories:

You can find us on GitHub:



The price will become $249 at midnight of December 31, 2020.


format_list_bulleted
help_outline
lens