We keep the book up-to-date with the latest frameworks and packages.
- Table of Contents
- Why this book?
- Who is this book for?
- What will you learn?
- Project structure
- Customer pages
- Admin pages
link Table of Contents
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.
- App structure. Next.js. HOC. Material-UI. Server-side rendering. Styles.
- Server. Database. Session. Header and MenuDrop components.
- Authentication HOC. Promise. Async/await. Static method for User model. Google OAuth.
- Testing with Jest. Debugging with Winston. Transactional emails. In-app notifications.
- Book and Chapter models. Internal API. Render chapter.
- Github integration. Admin dashboard. Testing Admin UX and Github integration.
- Table of Contents. Highlight for section. Hide Header. Mobile browser.
- BuyButton component. Buy book logic. ReadChapter page. Checkout flow. MyBooks page. Mailchimp API. Deploy app.
link Why this book?
"What I cannot create, I do not understand." Richard Feynman
Now is the best time to learn how to code - the number of learning resources has never been so high. You can choose from numerous reference guides, video courses, blog posts, books, and online boards (e.g. Stack Overflow).
We personally used (and still use) all of these resources while learning web development. An abundance of learning resources is a good thing, but it does not guarantee that you will become a good engineer. An abundance of resources and limited time force you to choose resources carefully. In other words, learning how to learn and what to learn has never been as important as it is today.
If you just started learning web development, then reference guides, video courses, and tutorials will help you get familiar with basic principles and syntax. Great resources will show you not only how to do something but also explain why.
Once you are familiar with principles and some syntax, the next step is to build your own web application. At this point, you've learned how to think logically like a developer, so you'll enjoy learning backend engineering as much as frontend. You will still use reference guides and other resources when you forget something or need to learn a new concept. However, despite the abundance of resources to learn the basics, the number of resources that teach you how to build a modern, large-scale, production-ready web application from scratch is relatively low.
We don't argue that everyone who learns coding should start with building a large project. But we do strongly suggest that developers - who have learned the basics and want to take the next step in advancing their web development skills - build a complete application from scratch. Since knowledge is organized as a tree-like structure, building one large web application will force you to glue all the disconnected pieces of knowledge you've learned into one, tree-like, systematic structure.
This book walks you through building a modern web application from scratch. We wrote it because we wish we had a similar resource when we were learning how to build web apps. You will start from 0 lines of code in Chapter 1 and end up with over 10,000 lines of code by Chapter 8. In the end, you'll have your own production-ready web app, which you can add to your portfolio or even use to start a business.
You may have learned about server-side rendering, session, cookie, API endpoint, internal API, GET/POST methods, Promise, async/await, model, schema, index, routing, express, http, request/response, server/client, third-party APIs, lifecycle hooks, OAuth, and many other concepts. But have you ever put them all together into one working application?
To rephrase one popular meme
Do you even lift, bro?
Have you ever built a production-ready web application from scratch by yourself?
link Who is this book for?
We provide a free preview for every chapter to help you decide whether this book is for you. You can see the following for free in each chapter:
- Detailed table of contents with sections and subsections
- Complete codebases for the chapter's start and end
- List of packages discussed in the chapter
- A preview of the chapter's beginning content
To see a detailed list of all the technologies that you will learn, check out package.json.
Promise.then but you prefer
async/await. If so, this book will help you organize many unrelated concepts that you've learned from reference guides and tutorials into a single system.
link What will you learn?
In this book, you will build your own production-ready web application (see the project structure below). Throughout the book, you will:
- get familar with React, Next.js, and Material-UI
- learn about client-side and server-side rendering
- learn about internal and external APIs
- learn about request, response, cookie, session, authentication
- create an Express server and Session
- connect your app to MongoDB with the help of Mongoose
- learn about Mongoose's and MongoDB's APIs
- add Google OAuth 2.0 for user authentication
- integrate your app with third-party applications: Google, Github, Stripe, AWS SES, and Mailchimp
- create User, Book, Chapter, EmailTemplate, and Purchase models
- learn and create over a dozen of static methods for these models, as well as for Express routes and API methods
- learn and create over a dozen of page components, non-page components, and more
- prepare your app for production and deploy app to Now v1 (depreciated) and Heroku
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 Project structure
In total, you will write more than 10,000 lines code over 8 chapters. Your final web app will have the following structure:
. ├── components # React components │ ├── admin # Components used on Admin pages │ │ ├── EditBook.js # Edit title, price, and repo of book │ ├── customer # Components used on Customer pages │ │ ├── BuyButton.js # Buy book │ ├── Header.js # Header component │ ├── MenuDrop.js # Dropdown menu │ ├── Notifier.js # In-app notifications for app's users │ ├── SharedStyles.js # List of _reusable_ styles ├── lib # Code available on both client and server │ ├── api # Client-side API methods │ │ ├── admin.js # Admin user methods │ │ ├── customer.js # Customer user methods │ │ ├── getRootURL.js # Returns ROOT_URL │ │ ├── public.js # Public user methods │ │ ├── sendRequest.js # Reusable code for all GET and POST requests │ ├── context.js # Context for Material-UI integration │ ├── env.js # Universal config for environmental variables │ ├── notifier.js # Contains notify() function that loads Notifier component │ ├── withAuth.js # HOC that passes user to pages and more │ ├── withLayout.js # HOC for SSR with Material-UI and more ├── pages # Pages │ ├── admin # Admin pages │ │ ├── add-book.js # Page to add a new book │ │ ├── book-detail.js # Page to view book details and sync content with Github │ │ ├── edit-book.js # Page to update title, price, and repo of book │ │ ├── index.js # Main Admin page that has all books and more │ ├── customer # Customer pages │ │ ├── my-books.js # Customer's dashboard │ ├── public # Public pages (accessible to logged out users) │ │ ├── login.js # Login page │ │ ├── read-chapter.js # Page with chapter's content │ ├── _document.js # Allows to customize pages (feature of Next.js) │ ├── index.js # Homepage ├── server # Server code │ ├── api # Express routes, route-level middleware │ │ ├── admin.js # Admin routes │ │ ├── customer.js # Customer routes │ │ ├── index.js # Mounts all Express routes on server │ │ ├── public.js # Public routes │ ├── models # Mongoose models │ │ ├── Book.js # Book model │ │ ├── Chapter.js # Chapter model │ │ ├── EmailTemplate.js # Email Template model │ │ ├── Purchase.js # Purchase model │ │ ├── User.js # User model │ ├── utils # Server-side utilities │ │ ├──slugify.js # Generates slug for any Model │ ├── app.js # Custom Express/Next server │ ├── aws.js # AWS SES API │ ├── github.js # Github API │ ├── google.js # Google OAuth API │ ├── logs.js # Logger │ ├── mailchimp.js # MailChimp API │ ├── routesWithSlug.js # Express routes that contain slug │ ├── sitemapAndRobots.js # Express routes for sitemap.xml and robots.txt │ ├── stripe.js # Stripe API ├── static # Static resources │ ├── robots.txt # Rules for search engine bots ├── test/server/utils # Tests │ ├── slugify.test.js # Unit test for generateSlug() function ├── .env # Environmental variables for sever code ├── .eslintrc.js # Config for Eslint ├── .gitignore # List of ignored files and directories ├── now.json # Settings for now from Zeit ├── package.json # List of packages and scripts ├── yarn.lock # Exact versions of packages. Generated by yarn.
In this book, you will build your own Builder Book app. This website itself is a Builder Book app! You are welcome to add the final app you build in this book to your portfolio or resume. You can even use it to start a business.
The main use cases for this app, besides learning, are:
- to write and host free documentation
- to write, host, and sell books
The app has two primary users,
- the Customer user reads chapters (for free or buys a book)
- the Admin user writes content and hosts content (free or paid) on his/her website
The app uses both server-side and client-side rendering. For initial load, pages are rendered by the server; for subsequent loads, pages are rendered on the client.
Below are screenshots of the main pages you'll build for your app.
link Customer pages
- Chapter excerpts: this page shows some free, sample content to visitors and registered users who have not bought a book yet.
- Purchased book content: after logging in (with Google) and purchasing the book (via Stripe), the Customer can see the full content of the chapters.
link Admin pages
- Add/edit book: to create a book, the Admin chooses a price, writes a title, and selects a Github repo that contains the book content.
- Book details: to update the content of a book, the Admin syncs with content hosted on a Github repo.
We keep the book up-to-date with the latest frameworks and packages.