IG.NEWS

Summary

• 🧾 About
• 🚀 Main technologies
• 🔽 How to download the project
• 💻 How to run the project
• 👨‍🔧 Services
• 👌 How to use the app
  

🧾 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

• React
• Typescript
• Sass
• NextAuth
• Fauna
• Stripe
• Prismic

(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.

   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

   To get the last key, download the 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=

   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.

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

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

   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:

   The key will be shown on the screen:

   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.

   By accessing the OAuth Apps menu, create a new 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

   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

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

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

   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.

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

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

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

   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:

   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:

👌 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:

---

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