Introduction
What you will learn
Why should I pay $49 for this book?
Project structure
Screenshots
- Customer pages
- Admin pages
Authors
"What I cannot create, I do not understand." Richard Feynman
What you will learn link
In this book, you'll build a full-stack JavaScript web application from scratch. You will learn how to structure your project and build many internal and external API infrastructures.
On the browser, the main technologies you will learn are: Next.js, React.js, Material-UI.
On the server, the main technologies you will learn are: Next.js, Node.js, Express.js, Mongoose.js, MongoDB database.
Most components explained in this book are class components. However in Chapter 9, we take our largest ReadChapter class component and show you how to convert it into a functional ReadChapterFunctional component. We discuss in detail how to convert React's lifecycle methods to hooks. We also run experiments in Chapter 9 on how lifecycle methods and hooks fire when we load pages in our Next.js web application. Finally, we created a 9-end-functional codebase, where we converted our entire final project from class components to functional components. You can look at the book/9-end and book/9-end-functional folders of our GitHub repo to see how the codebases compare. The final builderbook app of our GitHub repo is written with functional components.
In addition to the above technologies, you will learn and integrate your web application with the following external API services:
- Google OAuth API
- Github API
- Stripe API
- AWS SES API
- Mailchimp API
Plus, you will learn many concepts, such as session and cookie, headers, HTTP request-response, Express middleware, Promise, async/await, and more. You have to know these concepts to be a confident web developer, no matter what language you use.
The book has 9 chapters, which are shown in the Table of Contents on the left menu. Click any title to see a free preview of that chapter. If you are logged in and you purchased the book, then you will see the full content instead of a preview.
It's impossible to list everything you will learn in this book, but to help you decide if this book is right for you, you can do the following:
- Go to https://github.com/async-labs/builderbook/tree/master/book. Check up the code and
package.jsonfiles of each project. Since we explain how to build a project from scratch, you will know exactly what we will discuss in the book. At the very least, you should check thepackage.jsonfile of the final app you build: https://github.com/async-labs/builderbook/blob/master/builderbook/package.json - Check up the Table of Contents on the left.
- Click through the Table of Contents and read the preview for each chapter.
Doing the above steps will help you understand whether this book will teach you the skills and concepts that you want to learn.
By the end of this book, you will write close to 4,000 lines of code.
Why should I pay $49 for this book? link
When we first started building our own software, we spent countless hours researching on Google, sifting through answers on Stack Overflow, reviewing GitHub issues/comments, and piecing together code from blog posts and tutorials. You've probably done the same! The process is time consuming and frustrating, especially when you find that information is oudated.
We wanted to create a single up-to-date resource that covered building a web app from scratch, start to finish.
After selling over 2000 copies of this book over three years, we see that both junior and senior web developers buy this book.
Typically, junior developers or recently-graduated students who buy this book are not familiar with the stack. They may only know one or two technologies from the stack. Sometimes we get requests to buy one copy of the book for a group of students who are currently enrolled in a web development course. Obviously, if you are not familiar with the technology stack, and you are relatively new to JavaScript - this book is definitely for you. You will save a lot of time by building an actual project from scratch instead of acquiring fragmented knowledge from reading articles on Medium, piecing together code from short tutorials, and building parts of project infrastructure or unfinished projects.
We see that senior developers from small and big companies buy this book too. After asking such people why they bought the book, the most common answer is that they wanted to learn this particular stack or at least some of it. They could have learned it by themselves, but they are busy working and want to save money by buying this book. Their time is too valuable to learn on their own. If it takes such a web developer 3-4 hours of online research to implement Stripe API using a new approach (with Session), these 3-4 fours of their time may have cost $150-$400 at minimum. So paying $49 for just learning how to implement Stripe API (with Session) is a no-brainer, especially if they found something else to learn from the same book.
Our second book, SaaS Boilerplate Book, is purchased mainly by experienced web developers who have a business idea and want to start quickly. We typically get fewer low-level questions (could not start project, could not set up ESLint, could not debug API, forgot to pass environmental variable) and many more high-level questions about extensibility, scalability, choice of technology, project structure, deployment, adding similar data models and APIs, etc.
At the end of the day, only you can answer whether this book is for you and worth paying for. After you've checked our public code and read the preview for each chapter, you may decide that you already know all the skills and concepts we teach in this book. Or you may decide that this book will save you more time than it costs.
Although we strongly recommend that you study our public code and the preview for each chapter, here are reviews provided by people who already read our books: https://builderbook.org/book-reviews
If you decide to purchase Builder Book, we are here to help. We've answered hundreds of our readers' questions via email and via issues in our public GitHub repo. We also regularly update packages and code in this book. So far, we have made >500 improvement/updates (see commits).
Project structure link
Take a look at the final code and the codebase for each chapter.
In total, you will write close to 4,000 lines code over 9 chapters. Your final project can be found in book/9-end or in our buildebook directory. Here is the structure of our builderbook project:
.
├── .vscode
│ ├── extensions.json
│ ├── settings.json
├── book
├── builderbook
│ ├── .ebextensions
│ │ ├── environment.config
│ │ ├── git.config
│ ├── .elasticbeanstalk
│ │ ├── config.yml
│ ├── components
│ │ ├── admin
│ │ │ ├── EditBook.jsx
│ │ ├── customer
│ │ │ ├── BuyButton.jsx
│ │ ├── Header.jsx
│ │ ├── MenuWithAvatar.jsx
│ │ ├── Notifier.jsx
│ │ ├── SharedStyles.js
├── lib
│ ├── api
│ │ ├── admin.js
│ │ ├── customer.js
│ │ ├── getRootURL.js
│ │ ├── public.js
│ │ ├── sendRequest.js
│ ├── notify.js
│ ├── theme.js
│ ├── withAuth.jsx
├── pages
│ ├── admin
│ │ ├── add-book.jsx
│ │ ├── book-detail.jsx
│ │ ├── edit-book.jsx
│ │ ├── index.jsx
│ ├── customer
│ │ ├── my-books.jsx
│ ├── public
│ │ ├── login.jsx
│ │ ├── read-chapter.jsx
│ ├── _app.jsx
│ ├── _document.jsx
│ ├── index.jsx
├── public
│ ├── robots.txt
├── server
│ ├── api
│ │ ├── admin.js
│ │ ├── customer.js
│ │ ├── index.js
│ │ ├── public.js
│ ├── models
│ │ ├── Book.js
│ │ ├── Chapter.js
│ │ ├── EmailTemplate.js
│ │ ├── Purchase.js
│ │ ├── User.js
│ ├── utils
│ │ ├──slugify.js
│ ├── aws-ses.js
│ ├── github.js
│ ├── google.js
│ ├── logger.js
│ ├── mailchimp.js
│ ├── routesWithSlug.js
│ ├── server.js
│ ├── sitemapAndRobots.js
│ ├── stripe.js
├── test/server/utils
│ ├── slugify.test.js
├── .eslintrc.js
├── .gitignore
├── next.config.js
├── package.json
├── yarn.lockScreenshots link
In this book, you will build your own Builder Book project. This website itself is built using the project you will build in this book! You are welcome to add the final web application that you build in this book to your portfolio or resume. You can even use it to sell online content or extend it further.
The main use cases for this project, besides learning, are:
- To write and host free documentation, with Github being the source of truth for content.
- To sell online content, such as books.
- To extend it (see our second book, SaaS Boilerplate Book) to start a software business.
The project has three user roles: Public, Customer and Admin. We discuss more on user roles in Chapter 5. The final web application has both server-side and client-side rendered pages. For initial load, pages are rendered on the server; for subsequent loads (clicking on internal navigation links), pages are rendered on the browser.
Below are some screenshots from the project you will build in this book.
Customer pages link
- Chapter excerpts: this page shows some free, preview content to visitors and registered users who have not bought a book yet.
- Purchased book content: after logging in (with Google OAuth API) and purchasing the book (via Stripe API), the Customer can see the full content of the chapter.
Admin pages link
- Add and 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.
Authors link
We:
- maintain two popular repos (combined: over 6000 stars and 1000 unique visitors per week).
- built and maintain the most popular React/TypeScript/Node boilerplate for starting a SaaS business.
- built Async, open source team communication web app to separate urgent vs non-urgent conversations.
- built Work in biotech, growing niche job board for biotech startups.
- built AI-cruiter, browser extension is built for recruiters managing a high volume of job applicants. AI-cruiter uses LLMs - like ChatGPT, PaLM 2, our private fine-tuned LLM - to generate succinct and relevant summaries of your job applicants' resumes.
- built over a dozen SaaS web applications in the last 10 years and offer custom development service: async-labs.com
Learn more about us at Async Labs.
You can find us on GitHub:
If you are part of a small team and looking for an open source team communication tool, check up Async.
If you need help with your SaaS web application, check out Async Labs.