Giter VIP home page Giter VIP logo

ignews's Introduction

Coverage

"Hello! ๐Ÿ‘‹

Welcome to my GitHub repository for the blog project I created during a ReactJS boot camp. This project was built using Next.js, Stripe, OAuth with NextAuth with the GitHub provider, FaunaDB, Prismic, and Jest.

The main purpose of this project was to enhance my knowledge and skills in unit testing. As part of the boot camp, we were taught to use Sass, but I took the initiative to switch to Tailwind CSS to further develop my skills in that area.

The project is based on an old module from the Ignite boot camp in 2021. It served as a valuable case study to learn and practice unit testing with Jest.

Feel free to explore the code, provide feedback. I'm open to collaboration and appreciate any suggestions for improvement.

Thank you for visiting and happy coding! โœจ"

Ig.News

Ig.News is a newsletter application created for educational purposes. It covers various points and tools of knowledge. The technologies and services used in this project include:

  • NextJS (Page Router)
  • NextJS (API)
  • NextAuth (Gibhub Oauth Provider)
  • Tailwind (Css Framework)
  • Stripe (Payment Gateway)
    • Stripe Webhooks to update users subscriptions status
  • FaunaDB (Serveless Database)
  • Prismic (CMS)
  • Tests (Jest)

Installation

To install the project dependencies, run the following command:

pnpm install

Setup

Copy the file .env.local.example and remane it to .env.local. them follow the next steps:

FaunaDB Setup

To set up FaunaDB:

  1. Go to the FaunaDB Dashboard web page and create a new database.

  2. Configure the following collections:

    • Collection: users
      • Schema: { email: string, stripe_customer_id: string }
    • Collection: subscriptions
      • Schema: { id: string, userId: Ref(Collection(users), id), status: string, price_id: string }
  3. Configure the following indexes:

    • Index: user_by_stripe_customer_id

      • Source collection: users
      • Terms: data.stripe_customer_id
    • Index: user_by_email

      • Source collection: users
      • Terms: data.email
    • Index: subscription_by_user_ref

      • Source collection: subscriptions
      • Terms: data.userId
    • Index: subscription_by_status

      • Source collection: subscriptions
      • Terms: data.status
    • Index: subscription_by_id

      • Source collection: subscriptions
      • Terms: data.id
  4. Obtain the FaunaDB secret key:

    • In FaunaDB Dashboard, go to the dabatabase page > Settings > Security > Database keys.
    • Create a secret key and copy its value.
  5. Set the FAUNADB_SECRET_KEY environment variable in the .env.local file to the secret key obtained in the previous step.

create a secret copy the value and:

on the file .env.local assign the var FAUNADB_SECRET_KEY.

Stripe Setup
  1. Open the stripe website and login to your account.
  2. Navigate to the Dashboard page.
  3. Go to the Products tab and click on Add Product.
  4. Fill in the necessary information for the product, including its name.
  5. In the pricing section, select Standard price and set the price with a billing period of Monthly.
  6. Save the changes.
  7. Obtain the Stripe secret key
    • In the Stripe Dashboard, go to the Developers page > API Keys.
    • Copy the Secret Key from the Standard Keys section.
  8. Set the STRIPE_SECRET_KEY environment variable in the .env.local file to the secret key obtained in the previous step.
Stripe CLI Setup (DevTool)

The Stripe CLI is required in development mode to listen to Stripe WebHooks events and forward them to the local server.

Follow these steps to set up the Stripe CLI:

documentation

  1. Login to your Stripe account by running the following command in the terminal:
stripe login
  1. Hit enter to open the integration link in the browser, accept the integration, and then check the terminal for the returned key.

  2. Paste the returned key value into the .env.local file, assigning it to the STRIPE_WEBHOOK_SECRET_KEY variable.

  3. Start the webhook listener to redirect events to the local server in development mode by running the following command:

pnpm stripe:dev
Prismic CMS

Prismic Slice Machine is a development tool used to build Page types, Custom types, and Slices. In this project, only a Custom type named Post is used.

To use Slices and Page types, follow the documentation.

To start Prismic Slice Machine, run the following command:

 pnpm slicemachine

It will run at port 9999

To create Posts:

  1. Login to the Prismic Dashboard.
  2. Select the repository.
  3. Go to the Work tab and click on Create New.
  4. Fill in the fields for title and content.
  5. Click on the Publish button.

The created post will now be available in the project and can be fetched using the Prismic API request.

Github OAuth Provider
To set up the GitHub OAuth provider, follow these steps:
  1. Login to your GitHub account and go to the repository that will be the app's OAuth host.
  2. Navigate to Settings > Developer Settings > GitHub Apps > New GitHub App.
  3. Fill in the required data for the GitHub App. For the homepage URL, you can use http://localhost:3000, and for the Authorization callback URL, use http://localhost:3000/api/auth/callback/github in development mode.
  4. Click on Create GitHub App.
  5. Take note of the Client ID and Client Secret provided by GitHub.
  6. In the .env.local file, set the GITHUB_ID variable to the Client ID obtained in the previous step, and set the GITHUB_SECRET_KEY variable to the Client Secret.

Development Mode Scripts

To run the project in development mode, you can use the following scripts:

  pnpn run dev

This script runs the project in development mode.

pnpn  run stripe:dev

This script starts the Stripe tool that redirects webhook events to the local Next.js API.

ignews's People

Contributors

luiz504 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.