O projeto consiste em criar uma página de blog dinâmica como proposta de colocação no mercado através de estágio por meio da Dc4G Digital.

⚠️ Caso pular estas notas, vá direto para configuração das variáveis de ambiente ⚠️

Okay, mas como é esse teste? A Dc4G mandou o documento sobre o desafio em completo. Em resumo, o candidato deve construir um blog com React e Typescript utilizando este template. A seguir, pontos importantes para o desenvolvimento do projeto:

Eles não querem apenas ver se o código funciona, mas como e o por quê dele funcionar. Como a própria Dc4G anotou, o objetivo(e/ou teste) secundário da dc4g é:

• Avaliar como as habilidades que você pode adquirir em 7(sete) dias estudando sobre desenvolvimento frontend.
• Conhecer como o candidato escreve seus códigos e resolve os desafios do cotidiano front-end, como paginação e filtragem de conteúdo.

O que deve ser imprescindível e usado como checklist/métrica pessoal de desempenho.

• Qualidade do Código(O código é legível?)
• Implementação dos Fluxos do Template do Figma(Você implementou os requisitos?)
• Cores e Design correspondentes(Você respeitou as regras do design?)
• Paginação(Conseguimos ver outras notícias?)
• Uso do versionamento com GIT(Você usou versionamento no seu projeto e descreveu suas alterações?)
• Repositório privado com o projeto(Você salvou seu projeto em nuvem?)

• Filtro por Categoria
• Código pronto para produção
• Uso do Docker

Como eu planejei e organizei o projeto? A seguir, minhas anotações de concepção e coding.

A se basear no prazo e em atividades passadas, segui o seguinte cronograma.

Blog? React? É claro que vou usar com Next.js!

Caso não conheça, em resumo, para o nosso caso, ele renderiza as páginas do React de forma híbrida o que for possível para ser gerado de forma estática e menos dependência do javascript possível.

O que mais brilha meus olhos com Next é poder fazer um deploy com páginas dinâmicas/estáticas de forma simples, com qualidade de infraestrutura e, principalmente, é gratuito.

App é híbrido, mistura de SPA(Single Page Application), Static Page e Server Side-Rendering, ou seja, ISG(Incrimental Static Generator). Mas por quê? No projeto, o Next foi configurado para fazer as requisições da api através do lado do servidor Node/Vercel/Next e gerar um objeto(props para a routas SSG/React) para o Next criar uma página estática através do código em React. Assim, além das informações ficarem em html cruas, haverá a possibilidade de manipular estes dados com métodos do JavaScript e React.

Caso haja algum problema com a api, as páginas e imagens continuarão no servidor e tentará revalidar com a próxima requisição pelo lado client ou a cada 1 hora(se houver tráfego).

A forma de desenvolvimeno com Next é semelhante a com o Create-React-App, o que mudará é que o React Routes não é utilizado, porém, o Next Routes é fácil de entender.

Alguns testes unitários foram feitos. Mas por causa do tempo, optei por não continuar com os das rotas, api e das páginas.

• Funções, classes, variáveis, comentários escritos em Inglês;
• Hierarquia de arquivos: a seguir o padrão comum entre desenvolvedores React/Next.JS(Acredito que para devs de outros ecossistemas que os padrões de código são autoexplicativas); Especialmente a [documentação ts] do Next.JS

Acredito que não é preciso ensinar como abir em modo de desenvolvimento, deploy, produção, etc.

As variáveis são essas:

# <pastaraiz>/.local.env

## Variáveis de ambiente funcionam apenas para o lado do servidor, exceto quando
## sinaliza começando com NEXT_PUBLIC. Logo, NEXT_PUBLIC vai para o lado cliente.

NEXT_PUBLIC_HOSTNAME=localhost
NEXT_PUBLIC_PORT=3000
NEXT_PUBLIC_HOST=http://$NEXT_PUBLIC_HOSTNAME:$NEXT_PUBLIC_PORT

API_BASEURL= `URL DO BACKEND. EX: https://site.com/api`
API_POSTS_SECRET=`BEARER TOKEN DO BACKEND DOS POSTS`
API_HOSTNAME=`HOSTNAME DO BACKEND. EX: site.com`

Feito com 💜, Savio Castelo, 2021.