Sobre   |    Requisitos   |    Dependências   |    Começando   |    Next.Js   |    Variáveis Ambiente   |    Stripe CLI      

Aplicação desenvolvida no curso do Ignite, proporcionado pela Rocketseat, onde desenvolvemos um blog com publicações do mundo React. Nesse Blog, utilizamos tecnologias que permitiram a integração com uma API de pagamento, API de CMS, toda a parte de autenticação, o uso de páginas estáticas e indexadas e entre outras funcionalidades.

As tecnologias que utilizamos para tornar esse projeto real foi o Next.Js, NextAuth, Prismic CMS, FaunaDB, Stripe e outras.

Mas Mauricio, o que são essas tecnologias, posso usar também? Claro, pode usar sim! Todas essas tecnologias que foram utilizadas no projeto permitem o uso gratuito (com limitações). Agora, em relação ao que significa cada tecnologia, o Next.Js permite a criação de páginas estáticas e indexadas, que melhoram o SEO do site, e permite que a gente trabalhe com uma camada no “servidor”, logo, podemos trabalhar utilizando o conceito de serveless. O NextAuth disponibiliza para a gente diversas formas de autenticação para ser utilizada em nossa aplicação. O Stripe faz toda a parte do pagamento e assinaturas no nosso site, ele fica responsável por toda parte que envolve dinheiro. O Prismic(CMS) gerencia todas as nossas publicações do Blog, com um painel super simples, que permite a criação de novos posts, e com uma API que disponibiliza as nossas publicações para serem consumidas. Já o FaunaDB, é o nosso banco de dados, onde armazenamos os usuários cadastrados e suas assinaturas.

• Ter Git para clonar o projeto.
• Ter Node.js instalado.
• Ter Yarn instalado.
• Ter Stripe CLI instalado.
• Ter uma conta no FaunaDB
• Ter uma conta no Stripe
• Ter uma conta no Prismic CMS
• Criar as variáveis de ambiente
• Criar as credenciais do GitHub

• Next.js
• Typescript
• SASS
• axios
• Stripe
• FaunaDB
• NextAuth
• Prismic
• React Icons ...

  # Clonar o projeto:
  $ git clone https://github.com/MauricioPDuarte/ignews ignews

  # Entrar no diretório:
  $ cd ignews

  # Instalar as dependências:
  $ yarn

  # Rodar a aplicação:
  $ yarn dev

  # Crie um arquivo chamado ".env.local" na pasta local do projeto, coloque o conteúdo dentro e popule corretamente:
  
  # Stripe
  STRIPE_API_KEY=
  NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
  STRIPE_WEBHOOK_SECRET=
  STRIPE_SUCCESS_URL=http://localhost:3000/post
  STRIPE_CANCEL_URL=http://localhost:3000/

  # Github
  GITHUB_CLIENT_ID=
  GITHUB_CLIENT_SECRET=

  # FaunaDB
  FAUNADB_KEY=

  # Prismic CMS
  PRISMIC_ENDPOINT=
  PRISMIC_ACCESS_TOKEN=

  # Rodar o Stripe
  $ stripe listen --forward-to localhost:3000/api/webhooks

Feito com ❤️ por Mauricio Pruss Duarte 👋🏻 Get in touch!