Nesse desafio, você deverá criar uma aplicação para treinar o que aprendeu até agora no ReactJS

Essa será uma aplicação onde o seu principal objetivo é criar um blog do zero. Você vai receber uma aplicação praticamente em branco que deve consumir os dados do Prismic e ter a interface implementada conforme o layout do Figma. Você terá acesso a diversos arquivos para implementar:

• Estilizações global, comun e individuais;
• Importação de fontes Google;
• Paginação de posts;
• Cálculo de tempo estimado de leitura do post;
• Geração de páginas estáticas com os métodos getStaticProps e getStaticPaths;
• Formatação de datas com date-fns;
• Uso de ícones com react-icons;
• Requisições HTTP com fetch;
• Entre outros.

A seguir veremos com mais detalhes o que e como precisa ser feito 🚀

Para te ajudar nesse desafio, criamos para você esse modelo que você deve utilizar como um template do GitHub.

O template está disponível na seguinte URL:

Dica: Caso não saiba utilizar repositórios do GitHub como template, temos um guia em nosso FAQ.

Para esse desafio, iremos reforçar alguns pontos e apresentar algumas libs para te ajudar no desenvolvimento.

Começando pelo tema do projeto: criando um projeto do zero. Como isso é inviável por causa dos testes e algumas verificações que precisamos que vocês sigam, criamos um projeto com a menor quantidade de código possível. A idéia é se assemelhar a um projeto recém criado com a CLI do Next.js.

Dessa forma, antes de ir diretamente para o código do desafio, explicaremos um pouquinho de:

• Prismic;
• Figma;
• fetch;
• react-icons;
• date-fns.

Vamos nessa?

Como você já deve ter visto nas aulas, o Prismic é uma Headless CMS. Vamos utilizá-lo para gerar documentos repetíveis (post) que vão retornar alguns dados para a aplicação. Nesse ponto, é muito importante que você siga exatamente a estrutura que vai ser apresentada aqui pois os testes dependem disso.

Vou deixar abaixo um video mostrando a estrutura do Documento e um exemplo de Publicação para você se familiarizar. Em seguida, discutiremos campo a campo.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/af40056a-bfff-4075-b796-643c2353e399/prismic.mp4

No vídeo apresentado, foi possível ver que nosso documento repetível posts tem 8 campos. Vamos descrever cada um deles:

• slug
  • Tipo: UID
  • Descrição: Identificador único amigável de cada post. Pode receber um valor manualmente ou é gerado automaticamente a partir do primeiro campo de texto preenchido. Esse campo vai ser utilizado na navegação do Next.
• title
  • Tipo: Key Text
  • Descrição: Input de strings. Recebe valores manualmente. Esse campo será utilizado como título do Post.
• subtitle
  • Tipo: Key Text
  • Descrição: Input de strings. Recebe valores manualmente. Esse campo será utilizado como subtítulo do Post.
• author
  • Tipo: Key Text
  • Descrição: Input de strings. Recebe valores manualmente. Esse campo será utilizado como nome do autor do Post.
• banner

  • Tipo: Image

  • Configurações do campo:

    

  • Descrição: Input de imagens. Recebe valores manualmente. Esse campo será utilizado como banner do Post.

• content
  • Tipo: Group
  • Descrição: Grupo de campos repetíveis. Esse campo será utilizado como o conteúdo do Post. O conteúdo será dividido em seções com um campo heading e um campo body.
  • Campos internos:
    • heading
      • Tipo: Key Text
      • Descrição: Input de strings. Recebe valores manualmente. Esse campo será utilizado como título da seção do Post.
    • body

      • Tipo: Rich Text

      • Configurações do campo:

        

      • Descrição: Input de rich text (HTML). Recebe valores manualmente. Esse campo será utilizado como conteúdo da seção do Post. Perceba que nas configurações do campo, selecionamos algumas opções para que o seu texto tenha varias formatações (negrito, hyperlinks, listas, etc.).

Mesmo com as explicações acima, ficou em dúvida de como ficarão esses campos na sua página? Deixamos abaixo um print descrevendo cada campo no resultado final para te ajudar:

1. slug
2. banner
3. title
4. first_publication_date (campo gerado automaticamente pelo Prismic)
5. author
6. content (primeiro grupo)
7. content (segundo grupo)
8. heading (primeiro grupo)
9. body (primeiro grupo)
10. heading (segundo grupo)
11. body (segundo grupo)

Esperamos que dessa forma tenha ficado clara a estrutura e o uso de cada campo no resultado final.

Por fim, vamos falar rapidamente dos métodos que esperamos que você utilize em cada arquivo:

• src/pages/index.tsx: Utilizar o método query para retornar todos os posts já com paginação. Por padrão, a paginação vem configurada como 20. Portanto se quiser testar sem ter que criar mais de 20 posts, altere a opção pageSize para o valor que deseja.
• src/pages/posts/[slug.tsx]: Utilizar o método query para buscar todos os posts e o getByUID para buscar as informações do post específico.

Além disso, não esqueça de configurar no arquivo .env.local na raiz do seu projeto a variável PRISMIC_API_ENDPOINT com a url da sua API

Caso tenha dúvidas, dê uma olhada na documentação oficial do Prismic:

Prismic w/ Javascript - Prismic

Next.js & Prismic

Prismic Help Center

Um ponto muito importante desse desafio que queremos que vocês exercitem é a implementação de uma interface a partir de um layout do Figma, como se você tivesse recebido isso das mãos de um designer.

Nesse desafio, você deve implementar o layout da página Obrigatório.

Para utilizar o Figma, não possui muito mistério. Vamos deixar abaixo os passos para criar uma conta, duplicar o layout e exportar imagens.

Para acessar o Layout da aplicação, você primeiramente deve ter uma conta criada na plataforma do Figma, para isso, você pode clicar aqui.

Então, na página de cadastro, você pode logar diretamente com sua conta do Google ou criar uma conta com o e-mail que você preferir.

Após criar sua conta, você pode acessar sua Dashboard do Figma, para isso, basta acessar https://www.figma.com/ e ele vai te redirecionar para a Dashboard.

Caso ele não redirecione diretamente para a sua dashboard, existe um botão "Log in" no canto superior direito da tela, que permitirá você acessar a conta que você acabou de criar e, ao logar, você será redirecionado automaticamente.

Agora para duplicar os layouts, basta você clicar no link abaixo. Ele adicionará o Layout à sua dashboard do Figma automaticamente, como uma cópia.

Desafios Módulo 3 ReactJS

Para verificar a estilização de um elemento, basta selecioná-lo e escolhar na barra lateral direito a opção Inspect no menu superior direito. Dessa forma você vai ter a maioria das informações que precisa. Caso precise das distâncias em relação a outros elementos, basta colocar o mouse em cima do elemento que deseja pegar a distância.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1e292b38-d5a7-4fb2-b3f2-d194d4401662/figma.mp4

Se você está tendo dificuldades em encontrar o comando Export no layout do Figma, siga esses passos:

• Selecione o item que deseja exportar;
• Na sidebar direita, clique na aba Design;
• Deslize até o final da sidebar para encontrar a opção Export.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a3f1b967-3a93-4e83-8abb-d3d22ae5da75/figma2.mp4

Para que você consiga realizar a paginação, é preciso trabalhar com a propriedade next_page retornada no método query. Ela retorna um link que vai buscar a próxima página da paginação.

Dessa forma, para realizar essa única requisição no seu projeto, é obrigatório que você utilize o fetch já disponível de forma global.

Caso tenha dúvidas de como utilizar, o Diego utilizou o fetch no primeiro módulo, lá dentro do RepositoryList.tsx. Deixaremos abaixo também a documentação oficial

Usando Fetch

Para exibir os ícones de data de criação, tempo estimado de leitura e autor do post sugerimos utilizar a lib react-icons já instalada no seu template. Todos os três icones são da coleção Feather Icons.

Caso tenha dúvidas de como utilizar, dê uma olhada na documentação oficial.

React Icons

Para realizar a formatação das datas, sugerimos utilizar a lib date-fns já instalada no seu template. O único método que você precisa utilizar é o format informando o locale como pt-BR. Segue abaixo um rápido exemplo:

import { format } from 'date-fns';
import ptBR from 'date-fns/locale/pt-BR';

format(
	new Date(),
	"'Hoje é' eeee",
	{
		locale: ptBR,
	}
)

Caso tenha dúvidas de como utilizar, dê uma olhada na documentação oficial.

Modern JavaScript Date Utility Library

Aviso: Poderíamos utilizar o Intl para a formatação da data também, mas não recomendamos utilizá-lo nos desafios, pois ele pode gerar alguns problemas na correção automatizada pela plataforma.

Com o template já clonado, as depêndencias instaladas e o Prismic já configurado, você deve completar onde não possui código com o código para atingir os objetivos de cada teste. Os documentos que devem ser editados são:

• src/pages/_document.tsx;
• src/pages/index.tsx;
• src/pages/home.module.scss;
• src/pages/post/[slug].tsx;
• src/pages/posts/post.module.scss;
• src/components/Header/index.tsx;
• src/components/Header/header.module.scss;
• src/styles/global.scss;
• src/styles/common.module.scss.

Nesse arquivo você deve configurar a importação da fonte Inter do Google Fonts. Os tamanhos utilizados são Regular, Semi Bold e Bold.

Nesse arquivo você deve renderizar todos os posts da paginação e exibir o botão Carregar mais posts caso existam mais posts a ser carregados (ou seja, o valor next_page retornado pela Prismic não pode ser null). Caso contrário, o botão não deve ser renderizado.

A logo spacetraveling deve ser exportada do Figma e salva na pasta public na raiz do seu projeto para a correta utilização. Além disso, a logo deve ter o alt com o valor logo para que o teste possa encontrá-la corretamente.

Ao clicar no post, é preciso navegar para a pagina do post seguindo o formato /post/slugDoPost onde slugDoPost é referente ao valor slug retornado pelo Prismic.

Por fim, a sua página deve ser gerada estaticamente. Isso significa que você deve utilizar o getStaticProps para buscar os dados do Prismic e popular a sua prop postsPagination exatamente como deixamos na estrutura de interfaces. Nesse método é obrigatório utilizar o query do Prismic.

Nesse arquivo você deve implementar toda a estilização da página principal.

Nesse arquivo você deve renderizar toda a informação do post e o component Header.

O tempo estimado de leitura deve ser calculado manualmente por você. Mas não se assuste, a ideia é simples. Basicamente você deve calcular todas as palavras dentro do texto do seu post, dividir pela média de palavras que um ser humano lê por minuto e arredondar para cima. Para esse desafio, utilize que o ser humano leia, em média, 200 palavras por minuto. Então se o seu texto possuir 805 palavras, você irá dividir por 200 e arredondar o resultado para cima, chegando assim no valor de 5 minutos estimados para leitura do post.

Agora no aspecto do código, você deve iterar no array da propriedade content para buscar a quantidade de palavras de cada seção (heading e body).

Para calcular o tempo estimado de leitura, sugerimos utilizar o método reduce para iterar o array content, o método PrismicDOM.RichText.asText para obter todo o texto do body e utilizar o método split com uma regex para gerar um array de palavras.

A logo spacetraveling deve ser exportada do Figma e salva na pasta public na raiz do seu projeto para a correta utilização. Além disso, a logo deve ter o alt com o valor logo para que o teste possa encontrá-la corretamente.

A sua página deve ser gerada estaticamente. Isso significa que você deve utilizar o getStaticProps para buscar os dados do Prismic e popular a sua prop post exatamente como deixamos na estrutura de interfaces. Nesse método é obrigatório utilizar o getByUID do Prismic.

Além disso, você deve utilizar o getStaticPaths para gerar as páginas estáticas de alguns posts e setar o fallback como true para que o restante seja gerado no momento da requisição. Nesse método é obrigatório utilizar o query do Prismic.

Por fim, nos casos que cairem no fallback, é obrigatório que você renderize pelo menos um texto na tela dizendo Carregando... para que o teste consiga verificar esses casos corretamente.

Caso tenha dúvidas em relação ao fallback, dê uma olhada aqui:

Basic Features: Data Fetching | Next.js

Nesse arquivo você deve implementar toda a estilização da página de post.

Nesse arquivo você deve renderizar a logo spacetraveling.

Ela deve ser exportada do Figma e salva na pasta public na raiz do seu projeto para a correta utilização. Além disso, a logo deve ter o alt com o valor logo para que o teste possa encontrá-la corretamente.

Por fim, ao clicar na logo é preciso navegar para a página principal /.

Nesse arquivo você deve implementar toda a estilização do Header da aplicação.

Nesse arquivo você deve implementar toda a estilização global da sua aplicação (ex.: variáveis das cores do seu projeto).

Nesse arquivo você deve implementar toda a estilização comum entre os arquivos das suas páginas (ex.: largura máxima).

Em cada teste, tem uma breve descrição no que sua aplicação deve cumprir para que o teste passe.

Caso você tenha dúvidas quanto ao que são os testes, e como interpretá-los, dê uma olhada em nosso FAQ

Para esse desafio, temos os seguintes testes:

Teste components/Header/index.tsx

Testes pages/Home/index.tsx

Testes pages/post/[slug].tsx

Está com dúvidas (ou curioso 👀) para ver como deve ficar a aplicação ao final do desafio? Deixamos abaixo um vídeo mostrando as principais funcionalidades que você deve implementar para te ajudar (ou matar sua curiosidade 👀).

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/72408e01-e482-42a7-b137-adfae908b00a/final.mp4

Esse desafio deve ser entregue a partir da plataforma da Rocketseat. Envie o link do repositório que você fez suas alterações. Após concluir o desafio, além de ter mandado o código para o GitHub, fazer um post no LinkedIn é uma boa forma de demonstrar seus conhecimentos e esforços para evoluir na sua carreira para oportunidades futuras.

Feito com 💜 por Rocketseat 👋 Participe da nossa comunidade aberta!

ed