24 de outubro de 2022

Ig News

Ig News é uma plataforma de conteúdo de texto que oferece acesso a posts exclusivos através de uma assinatura mensal. Integrada com Stripe, Prismic CMS, GitHub e FaunaDB.

Front End

ReactJs

NextJs

TypeScript

Stripe

298 visualizações

Carregando ...

Sobre

Ig News é uma plataforma de conteúdo de texto que transforma a maneira como os usuários interagem com conteúdo exclusivo. Com uma assinatura mensal, os usuários têm acesso a posts exclusivos, proporcionando uma experiência de leitura única e personalizada.

A plataforma é integrada com Stripe para gerenciamento de pagamentos, garantindo um processo de assinatura seguro e eficiente. O conteúdo dos posts é gerenciado através do Prismic CMS, permitindo uma gestão de conteúdo flexível e intuitiva. Além disso, a autenticação é realizada através do GitHub, proporcionando uma experiência de login familiar e confiável para os usuários.

Para armazenamento de dados, a plataforma utiliza o FaunaDB, um banco de dados global distribuído que oferece consistência de transações, latência mínima e facilidade de uso.

Em resumo, Ig News é uma solução completa para leitura de conteúdo exclusivo, oferecendo uma experiência de usuário otimizada e uma série de recursos avançados. Seja você um ávido leitor em busca de conteúdo exclusivo ou um desenvolvedor procurando inspiração, o Ig News tem algo a oferecer.

Instalação

Siga estas etapas para instalar e configurar o projeto em seu ambiente local.

Configuração inicial

Primeiro você precisa criar uma conta nas plataformas na qual o projeto tem integração, o projeto usa o Stripe para gerenciar os pagamentos, GitHub para a parte de autenticação e Prismic para criar o conteúdo dos posts.
Crie um arquivo .env.local na raiz do projeto e preencha as variáveis ambiente, o exemplo de como deve ficar esta em .env.example

Clone o repositório

Clone o repositório do projeto em seu ambiente local e acesse a pasta do projeto.

git clone https://github.com/manoguii/ig-news.git
cd ig-news

Instale as dependências

Instale as dependências do projeto.

pnpm install

Crie o banco de dados local

Crie o banco de dados local.

docker run --name ig-news -e MYSQL_ROOT_PASSWORD=docker -p 3306:3306 mysql:latest

Execute a aplicação.

Inicialize o projeto em modo de desenvolvimento.

pnpm dev

O projeto estará disponível em seu navegador em http://localhost:3000.

Webhooks

O projeto usa a funcionalidade de webhooks do stripe para ouvir eventos como cancelamento de assinatura, pagamento da assinatura recusado e tratar esses casos de diferentes formas, caso queira testar você precisa instalar a Stripe CLI para o app conseguir ouvir os eventos localmente.

Faça login na CLI do stripe

stripe login

Iniciar o listener

Execute esse comando para ouvir os webhooks

stripe listen --forward-to localhost:3000/api/webhooks

Adicionar a chave do stripe nas variaveis ambiente

Apos executar o comando acima, copie a chave gerada na linha abaixo e cole a chave do stripe em .env.local na variável STRIPE_WEBHOOK_SECRET="${CHAVE STRIPE}"

"Ready! You are using Stripe API Version [2022-08-01]. Your webhook signing secret is ${CHAVE STRIPE}"

Tecnologias

Algumas tecnologias utilizadas para construção da aplicação.