Skip to content

O projeto é uma aplicação de recordações de memórias, como parte do NLW Spacetime da trilha Ignite

Notifications You must be signed in to change notification settings

Alice7H/nlw-spacetime-web

Repository files navigation

NLW Spacetime: Front-end (Trilha Ignite)

Banner

Este é um projeto Next.js criado com create-next-app.

Aula 1 - Iniciando o projeto

  • React + NextJS
  • Conceitos de react: componentes, propriedades e roteamento.
  • TailwindCSS
  • ESLint + Prettier Tailwind

Adicionamos as configurações de ESLint da Rocketseat com o comando npm i @rocketseat/eslint-config -D e o plugin prettier tailwind com o comando npm i prettier-plugin-tailwindcss -D.

Começando

Para rodar o servidor em modo de desenvolvimento:

npm run dev
# or
yarn dev
# or
pnpm dev

Abra http://localhost:3000 com seu navegador para ver o resultado.

Este projeto usa next/font para otimizar automaticamente e carregar o Inter,uma fonte customizada do Google.

Aula 2 - Layout front-end

  • Fontes: roboto e Bai Jamjuree
  • Estrutura visual da Home
    • Blur background
    • Stripes
  • Lista de memórias vazia
  • Perfil de usuário
  • Seção Hero
  • Copyright

Aula 3 - Autenticação

  • Fluxo de autenticação
  • Configuração Github OAuth
  • Obtendo Github code web
  • Salvando token nos cookies
  • Exibindo perfil do usuário

OAuth significa 'Autorização Aberta', é um padrão que permite que um site ou aplicativo acesse recursos hospedados por outros aplicativos da Web em nome de um usuário.

Na prática, usaremos recursos do Github, o front-end fará requisição de login com usuário no Github, que por sua vez retornará informações do usuário válido junto com um 'código de troca'.

O código de troca irá para o back-end que fará uma requisição ao Github que retornará um 'token de acesso'.

O token de acesso permite identificar o usuário e fazer chamadas ao Github como se fosse o usuário.

Na configuração Github OAuth, usamos CLIENT_ID e CLIENT_SECRET no novo OAuth criado e chamamos de NLW_Spacetime(dev).

Adicionamos o CLIENT_ID na requisição de login no Github Oauth e na rota api/callback recebemos o código de troca, usamos ele para fazer a requisição ao back-end, como resposta temos o token que salvamos nos cookies.

Para extrair as informações do usuário precisamos decodificar as informações gerado pelo jwt, para isso, usamos o jwt-decode e o instalamos com o comando npm i jwt-decode.

Usando o método decode do jwt-decode pegamos as informações do usuário para ser exibido no componente Profile.

Obs: Imagens externas devem ser informadas nas configurações do Next.

Aula 4 - Rotas, Middleware e Nova memória(Layout)

  • Definindo layout das rotas
  • Rota de logout
  • Página de nova memória
  • Middleware de autenticação

Para facilitar na aplicação de CSS com o tailwind no elemento de formulário instalamos o @tailwindcss/forms com o comando npm install -D @tailwindcss/forms como dependência de desenvolvimento.

Aula 5 - Criação e listagem

  • Preview da mídia
  • Criando nova memória
  • Layout da listagem
  • Buscando memórias da API
  • Exibindo detalhes da memória

Instalamos o js-cookie (API JavaScript simples e leve para lidar com cookies) com o comando npm i js-cookie. Como estamos usando o typescript executamos também o npm i --save-dev @types/js-cookie para extrair informações específicas, no caso, o token.

Para a listagem, adicionamos a data de criação da memória e formatamos com a ajuda do dayjs que foi instalado com o comando npm i dayjs

Complementos

  • Compartilhamento de memórias no e-mail, Twitter e no WhatsApp. Usando next-share
  • Layout responsivo
  • Edição/Atualização de memória
  • Selecionar e modificar data da memória