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. Layout. Theme. Styles. Common components. Nprogress.
  4. Servers. Environmental variables. Logs. Fetch method. API methods.
  5. MobX. withStore HOC. Login page. withAuth HOC. Index page.
  6. User (model, store, pages, components). Mongoose, MongoDB. Tests. Session. Settings page. AWS S3. File upload.
  7. Google OAuth. Mailchimp.
  8. AWS SES. EmailTemplate. Welcome email.
  9. Passwordless OAuth.
  10. Team. Invitation. Invitation email.
  11. Stripe. Customer. Subscription. Invoice.
  12. Discussion. Post.
  13. Web sockets.
  14. Create Post via email. AWS Lambda. AWS API Gateway.
  15. Deploy to AWS Elastic BeanStalk.

Introduction. Project structure.

Available for pre-order for $50. The price becomes $100 once published.


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

You can pre-order this book for $50. The price after book's completion will be $100.

If you pre-order the book, you will be emailed about new chapters as they become available.

The book is to be completed by the end of 2019.

link Table of Contents

In this book, you'll build a full-stack JavaScript web application from scratch, using ES6 syntax. The final app can be used to publish and sell books. We use it ourselves for this book!

Below is a list of all chapters and the main topics covered. Click any title to see a free preview of that chapter. You can also access the Table of Contents by clicking the menu icon at the top left.

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

The book has 15 chapters:

  1. Introduction. Project structure.
  2. React, Next. Server-side rendering. Custom Document. Custom App. Mobile browser.
  3. Material-UI. Layout. Theme. Styles. Common components. Nprogress.
  4. Servers. Environmental variables. Logs. Fetch method. API methods.
  5. MobX. withStore HOC. Login page. withAuth HOC. Index page.)
  6. User (model, store, pages, components). Mongoose, MongoDB. Tests. Session. Settings page. AWS S3. File upload.
  7. Google OAuth. Mailchimp.
  8. [AWS SES. EmailTemplate. Welcome email.
  9. Passwordless OAuth.
  10. Team. Invitation. Invitation email.
  11. Stripe. Customer. Subscription. Invoice.
  12. Discussion. Post.
  13. Web sockets.
  14. Create Post via email. AWS Lambda. AWS API Gateway.
  15. Deploy to AWS Elastic BeanStalk.

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 Boileraplate. 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 15 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

Purchasing a subscription, adding/editing card information, showing purchase history:
Builder Book

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 25,000 lines code over 15 chapters. Your final web app will have the following structure:

├── .vscode
│   ├── launch.json
│   └── settings.json
├── api
│   ├── server
│   │   ├── api
│   │   │   ├── index.ts
│   │   │   ├── public.ts
│   │   │   ├── team-leader.ts
│   │   │   └── team-member.ts
│   │   ├── models
│   │   │   ├── Discussion.ts
│   │   │   ├── EmailTemplate.ts
│   │   │   ├── Invitation.ts
│   │   │   ├── Post.ts
│   │   │   ├── Purchase.ts
│   │   │   ├── Team.ts
│   │   │   └── User.ts
│   │   ├── utils
│   │   │   └── slugify.ts
│   │   ├── app.ts
│   │   ├── auth.ts
│   │   ├── aws-s3.ts
│   │   ├── aws-ses.ts
│   │   ├── consts.ts
│   │   ├── env.ts
│   │   ├── logs.ts
│   │   ├── mailchimp.ts
│   │   ├── passwordless.ts
│   │   ├── realtime.ts
│   │   └── stripe.ts
│   ├── static
│   │   └── robots.txt
│   ├── test
│   │   ├── server
│   │   │   └── utils
│   │   └── tsconfig.json
│   ├── .env
│   ├── .gitignore
│   ├── .node-dev.json
│   ├── .npmignore
│   ├── package.json
│   ├── README.md
│   ├── tsconfig.json
│   ├── tsconfig.server.json
│   ├── tslint.json
│   └── yarn.lock
├── app
│   ├── components
│   │   ├── common
│   │   │   ├── ActiveLink.tsx
│   │   │   ├── AutoComplete.tsx
│   │   │   ├── Confirm.tsx
│   │   │   ├── Loading.tsx
│   │   │   ├── LoginButton.tsx
│   │   │   ├── MenuWithLinks.tsx
│   │   │   ├── MenuWithMenuItems.tsx
│   │   │   └── Notifier.tsx
│   │   ├── discussions
│   │   │   ├── CreateDiscussionForm.tsx
│   │   │   ├── DiscussionActionMenu.tsx
│   │   │   ├── DiscussionList.tsx
│   │   │   ├── DiscussionListItem.tsx
│   │   │   └── EditDiscussionForm.tsx
│   │   ├── layout
│   │   │   ├── index.tsx
│   │   │   └── menus.ts
│   │   ├── posts
│   │   │   ├── PostContent.tsx
│   │   │   ├── PostDetail.tsx
│   │   │   ├── PostEditor.tsx
│   │   │   └── PostForm.tsx
│   │   ├── teams
│   │   │   └── InviteMember.tsx
│   │   └── users
│   │       └── MemberChooser.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
│   │   ├── consts.ts
│   │   ├── context.ts
│   │   ├── gtag.ts
│   │   ├── isMobile.ts
│   │   ├── notifier.ts
│   │   ├── resizeImage.ts
│   │   ├── sharedStyles.ts
│   │   ├── withAuth.tsx
│   │   └── withStore.tsx
│   ├── pages
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   ├── billing.tsx
│   │   ├── create-team.tsx
│   │   ├── discussion.tsx
│   │   ├── invitation.tsx
│   │   ├── login.tsx
│   │   ├── team-settings.tsx
│   │   └── your-settings.tsx
│   ├── server
│   │   ├── app.ts
│   │   ├── env.ts
│   │   └── routesWithSlug.ts
│   ├── static
│   │   └── robots.txt
│   ├── .babelrc
│   ├── .env
│   ├── .env.blueprint
│   ├── .gitignore
│   ├── .npmignore
│   ├── README.md
│   ├── next.config.js
│   ├── package.json
│   ├── tsconfig.json
│   ├── tsconfig.server.json
│   ├── tslint.json
│   └── yarn.lock
├── lambda
│   ├── src
│   │   ├── api -> ../../api/server
│   │   └── sendEmailForNewPost.ts
│   ├── .gitignore
│   ├── README.md
│   ├── handler.ts
│   ├── package.json
│   ├── serverless.yml
│   ├── tsconfig.json
│   ├── tslint.json
│   └── yarn.lock
├── .gitignore
├── .prettierrc.js
├── README.md

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:


Available for pre-order for $50. The price becomes $100 once published.


format_list_bulleted
help_outline
lens