Aluracord - React 4 Immersion project

Overview

Aluracord

Projeto da Imersão React 4 da @alura com @omariosouto e @peas

Aluracord Img2

👨‍💻 Tecnologias utilizadas 👩‍💻

  • Linguagem : Typescript / Javascript
  • Framework : Next Js / React Js
  • Biblioteca de estilização : Styled Components
  • Autenticação : Oauth2 Authorization Code com Github + token jwt customizado
  • Back-End As A Service : Supabase
  • Api do Next Js : para manter a segurança do client_secret(Github) da aplicação
  • Dados em tempo real : WebSocket com Supabase

🗃️ Bibliotecas adicionais utilizadas 📚

  • @supabase/supabase-js : Client javascript do Supabase
  • axios : HTTP client
  • date-fns : Formatar datas para hora local e em pt-BR
  • jsonwebtoken : implementador JWT
  • lodash.debounce : O método debounce da Biblioteca Lodash, para executar uma função somente depois de algum tempo sem o usuário digitar algo, evita multiplas requisições ao servidor.
  • polished : Adiciona transparências nas cores principais de projeto (CSS)
  • react-icons : ícones para ReactJs
  • react-loading-skeleton : Componente React - Esqueletos de carregamento animados
  • styled-components: Estilização dos componentes para React JS

O que fiz além das aulas e dos desafios

  • Typescript
  • Migração para o Styled Components
  • Autenticação Oauth2 Authorization Code do Github
  • Utilização da Context Api do React para Autenticação
  • Utilização da Api do Next Js para segurança
  • Dois temas para escolha com mensagens separadas para cada um
  • Utilização dos hooks e context do Styled Components para os temas
  • Implementação de JWT com informações do usuário do github utilizado para acessar os dados do supabase através da Api do next, o qual valida o token e permite ou não o acesso.

🖼️ Outras imagens 🖼️

Aluracord Img2

Aluracord Img3

Aluracord Img5

Aluracord Img4

🐈‍⬛ 🐙 Guia do Oauth do Github 🐈‍⬛ 🐙

  • Cadastrar aplicação no oauth do Github:
    • acessar : Perfil / Settings / Developer settings -> Oauth Apps -> New Oauth App
    • preencher formulário e cadastrar
    • Guardar o client_id
    • Gerar um novo client_secret e guardar rm local seguro
  • Para evitar a exposição do client_secret: utilizei o environment variable e fiz a requisição do token através da api do next (Server Side).
  • Adicionar os environment variables na página do projeto na Vercel.

🔒 Guia do Fluxo de Autenticação (Authorization code) 🔐

  • Pedir autorização para o servidor de autenticação do Github passando o client_id e o escopo
  • O servidor de autenticação pede para o usuário fazer o login na conta do GitHub
  • O servidor de autenticação pede para o usuário autorizar o acesso aos dados públicos do Github
  • O servidor de autenticação retorna para a url de callback cadastrada com um code nos parâmetros da url
  • Pegamos este code e fazemos uma requisição para a API do next passando o code no corpo.
  • Através da api do next fazemos a requisição do token passando no header da requisição o client_id o client_secret e o code no corpo da requisição
  • O servidor de autenticação retorna o access_token no corpo da resposta
  • Com o access_token pedimos a api do github os dados do usuário através da api do next passando o access_token no cabeçalho (header) da requisição
  • A API do github retorna os dados públicos do usuário
  • Nossa API do next retorna os dados do usuário e o token para a aplicação web
  • Na aplicação web podemos guardar o token e os dados do usuário para utilizarmos conforme a necessidade.

🔥 Deployed URL 🔗

https://alura-aluracord-rodolfohok.vercel.app/

You might also like...
Github-ci-cd-react - I followed CI/CD course from codedamn to learn how to implement github actions in a project, in this practical lesson with codedamn am using ReactJS

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

React component to embed Hype.Day project registration into your website

Hype.Day React Component React component to embed Hype.Day project registration into your website. Preview You can test the library on: https://hypeda

Starter project with full stack BigQuery. Allows to overcome customisation restrictions imposed by pre-built dashboards and control data usage. Deploy your own cloud website hydrated by sample BigQuery data in 15 min without installing any development software. This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.
This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.

This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.

_buildspace - web3 Read/Write Solana Blockchain Project
_buildspace - web3 Read/Write Solana Blockchain Project

_buildspace - web3 Read/Write Solana Blockchain Project

This project is created to demonstrate the uses of various services delivery models with the help of a simple application.

CCET-IA-2 This project is created to demonstrate the uses of various services delivery models with the help of a simple application. Notes On Cloud No

A project done for the 2021 Knight Hacks Hackathon.

Discussit A project was done for the 2021 Knight Hacks Hackathon. A platform similar to Reddit however instead of forming close-knit communities of li

This is a Web User Interface Sample Project. Using ReactJs.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

A Trelloboard to help manage and visualize your project workload & progress with a simple & pretty interface
A Trelloboard to help manage and visualize your project workload & progress with a simple & pretty interface

Trello Board 📌 A Trelloboard to help manage and visualize your project workload & progress with a simple & pretty interface (basically a trello clone

An example of a Kanban Project Board with Ionic React

An example of a Kanban Project Board with Ionic React

Alan Montgomery 10 Sep 27, 2022
🕹 GBA emulator on your React project - easy and powerful to use!

react-gbajs GBA emulator on your React project - easy and powerful to use! Just three steps to set it up ✨ 1 - Apply GbaProvider import { GbaProvider

Bruno Macabeus 43 Dec 23, 2022
React project with Google Firebase API, create partys with admin view and user view. Users can ask topics to admin, and support other topics.

?? Tecnologias Esse projeto foi desenvolvido com as seguintes tecnologias: React Firebase TypeScript ?? Como executar Clone o projeto e acesse a pasta

Felipe Souza 3 Aug 27, 2021
This project created by Alper Efe Şahin. I used React.js, Firebase, CHAT Engine Lib.

This project created by Alper Efe Şahin. I used React.js, Firebase, CHAT Engine Lib. and Icon lib. You can login with Facebook or Google. You can create new chat group, add new users to chat group, you can remove his/her, and you can delete the chat group easily. Also you can upload file like pdf or images etc.

Alper Efe Şahin 12 Sep 29, 2022
In this repo you will find the sample project where we dive deeper into the nuances of how hooks work, particularly in the context of the React render/rerender cycle.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Yihua Zhang 11 Jan 29, 2022
An example project integrating React with three.js

React with three.js example See the demo Created in response to this question on Stack Overflow.

Will Bamford 28 Sep 9, 2022
A reference project to build a React Redux app in TypeScript, and deploy to GCP Cloud Run

A reference project to build a React Redux app in TypeScript, and deploy to GCP Cloud Run

Matthew Lau 4 Nov 27, 2021
Simplest way to add twitter widgets to your react project.

React Twitter Embed Component React Twitter Embed Component Simplest way to add Twitter Widgets to your react project. Demo and Examples https://saura

Saurabh Nemade 306 Dec 30, 2022
This is the github browser with react js. i am using axious and github api in this project

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Ravi Kumar Gupta 2 Jun 8, 2022
A React JS project to make age and gender prediction using Agify.io and Genderize.io. Only for practice use and just for fun~

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Ken Tandrian 2 Nov 1, 2022