Skip to content

vitorsemidio-dev/ignite-reactjs-ignews

Repository files navigation

ig.news - ReactJS | badge rocketseat

Logo Fauna cor correta com hex #3A1AB6 Logo Figma cor correta com hex #F24E1E Logo Jest cor correta com hex #C21325 Logo Next.js cor correta com hex #000000 Logo Prismic cor correta com hex #5163BA Logo Sass cor correta com hex #CC6699 Logo Stripe cor correta com hex #008CDD Logo TypeScript cor correta com hex #3178C6


ig.news é um projeto cujo objetivo é permitir aos usuários acessarem conteúdos do blog através de uma inscrição.

Projeto   |    Como rodar o projeto   |    Tecnologias   |    Testes   |    Layout   |    Licença

💻 Projeto

Para o desenvolvimento do projeto foi utilizando JAMStack (JavaScript, API e Markup)

O framework selecionado foi NextJS aplicando conceitos como consumo de API externas, API Root, Server Side Rendering (SSR), Static Side Generation (SSG). Foi utilizado o Stripe como Gateway de Pagamento. Para autenticação, foi optado NextAuth com login social pelo Github. O Banco de dados escolhido para armazenar os dados foi o FaunaDB. E por último, mas não menos importante, teve o Prismic CMS para adição, armazenamento e gerenciamento do conteúdos dos posts.

🧭 Como rodar o projeto

🚨 Requisitos

Necessário realizar as instalações:

Criar conta e configurar os serviços externos:

Clone este repositório

git clone https://github.com/vitorsemidio-dev/ignite-reactjs-ignews.git

Acesse a pasta

cd ignite-reactjs-ignews.git

🔑 Variáveis Ambiente

Criar arquivo .env.local e preencher os valores das variáveis de ambiente

# FaunaDB
FAUNADB_API_KEY=
FAUNADB_DOMAIN=

# Github
GITHUB_ID=
GITHUB_SECRET=

# Next
NEXTAUTH_SECRET=
NEXTAUTH_URL=

# Prismic CMS
PRISMIC_ACCESS_TOKEN=
PRISMIC_API_URL=

# Stripe
STRIPE_API_KEY=
STRIPE_CANCEL_URL=
STRIPE_SUCCESS_URL=
STRIPE_WEBHOOK_SECRET=

# Stripe Public
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=

Instale as dependências

yarn

Execute a aplicação

yarn dev

Ouvir os webhooks

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

🚀 Tecnologias

Esse projeto foi desenvolvido com as seguintes tecnologias:

🔖 Layout

Você pode visualizar o layout do projeto através desse link. É necessário ter conta no Figma para acessá-lo.

🧪 Testes

Utilize o comando a seguir para rodar os testes:

yarn test
yarn test:coverage

Cobertura dos testes | Test Coverage

📝 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.