Support Ukraine: link<br>

Builder Book

Open source web app to self-publish and sell books or other online content.

If you want to learn how to build this project from scratch, check out our book: https://builderbook.org.

The open source project is located in the builderbook folder. If you purchased our book, codebases for each of the book's chapters are located in the book folder.

We've used this builderbook project to build:

Builder Book - learn how to build full-stack web apps from scratch
SaaS Boilerplate - open source web app to build your own SaaS product
Work in biotech - job board for biotech startup companies
AI-cruiter - browser extension is built for recruiters managing a high volume of job applicants. AI-cruiter uses LLMs - like ChatGPT and PaLM 2 - to generate succinct and relevant summaries of your job applicants' resumes
Async - open source urgent vs non-urgent team communication tool for small teams
Async Labs - many custom dev projects

Live app:

https://builderbook.org/books/builder-book/introduction

Showcase

Check out projects built with the help of this open source app. Feel free to add your own project by creating a pull request.

Retaino by Earl Lee: Save, annotate, review, and share great web content. Receive smart email digests to retain key information.
michaelstromer.nyc by Michael Stromer: Books and articles by Michael Stromer.
SaaS Boilerplate: Open source web app to build your own SaaS product.
Work in biotech: Job board for small and young biotech companies
Async: Open source web app for team communication, separate urgent vs. non-urgent conversations.
Async Labs: We build custom SaaS web applications.

What can I learn from this project?
Run locally
Add a new book
Add your own styles
Deploy to Heroku
Scaling
Docker
Screenshots
Built with
- Core stack
- Third party APIs
Contributing
Team
License
Project structure

What can I learn from this project?

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.

In addition to the above technologies, you can learn how to integrate your web application with the following external API services:

Plus, you can 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 main use cases for this project, besides learning, are:

To write and host free documentation with Github being a source of truth for content.
To sell online content, such as books.
To extend it (see our second book, SaaS Boilerplate Book) to start software business.

Creating a Google OAuth Client

This guide will walk you through the steps to create a Google OAuth client for your application.

Prerequisites

Before you begin, make sure you have the following:

A Google account
Access to the Google Cloud Console

Sign in to Google Cloud Console:

Go to the Google Cloud Console.
Sign in with your Google account or create one if you don't have it.

Create a New Project:

Click on the project dropdown in the top navigation bar.
Click on "New Project."
Give your project a name and click "Create."

Enable the Google+ API (if required):

If you plan to use Google+ Sign-In for authentication, enable the "Google+ API" for your project.
In the Cloud Console, go to the API & Services > Library.
Search for "Google+ API" and enable it.

Create OAuth Client ID:

In the Cloud Console, navigate to the API & Services > Credentials page.
Click on "Create Credentials" and then select "OAuth client ID."
Select the application type, typically "Web application" for a website or web application.
Fill out the necessary information, such as the name of the OAuth client and authorized redirect URIs (where Google should redirect the user after authentication). You can use http://localhost as a redirect URI for development.
Click "Create" to generate your OAuth client credentials. It will provide you with a client ID and client secret.

Creating a GitHub Client ID and Client Secret

To create a GitHub Client ID and Client Secret, follow these steps:

Sign in to your GitHub Account: If you don't have a GitHub account, create one.
Go to Developer Settings: Click on your profile picture in the top right corner of GitHub and select "Settings." In the left sidebar, under "Developer settings," click on "OAuth Apps."
Create a New OAuth App: Click on the "Register a new application" button.
Fill in the Application Details: You'll be prompted to fill in details about your application:
- Application Name: The name of your application.
- Homepage URL: The URL to your application's website.
- Application Description: A brief description of your application.
- Authorization callback URL: This is the URL to which GitHub will redirect users after they authorize your application. For testing purposes, you can use http://localhost if you're developing locally.
Generate Your Client ID and Client Secret: After you've filled in the details, click the "Register application" button. GitHub will generate a Client ID and Client Secret for your application.

Run locally

Clone the project and run yarn to add packages.
Before you start the app, create a .env file at the app's root. This file must have values for some env variables specified below.
- To get MONGO_URL_TEST, we recommend a free MongoDB at MongoDB Atlas (to be updated soon with MongoDB Atlas, see issue).
- Get GOOGLE_CLIENTID and GOOGLE_CLIENTSECRET by following official OAuth tutorial.
  
  Important: For Google OAuth app, callback URL is: http://localhost:8000/oauth2callback <br/> Important: You have to enable Google+ API in your Google Cloud Platform account.
- Specify your own secret key for Express session SESSION_SECRET: https://github.com/expressjs/session#secret
To use all features and third-party integrations (such as Stripe, Google OAuth, Mailchimp), create a .env file and add values for all variables as shown below. These variables are also listed in .env.example, which you can use as a template to create your own .env file.

.env :

# Used in server/server.js
MONGO_URL=
MONGO_URL_TEST=
SESSION_SECRET=

# Used in lib/getRootUrl.js
NEXT_PUBLIC_URL_APP=
NEXT_PUBLIC_PRODUCTION_URL_APP="https://heroku.builderbook.org"

# Used in server/google.js
GOOGLE_CLIENTID=
GOOGLE_CLIENTSECRET=

# Used in server/aws.js
AWS_ACCESSKEYID=
AWS_SECRETACCESSKEY=
AWS_REGION=

# Used in server/models/User.js
EMAIL_ADDRESS_FROM=

----------
# All environmental variables above this line are required for successful sign up

# Used in server/github.js
GITHUB_TEST_CLIENTID=
GITHUB_LIVE_CLIENTID=
GITHUB_TEST_SECRETKEY=
GITHUB_LIVE_SECRETKEY=

# Used in server/stripe.js
NEXT_PUBLIC_STRIPE_TEST_PUBLISHABLEKEY=
NEXT_PUBLIC_STRIPE_LIVE_PUBLISHABLEKEY=
STRIPE_TEST_SECRETKEY=
STRIPE_LIVE_SECRETKEY=
STRIPE_TEST_DEMO_BOOK_PRICE_ID=
STRIPE_LIVE_DEMO_BOOK_PRICE_ID=
STRIPE_TEST_SECOND_BOOK_PRICE_ID=
STRIPE_LIVE_SECOND_BOOK_PRICE_ID=

# Used in server/mailchimp.js
MAILCHIMP_API_KEY=
MAILCHIMP_REGION=
MAILCHIMP_PURCHASED_LIST_ID=
MAILCHIMP_SIGNEDUP_LIST_ID=

# Used in pages/_document.js and pages/_app.js
NEXT_PUBLIC_GA_MEASUREMENT_ID=
COOKIE_DOMAIN=".builderbook.org"

IMPORTANT: do not publish y

Builderbook

Install / Use

README