Our book

Learn how to build a full-stack 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.

What you'll learn

Modern 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.


Why this book?

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.

Grow your portfolio

Add the final app you build to your portfolio. After learning how to build it from scratch, you can easily customize the code to make the app your own. Share it on your resume to land your next job.


Table of contents

Chapter 1: App structure. Next.js. HOC. Material-UI. Server-side rendering. Styles.
  • Setup
  • Code editor and lint
  • App structure
  • Index page
  • Header component
  • withLayout HOC
  • Material-UI integration
  • Custom styles
  • Server-side rendering

  • Chapter 2: Server. Database. Session. Header and MenuDrop components.
  • HTTP
  • Express server
  • Database
  • Session
  • Update Header component
  • MenuDrop component

  • Chapter 3: Authentication HOC. Promise. Async/await. Static method for User model. Google OAuth.
  • Authentication 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
  • In-app notifications

  • Chapter 5: Book and Chapter models. Internal API. Render chapter.
  • Book model
  • Chapter model
  • Internal APIs
  • ReadChapter page
  • Testing

  • Chapter 6: Github integration. Admin dashboard. Testing Admin UX and Github integration.
  • Github integration
  • Markdown to HTML
  • Admin dashboard
  • Update Header component
  • Testing

  • Chapter 7: Table of Contents. Highlight for section. Hide Header. Mobile browser.
  • Table of Contents
  • Highlight for 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
  • ReadChapter page
  • Checkout UX
  • MyBooks page
  • Mailchimp API
  • Deploy app


  • 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."

    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."

    Sam Baines

    Sam Baines
    Midlands, UK

    "Excellent book for anyone looking to develop react/next/web app skills, even a relative beginner. Perfect for learning, and you build an app that can actually have uses like project/game documentation etc."

    Noel Cutler

    Noel Cutler
    London, UK

    "I completed a Girls First Coding Course where I learned HTML, CSS, and Javascript to build a basic website. I've wanted to build a web app next, and this book is a great guide to do so."

    Shane MacBride

    Shane MacBride
    Chico, CA

    "Great resource for learning an excellent suite of web technologies through a streamlined, hands-on process. No matter what background you come from, this book is an invaluable addition to your development arsenal."

    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."

    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!"

    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."

    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."

    Quan Vu

    Quan Vu
    New York, NY

    "I’m currently a college senior, and I'm planning to join a web development team for a full-time position after graduation. So this book is a great resource for that purpose."

    Rachel DiCesare

    Rachel DiCesare
    Fishkill, NY

    "JavaScript can be a hard language. But reading this book certainly helps me understand JavaScript much better and how to build something awesome with it!"

    Michelle Garcia

    Michelle Garcia
    Los Angeles, CA

    "This book is giving me step-by-step, purposeful practice in building my first React app! I really appreciate the hands-on approach, as I think this is the best way to learn something new."

    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."

    Cherian Porter

    Cherian Porter
    Houston, TX

    "I love that this book is so straightforward. It's also very helpful with screenshots! I have the basics down and can see that this book is my next step in learning web development."

    Steffani Brasil

    Steffani Brasil
    Vancouver, BC

    "I recommend this book to everyone who wants to understand how to build web applications with the latest technologies. The book has helped me achieve more solid knowledge of JavaScript."

    Conor Brady

    Conor Brady
    Dublin, Ireland

    "It's a fantastic book that really gives you the opportunity to learn how to create a full application while going through the instrinic details as if they were separate applications."

    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!"

    Nick Isaacs

    Nick Isaacs
    Bengaluru, India

    "Really good book to help you learn React, as well as the entire stack to get a web app into production. The github project was really helpful as a reference."

    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."

    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."

    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."

    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

    Together, we've built Builder Book and Harbor.
    If you're building a SaaS product, check out our SaaS boilerplate.

    Kelly Burke

    Kelly Burke
    Vancouver, WA

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

    Timur Zhiyentayev

    Timur Zhiyentayev
    Vancouver, WA

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


    © 2018 Builder BookTermsGithub