🔥 Ignews

🖼 Imagens

 

💻 Sobre o projeto

Acesse em: https://ig-news-gilt.vercel.app/

Ignews é um portal de notícias sobre programação, em que o usuário só pode ter acesso aos conteúdos em textos caso tenha uma inscrição ativa, e para o desenvolvimento da aplicação, foram utilizados serviços externos, como Stripe para meios de pagamentos, FaunaDB como banco de dados e GitHub como autenticação.

📁 Módulos

🧠 Fundamentos do NextJS:

Estrutura da aplicação

1. Introdução ao módulo
2. Fluxo da aplicação
3. Fundamentos do Next.js
4. Adicionando TypeScript
5. E'stilização com SASS
6. Configurando Fonte Externa
7. Title dinâmico por página
8. Estilos globais do app

Componentes e páginas

1. Componente: Header
2. Componente: SignInButton
3. Página: Home
4. Componente: SubscribeButton

Integração com API

1. Configurando Stripe
2. Consumindo API do Stripe (SSR)
3. Static Site Generation (SSG)

👨‍💻 Back-end no front-end:

API Router no Next.js

1. API router no Next.js
2. Estratégias de autenticação
3. Parametrização nas rotas
4. Autenticação com Next Auth

Usando FaunaDB

1. Escolhendo um banco de dados
2. Configurando FaunaDB
3. Configurações no Github
4. Salvando usuário no banco
5. Chave privada do JWT
6. Verificando usuário duplicado

Pagamentos no Stripe

1. Gerando sessão de checkout
2. Redirecionando para o Stripe
3. Evitando duplicação no Stripe

Ouvindo webhooks

1. Webhooks do Stripe
2. Ouvindo eventos do Stripe
3. Salvando dados do evento
4. Ouvindo mais eventos

💻 Front-end JAMStack:

Trabalhando com CMS

1. Escolhendo um CMS
2. Configurando Prismic CMS
3. Página: Posts/li>
4. Consumindo API do Prismic
5. Listando posts em tela
6. Navegação no menu
7. Componente: ActiveLink

Páginas estáticas

1. Página: Post
2. Validando assinatura ativa
3. Página: Preview do post
4. Gerando previews estáticos
5. Finalização do módulo

 

👨‍💻 Tecnologias:

• ReactJS
• TypeScript
• NextJS
• SASS
• Stripe
• FaunaDB
• Prismic CMS
• OAuth Github

---

Made with 💜 by Luiz Henrique during the course Ignite - Trilha ReactJS