Builder Book logo

Book 2: SaaS Boilerplate

Learn how to build a full-stack, production-ready SaaS web application from scratch.
You'll go from 0 lines of code in Chapter 1 to over 25,000 lines of code by Chapter 14.

Why this book?

Robust JavaScript stack

Build a web app with React, Material-UI, Next, MobX, WebSockets, Express, Node, Mongoose, MongoDB. Write with TypeScript. We keep our book up-to-date with the latest versions of all dependencies.

Popular third party APIs

Integrate your web app with Google for user authentication and analytics, AWS SES for transactional emails, AWS S3 for file manipulation, MailChimp for newsletters, and Stripe for selling.

Start your own SaaS product or business

This book is not another to-do list. You will build a practical web app that can become a SaaS business. We take you through every step to build the app from scratch.

Public support

If you have questions, search our closed Github issues or create a new one. We are happy to answer beginner to expert-level questions.


Table of Contents

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

                Chapter 1: GitHub. VS Code Editor. Node. Yarn. TypeScript. TSLint. Next.js. Environmental variables.
                • Setup
                  • GitHub and Git
                  • Visual Studio code editor
                  • Node, Yarn
                  • package.json
                  • TypeScript
                  • ESLint, Prettier
                • app server: Next.js
                  • Next.js: Custom App
                  • Next.js: Custom Document
                  • Next.js: Index page
                • Testing
                  • Environmental variables

                    Chapter 2: Material-UI. Theme. Dark theme. Shared layout. Shared styles. Shared components. Mobile browser.
                    • Material-UI
                      • Client-side and server-side rendered pages
                      • Dark theme
                    • Shared layout
                      • Shared styles
                        • Shared components
                          • MenuWithLinks
                          • Notifier
                          • Confirmer
                        • Nprogress
                          • Mobile browser

                            Chapter 3: HTTP. APP server. Next-Express server. Fetch method. API methods. async/await. API server. Express server. Environmental variables. Logs.
                            • HTTP
                              • APP server
                                • Step 1: Fetch method
                                • Step 2: API method at Index page
                                • Step 3: Next-Express server. Express route.
                              • Asynchronous function, Promise, async/await
                                • API server
                                  • New project API
                                  • Updating APP

                                Chapter 4: User model. Mongoose and MongoDB. MongoDB index. Jest testing. Your Settings page. File upload to AWS S3.
                                • Infrastructure for User
                                  • User Schema and Model. Type interface.
                                  • Static methods and Mongoose methods
                                  • Express routes, router and API methods
                                • MongoDB database
                                  • MongoDB Atlas
                                  • Creating MongoDB document
                                  • Connecting database
                                  • Testing connection
                                • MongoDB index
                                  • Jest testing for TypeScript
                                    • Slugify method
                                    • Testing slugify method
                                  • Your Settings page
                                    • Form and input
                                    • API infrastructure for updating profile
                                    • Data validation
                                  • API infrastructure for uploading file
                                    • Page's uploadFile
                                    • Getting signed request API
                                    • Env variables for uploading file
                                    • Uploading file using signed request API
                                    • Testing file upload
                                    • resizeImage

                                  Chapter 5: Login page. Session and cookie. Google OAuth API. Authentication HOC withAuth. firstGridItem logic in App HOC.
                                  • Login page
                                    • LoginButton
                                  • Session and cookie
                                    • Configure session and save/retrieve session from database
                                    • Mount Express middleware
                                    • Modify Express route /get-user-by-slug
                                    • Configure cookie
                                  • Google OAuth API
                                    • Express routes for Google OAuth API
                                    • Configure passport
                                    • verify function
                                    • passport and session
                                    • Static methods publicFields and signInOrSignUpViaGoogle
                                    • getUserApiMethod API method and '/get-user' Express route
                                    • Google Cloud Platform
                                    • Testing Google OAuth API
                                  • Authentication HOC withAuth
                                    • getUserApiMethod in withAuth
                                    • Redirect logic in withAuth
                                    • Render logic in withAuth HOC
                                    • Testing withAuth HOC
                                  • firstGridItem logic in App HOC

                                    Chapter 6: AWS SES API. Passwordless OAuth API. Mailchimp API.
                                    • AWS SES API
                                      • EmailTemplate model, insertTemplates and getEmailTemplate methods
                                      • Adding getEmailTemplate and sendEmail to signInOrSignUpViaGoogle
                                      • sendEmail method
                                      • Setting up AWS SES and EMAIL_SUPPORT_FROM_ADDRESS
                                      • Testing AWS SES API
                                    • Passwordless OAuth API
                                      • Configure passwordless
                                      • Configure passwordless token
                                      • Express routes for Passwordless API
                                      • signInOrSignUpByPasswordless method for User model
                                      • Testing Passwordless OAuth API
                                    • Mailchimp API
                                      • callAPI method
                                      • addToMailchimp method
                                      • Adding addToMailchimp to signInOrSignUpViaGoogle and signInOrSignUpByPasswordless
                                      • Environmental variables for Mailchimp API
                                      • Testing Mailchimp API

                                    Chapter 7: Application state, App HOC, store and MobX. Data store for User. Team. Invitation. Discussion. Post. Toggle theme API.
                                    • Application state, withStore HOC, store and MobX
                                      • Updating App HOC
                                      • store, observable, decorate
                                      • initializeStore, getStore, server-side rendering, action
                                      • Data store for User
                                      • Updating withAuth HOC
                                      • Update YouSettings page
                                      • Testing store infrastructure
                                      • Improvements to store infrastructure
                                    • Toggle theme API


                                      Book Authors


                                      Kelly

                                      Kelly
                                      Spokane, WA

                                      Kelly is a front-end developer. She likes using React and Material Design and enjoys solving UX problems.

                                      Timur

                                      Timur
                                      Spokane, WA

                                      Tima is a full-stack JavaScript web developer. He likes learning any technology that improves end-user experience.


                                      © 2018 - 2020 Builder BookTermsGithub