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.
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.
| Nome | Descrição | Deadline |
|---|---|---|
| Planejamento e concepção | Deve ser descrito informações úteis e importantes para o desenvolvimento de peças gráficas e intelectuais(ex.: forma de refatoração, padrões de modularização) | 3º dia(14 de Nov. 2021) |
| Desenvolvimento 1 | Inicialização do ambiente, testar api's. | 4º dia(16 de Nov. 2021) |
| Desenvolvimento 2 | Desenvolver, ler documentações e testar o projeto, sempre a ser orientado por componentes e partes(de cima para baixo), respectivamente. | 6º dia(18 de Nov. 2021) |
| Correção de bugs e finalização de documentação | Resolver issues e preparar para entregar. Boa sorte! | 7º dia(19 de Nov. 2021) |
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.