Book 1: Builder Book

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

Why this book?

Robust JavaScript stack

Learn how to build a web app with React, Material-UI, Next, Express, Mongoose, and MongoDB. We use ES6 syntax and keep our book up-to-date with the latest versions of all dependencies.

Popular third party APIs

Learn how to integrate a web app with Google for user authentication, Github for markdown and collaboration, AWS SES for transactional emails, MailChimp for newsletters, and Stripe for selling.

Build a complete web app

We cover every step of building a web app - writing pages/components, creating a server, connecting a database, integrating APIs, and more. You could spend weeks searching these topics on Google. Add the final app you build to your portfolio.

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. With the help of our readers, we've made over 200 improvements to our book.


Table of Contents

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

              Chapter 1: App structure. Next.js. HOC. Material-UI. Server-side rendering. Styles.
              • Setup
                • Node and Yarn
                • package.json
              • Code editor and lint
                • VS editor
                • Eslint and Prettier
              • App structure
                • Next.js
                • Document
                • Babel
              • Index page
                • Header component
                  • Layout HOC
                    • Material-UI integration
                      • Create a theme
                      • Inject styles and render page on the server
                      • Remove server-side styles
                    • Custom styles
                      • Server-side rendering

                        Chapter 2: Server. Database. Session. Header and MenuDrop components.
                        • HTTP
                          • Express server
                            • Nodemon
                            • Index page
                            • Testing
                          • Database
                            • dotenv
                            • Testing connection
                          • Session
                            • Configure session
                            • Save session
                            • Testing
                          • Update Header component
                            • MenuDrop component

                              Chapter 3: Authentication HOC. Promise. Async/await. Static method for User model. Google OAuth.
                              • Authentication HOC
                                • Parameters for withAuth HOC
                              • getInitialProps() method
                                • Login page and Nprogress
                                  • Promise.then()
                                    • Async/await
                                      • Static method signInOrSignUp()
                                        • Generate slug
                                          • Google Oauth: auth() function
                                            • Express routes for auth()
                                              • Initialize auth() on server
                                                • Testing

                                                  Chapter 4: Testing with Jest. Debugging with Winston. Transactional emails. In-app notifications.
                                                  • Testing with Jest
                                                    • Debugging with Winston
                                                      • Transactional emails with AWS SES
                                                        • Set up, keys, env variables
                                                        • sendEmail() method
                                                        • Export and import in server code
                                                        • insertTemplates() method
                                                        • getEmailTemplate() method
                                                        • Update User model
                                                        • Testing
                                                      • In-app notifications
                                                        • Notifier component
                                                        • notify() function
                                                        • Example of usage

                                                      Chapter 5: Book and Chapter models. Internal API. Render chapter.
                                                      • Book model
                                                        • Schema for Book
                                                        • Static methods for Book
                                                      • Chapter model
                                                        • Schema for Chapter
                                                        • Static methods for Chapter
                                                        • Index in MongoDB
                                                      • Internal APIs
                                                        • Intro to Express routes
                                                        • Basics of internal API
                                                        • Express routes
                                                        • API methods
                                                        • Pages
                                                      • ReadChapter page
                                                        • Express route
                                                        • API method getChapterDetail()
                                                        • Page
                                                      • Testing

                                                        Chapter 6: Github integration. Admin dashboard. Testing Admin UX and Github integration.
                                                        • Github integration
                                                          • Set up server
                                                          • syncContent() for Book model
                                                          • syncContent() for Chapter model
                                                        • Markdown to HTML
                                                          • Admin dashboard
                                                            • Express routes
                                                            • API methods
                                                            • Admin pages and components
                                                            • Redirects for Admin and Customer users
                                                          • Update Header component
                                                            • Testing
                                                              • Connecting Github
                                                              • Adding new book
                                                              • Editing existing book
                                                              • Syncing content

                                                            Chapter 7: Table of Contents. Highlight for section. Hide Header. Mobile browser.
                                                            • Table of Contents
                                                              • Sections
                                                              • Sidebar
                                                              • Toggle TOC
                                                            • Highlight for section
                                                              • Active section
                                                            • Hide Header
                                                              • Mobile browser

                                                                Chapter 8: BuyButton component. Buy book logic. ReadChapter page. Checkout flow. MyBooks page. Mailchimp API. Deploy app.
                                                                • BuyButton component
                                                                  • Buy book logic
                                                                    • API method buyBook()
                                                                    • Express route '/buy-book'
                                                                    • Static method Book.buy()
                                                                    • stripeCharge() method
                                                                    • Purchase model
                                                                  • ReadChapter page
                                                                    • Excerpt and full content
                                                                    • BuyButton
                                                                    • Testing
                                                                  • Checkout UX
                                                                    • MyBooks page
                                                                      • API method getMyBookList
                                                                      • Express route '/my-books'
                                                                      • Static method Book.getPurchasedBooks()
                                                                    • Mailchimp API
                                                                      • Deploy app
                                                                        • NODE_ENV, ROOT_URL, MONGO_URL
                                                                        • Security
                                                                        • SEO
                                                                        • Now (V1 is depreciated)
                                                                        • Heroku


                                                                      Book reviews

                                                                      Donald Pham

                                                                      Donald Pham
                                                                      Toronto, Canada

                                                                      "I use various online resources like udemy.com and acloud.guru for eLearning, but this book is the best thus far to get one up to speed with the necessary skill sets to immediately run a web application."

                                                                      Earl Lee

                                                                      Earl Lee
                                                                      Washington, D.C.

                                                                      "As a former engineer turned PM that's a few years removed from writing code, Builder Book has been a quick and convenient way to brush up on full-stack development and learn React for a side project."

                                                                      Sam Reaves

                                                                      Sam Reaves
                                                                      Atlanta, GA

                                                                      "I often use Udemy for learning specific technologies, but ended up using Builder Book after being impressed with their brochure site being the actual project you build. The up to date, step by step instructions with Github made creating the app a breeze."

                                                                      Rick Hallett

                                                                      Rick Hallett
                                                                      United Kingdom

                                                                      "Some of the code is challenging for a junior, but being stretched is a good experience. The authors have been particularly receptive to open-source issues and pull-requests; this latter point has made my experience a very worthwhile one. Strongly recommended to those going from junior to middleweight JavaScript developers."

                                                                      Saul Ocampo

                                                                      Saul Ocampo
                                                                      Chicago, IL

                                                                      "Amazing book to expand your knowledge of building a full stack application. It connected many of the dots I was experiencing when building my own apps. I now see the power of Next and look forward to building further applications."

                                                                      Jason Sprouse

                                                                      Jason Sprouse
                                                                      Dallas, TX

                                                                      "Builder Book is a labor of love. It's obvious that Tima, Kelly and Delgermurun are not only passionate about software development and architectural design, they are also committed to providing an exceptional learning experience to those who are fortunate enough to read Builder Book. It's stated very clearly in the books introduction, many times we pour over resources and learn a little here and there, but when it comes to organizing everything into a meticulous pattern great for referencing in a new build or elsewhere, there's just not much to rely on short of maybe, our browsers bookmarks. Builder Book excels where our browser's bookmark falls short."

                                                                      Peter Tahinduka

                                                                      Peter Tahinduka
                                                                      Uganda

                                                                      "I had a job interview, and the required frameworks were ExpressJS and React. Through some googling, I landed on this project. I have never been more optimistic about a career as a JavaScript programmer...thanks to Builderbook and the team that put this together.."

                                                                      Salie Lie

                                                                      Salie Lie
                                                                      Singapore

                                                                      "This book is by far the best I've found on the MERN stack. It also covers testing. Very comprehensive book with explanations so that you actually understand what the code does."

                                                                      Kamil Latosiński

                                                                      Kamil Latosiński
                                                                      Warsaw, Poland

                                                                      "Everyone knows the meme 'if the authors of computer programming books wrote arithmetic books'. This book is very different. It's not another to-do list but a comprehensive guide of how to build a real-life application. I haven't found a better resource (and trust me, I have tried a lot)."

                                                                      Ej Cruz

                                                                      Ej Cruz
                                                                      San Francisco, CA

                                                                      "I'm going through tutorials from uDemy, Lynda, codeacademy, and my local community college. Though things do stick, a full scope is still kind of shaky. This book is something I've been needing!"

                                                                      Thierry Michel

                                                                      Thierry Michel
                                                                      Liège, Belgium

                                                                      "The way this book breaks things down into steps and explains each chunk of code individually before putting it all together is really helpful. A good example is how they explain why material-ui does not work by default with server-side rendering, how we need to inject the styles and subsequently remove the server-side styles."

                                                                      Nicola Niro

                                                                      Nicola Niro
                                                                      Malta

                                                                      "I really like how the book explains everything and in depth, even JavaScript stuff, without leaving anything for granted. Do you have a book for the saas boilerplate as well?."

                                                                      Josh Horwitz

                                                                      Josh Horwitz
                                                                      Ann Arbor, MI

                                                                      "I don't have a lot of experience with server-side rendered React, and Builder Book has taught me a lot about it in a short amount of time. I also never worked with Next.js, and this book has proved an invaluable resource."

                                                                      Yuri Gor

                                                                      Yuri Gor
                                                                      Warsaw, Poland

                                                                      "Material-UI + Next.js + NoSQL DB - it's exactly what I was trying to build by myself. Finally I found this blueprint project at github. I hope I will evolve the project into my own idea, in production! I highly recommend this book: it keeps good balance between detailed explanations and focus on the target, so you will not lose much time nor something important."

                                                                      Dion Pettaway

                                                                      Dion Pettaway
                                                                      Columbia, SC

                                                                      "As I'm someone who prefers reading to videos, I was hoping this book would be thorough and in depth. Happy to see that it was. I really like the explanations. It definitely solidified a few implementation things I never had a perfect grasp on (lightbulb moment for HOC even though I technically use them)."

                                                                      Derek Hammitt

                                                                      Derek Hammitt
                                                                      Chicago, IL

                                                                      "I'm in the exact place your book describes - feeling more and more comfortable with HTML/CSS/JavaScript, just getting started with React, building an API with Express, and struggling through my first full application. I've leaned Node and Express' docs, and MDN's Express tutorials. Your book is an awesome complement to those resources."

                                                                      Stanley Festus

                                                                      Stanley Festus
                                                                      Helsinki, Finland

                                                                      "What I like most about this book is that everything is explained in a way that I know what every line of code is doing. Most tutorials assume too much, and readers tend to lose track at some point."

                                                                      Matt Moyles

                                                                      Matt Moyles

                                                                      "I found it very useful in helping to accelerate my next.js learning. I followed along with the book in building the sample app, and then used the async-labs/saas boilerplate to start a new app at my day job. The book definitely helped me get from 0 to 60 on next.js in a shot period of time, and I’m now feeling pretty comfortable with next.js. I also really like the hands on approach. Building a sample app is a great way to learn a new framework!"

                                                                      Eleazar Ramos

                                                                      Eleazar Ramos

                                                                      "Going through the book now and it’s excellent. I took a boot camp last year, but haven’t really coded since. It is a great refresher of concepts, and for the new things I’m learning, it explains it concisely! I’ll be using these concepts for a SaaS app that I’m building."

                                                                      Clayton Hanson

                                                                      Clayton Hanson
                                                                      Charlotte, NC

                                                                      "Builder Book helped me climb out of the Valley of Despair, which is the area between learning basic HTML and being able to code higher functions proficiently. It's rewarding work to get through each chapter and I can't wait to start the SaaS book."

                                                                      Lily Barrett

                                                                      Lily Barrett
                                                                      Boston, MA

                                                                      "I love the matter-of-fact, unpretentious tone of this book and the fact that an actual, tangible project (rather than just a “Hello World” website) awaits us at the end."

                                                                      Massimiliano Bertinetti

                                                                      Massimiliano Bertinetti
                                                                      Turin, Italy

                                                                      "This book teaches you to develop a professional project from start to end, with good references and a real product (the site for the book is the web app you develop). Really a good job!"

                                                                      Svitlana Shepitsena

                                                                      Svitlana Shepitsena
                                                                      Chicago, IL

                                                                      "A clear explanation, possibility to see a result of your work step by step and finally get a real full-stack application makes programming a real joy. And the most important, this book pays special attention to a server-side rendering."

                                                                      Julian Mayorga

                                                                      Julian Mayorga
                                                                      Mendoza, Argentina

                                                                      "Builderbook is awesome. I love the fact that it goes beyond just building simple demos. It teaches you to build production apps. You learn to build the app that you use to read the book."

                                                                      Justin Collier

                                                                      Justin Collier
                                                                      Lincoln, NE

                                                                      "I was looking for help with getting started using Next + Jest and I found this book's instructions very easy to digest and use."

                                                                      Rocio Roman

                                                                      Rocio Roman
                                                                      Los Angeles, CA

                                                                      "As a student studying computer science, most of what we learn is theoretical. This book is the perfect guide to learn more about back-end, front-end, and how they all connect to make a responsive web app."

                                                                      Fabrizio Filippini

                                                                      Fabrizio Filippini
                                                                      Kansas City, MO

                                                                      "I was looking to get into front-end and back-end development and this book gave me the perfect project to touch all aspects of web development. Great one-stop-shop learning tool!"

                                                                      Kevin Gómez

                                                                      Kevin Gómez
                                                                      Medellin, Colombia

                                                                      "There are tons of resources to learn React + Node, but none are like Builder Book. It's one of the best online resources to invest your money. You'll learn all you need to set up your React project following the 'learn by doing' principle."

                                                                      Suresh Swamy

                                                                      Suresh Swamy
                                                                      Wellington, New Zealand

                                                                      "For those who want to build a complete, full-stack project using the MERN stack, this is a great resource. Particularly, the authentication using promise was highly useful."

                                                                      Taylor Cox

                                                                      Taylor Cox
                                                                      Tampa, FL

                                                                      "While I went to a code boot camp, I don't have the opportunity to use more than HTML and CSS at work. This book helps me expand into new technologies and establish myself as not just a designer but a developer."

                                                                      Owen Caulfield

                                                                      Owen Caulfield
                                                                      Cardiff, CA

                                                                      "Awesome full-stack tutorial that goes deep in-depth on a number of topics- this one stands above the crowd."

                                                                      Lester Infiesto

                                                                      Lester Infiesto
                                                                      Central Visayas, Philippines

                                                                      "Many online sources teach you to build things on a narrow vision, but this book gives you an excellent view of what you're actually building. Very helpful for developers of all levels."


                                                                      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