Switch branches/tags
Nothing to show
Find file History
YuriGor and klyburke use prettier as eslint plugin (#170)
* Handlebars replaced by lodash.template(#128) SES region option moved to .env(#124)

* Delete .gitignore

* keep .gitignore the same in all Chapters

* keep `EmailTemplate.js` in main repo the same for now

* use prettier as eslint plugin.

* bad merge from upstream fixed

* try to rollback unnecessary changes
Latest commit 348166a Dec 16, 2018


Our book

This folder contains the codebases for each chapter of our book, which teaches you how to build the entire Builder Book web app from scratch.

In each chapter, you'll begin with the start folder and build up to the end folder for that chapter. In total, you'll go from 0 lines of code in Chapter 1 to over 10,000 lines of code in Chapter 8.

What you'll learn

  • how to build a web app with a modern JavaScript stack: React, Material-UI, Next, Express, Mongoose, MongoDB
  • how to integrate a web app with popular third party APIs: Google for user authentication, Github for markdown and collaboration, AWS SES for transactional emails, MailChimp for newsletters, Stripe for selling

Why this book?

  • learn 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; customize the code to make it your own, and share it on your resume to land your next job

Who is the book for?

This book assumes basic knowledge of HTML, CSS, React, and JavaScript. However, we've aimed to explain every line of code in our book. In cases where we do not describe a feature of JavaScript, React, or frameworks and packages that we use, we provide links for you to learn about them.

We provide a free preview for every chapter to help you decide whether this book is for you. See the links below in the table of contents section.

Throughout the book, you will:

  • get familar with React, Next.js, and Material-UI
  • create an Express server and Session
  • connect your app to MongoDB with the help of Mongoose
  • add Google OAuth 2.0 for user authentication
  • integrate your app with third-party applications: Github, Stripe, AWS SES, and Mailchimp
  • create User, Book, Chapter, EmailTemplate, and Purchase models
  • write dozens of static methods for these models, as well as for Express routes and API methods
  • write dozens of pages, components, and more

Table of contents

  1. App structure. Next.js. HOC. Material-UI. Server-side rendering. Styles.
  2. Server. Database. Session. Header and MenuDrop components.
  3. Authentication HOC. Promise. Async/await. Static method for User model. Google OAuth.
  4. Testing with Jest. Debugging with Winston. Transactional emails. In-app notifications.
  5. Book and Chapter models. Internal API. Render chapter.
  6. Github integration. Admin dashboard. Testing Admin UX and Github integration.
  7. Table of Contents. Highlight for section. Hide Header. Mobile browser.
  8. BuyButton component. Buy book logic. ReadChapter page. Checkout flow. MyBooks page. Mailchimp API. Deploy app.