Welcome, this application is a NewsLetter with a Paywall, an intuitive Next.js and React.js project integrating GitHub OAuth, FaunaDB, Stripe, and Prismic.
Before setting up the project on your local machine, ensure the following dependencies are installed:
- A package manager (we recommend yarn, but npm or pnpm will work too)
- Git
- Node.js
- Clone the repository by running:
git clone https://github.com/Feelpe/next-paywall-newsletter.git
- Move to your project directory and install the project dependencies:
cd next-paywall-newsletter
yarn install
Before running the application, set up the necessary accounts and obtain the required environment variables.
Ensure you have a GitHub account. Create an OAuth app through GitHub, following GitHub OAuth Documentation for guidance. Note your "Client ID" and "Client Secret".
Create a FaunaDB account and key as described in the FaunaDB Documentation. You will also need to create two collections named "subscriptions" and "users".
Following Stripe Documentation, create a Stripe account, and set up a new product. Keep track of the "Publishable key", "Secret key", and Product's ID.
Stripe requires a webhook for real-time notifications. Install the Stripe CLI, authenticate your Stripe account, and forward your local webhook endpoint to Stripe.
Set up a Prismic account and repository based on Prismic Documentation. Create a new custom type with a Title (Text) and Content (Rich Text) field.
Create a .env.local file at the root of your project. Paste the following content into the file and replace placeholders with your personal values:
# Stripe
STRIPE_API_KEY=
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
STRIPE_API_PRODUCT=
# Stripe Webhooks
STRIPE_WEBHOOK_SECRET=
STRIPE_SUCCESS_URL=http://localhost:3000/posts
STRIPE_CANCEL_URL=http://localhost:3000/
# Github
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
# FaunaDB
FAUNADB_KEY=
# Prismic CMS
PRISMIC_ENDPOINT=
PRISMIC_ACCESS_TOKEN=
yarn dev
Now open http://localhost:3333 to view it in your browser.