Skip to content

Latest commit

 

History

History
255 lines (181 loc) · 9.95 KB

README.md

File metadata and controls

255 lines (181 loc) · 9.95 KB
Raw

IG.NEWS

App

LEIAME.md

Summary

🧾 About

IG.NEWS is a newsletter about the React world. In it were implemented:

  • Pages that use SSR (Server Side Rendering) and SSG (Static Site Generation) concepts.
  • OAuth Authentication with Github using NextAuth.
  • Integration with the Fauna NoSQL database.
  • Integration with the Stripe online payments service
    This App also was configured to receive some webhooks from Stripe service. To be more precise, webhooks like: checkout session completed, customer subscription updated and customer subscription deleted.
  • Integration with the Prismic headless CMS (Content Management System).

🚀 Main technologies

(You can see all the dependencies in the package.json file)

🔽 How to download the project

$ git clone https://github.com/victorbadaro/ignite-ignews

💻 How to run the project

The commands below use the yarn package manager. Run them in your terminal

  1. Install the project dependencies

    $ yarn

  2. This app also depends on others services to work. They are services like: payment, authentication, database and CMS. All of them should be configured before the execution of this app. See the Services section.

  3. This app can be executed in both environments: production and development:

    • To run this application using development environment:

      $ yarn dev

    • To run this application using production environment:

      • Build the app

        $ yarn build

      • Now it's possible to run the app:

        $ yarn start

If everything runs correctly, a message will be displayed in your terminal informing that the server was started:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

After that open your browser and access: http://localhost:3000/

✅ Nice! If you followed all the steps above correctly the project will be running locally on your machine already.

👨‍🔧 Services

Before of all, create a file in the project root directory named .env.local. Insert the followings variables inside that file:

# Stripe
STRIPE_API_KEY=
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
STRIPE_WEBHOOK_SECRET=
STRIPE_SUCCESS_URL=http://localhost:3000/posts
STRIPE_CANCEL_URL=http://localhost:3000

# FaunaDB
FAUNADB_KEY=

# Github
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

# Prismic CMS
PRISMIC_ENDPOINT=
PRISMIC_ACCESS_TOKEN=

  1. Stripe
    Create an account on Stripe and register a product there. You can create a product by clicking on Products and then click on Add product. Select the Recurring option. Stripe product

    Three keys are necessary to the correct integration with the Stripe service.
    In the Stripe dashboard, click on Developers menu and then API Keys to get both keys: Publishable key and Secret key.
    Copy the keys for the file .env.local:
    STRIPE_API_KEY=Secrect key
    NEXT_PUBLIC_STRIPE_PUBLIC_KEY=Publishable key Stripe keys

    To get the last key, download the Stripe CLI: Stripe CLI

    And run the followings commands in your terminal:

    # Access the CLI directory
# Run:
./stripe login

# Após confirmar no navegador a autenticação execute:
# Run the following command after confirm the authentication in the browser
./stripe listen --forward-to http://localhost:3000/api/webhooks

    The key will be displayed on the screen. Copy it and past it inside the file .env.local in front of STRIPE_WEBHOOK_SECRET= Stripe webhooks key

    This last command must be running during the entire execution of the project.

  2. FaunaDB Create an account on Fauna and then a Database there. FaunaDB

    After giving a name for the created Database, create two Collections: subscriptions and users Create collection Create collection

    With those Collections created, now create the Indexes below following the example of the image: FaunaDB Index

    Index Name: user_by_email
Source Collection: users
Terms: data.email
Unique

Index Name: user_by_stripe_customer_id
Source Collection: users
Terms: data.stripe_customer_id

Index Name: subscription_by_id
Source Collection: subscriptions
Terms: data.id

Index Name: subscription_by_status
Source Collection: subscriptions
Terms: data.status

Index Name: subscription_by_user_ref
Source Collection: subscriptions
Terms: data.userId

    Now, after the database structure is ready (with Collections and Indexes), generate a Secret key. To do that, click on the Security menu and give a name to the new key: FaunaDB key

    The key will be shown on the screen: FaunaDB key2

    Copy that key and past it inside the .env.local file in front of FAUNADB_KEY=.

  3. Github Create an account on Github. Access the account settings and then click on Developer settings. Github

    By accessing the OAuth Apps menu, create a new OAuth App: Github OAuth App

    Fill the fields that will be displayed on the screen to register the OAuth application. In Homepage URL and Authorization callback URL fill following the model below:
    Homepage URL = http://localhost:3000
    Authorization callback URL = http://localhost:3000/api/auth/callback OAuth register

    After registering the OAuth application will be already possible to get the Client ID and the Client Secret. The Client Secret will be generated by clicking on the Generate a new client secret button.
    Copy the Client ID to inside the .env.local file, in front of GITHUB_CLIENT_ID= and the Client Secret in front of GITHUB_CLIENT_SECRET.
    GITHUB_CLIENT_ID=Client ID
    GITHUB_CLIENT_SECRET=Client Secret OAuth secrets

  4. Prismic CMS Create an account on Prismic and then create a repository: Prismic repository

    To start creating posts on Prismic CMS you should create a type named post before: Prismic type

    Drag those three items highlighted on the image below (UID, Title and Rich Text) to the blank page shown on the left side.
    Fill the API ID field from each item with these contents: uid, title and content respectively. Prismic type post

    With the post type created, access the Documents menu and register the posts that will be shown on the IG.NEWS application: Prismic Document

    The required fields to create a post are title and content: Prismic document 2

    After editing the document click on Save and then on Publish: Prismic document GIF

    Now with the document ready, get the API Endpoint and the Prismic access token.
    Copy the API Endpoint and put it in front of PRISMIC_ENDPOINT= inside the .env.local file: Prismic API endpoint

    Copy the generated Permanent access token (after clicking on Add token) and put it in front of PRISMIC_ACCESS_TOKEN= inside the .env.local file: Prismic access token


👌 How to use the app

IG.NEWS usage is really simple. It's a Newsletter about the React world. The posts published in it can be viewed for everyone, but only subscribed users will have access to read completed texts. To be a subscribed user, you must have an account on Github (to authenticate on IG.NEWS website) and make a monthly payment through the Stripe online payment service (a value reported on the Homepage). Don't worry, to test the application you won't need inform real data from your credit card or something like that. On the checkout screen from Stripe you can use the following credit card number:

4242 4242 4242 4242

This is a credit card number for tests from Stripe service.
See the application flow below: Ignews is running


This project was created and developed with ❤ by Victor Badaró