Implementing g1 landing page for "Desafio Globo" using Vanilla JS, HTML, CSS and JSDoc.

web/.gitignore

@@ -0,0 +1 @@
+./node_modules

web/Api/Dump/Cleared/ads.json

@@ -0,0 +1,145 @@
+[
+  {
+    "chapeu": "Assessor de Tecnologia e Informação",
+    "image": "https://picsum.photos/500/300",
+    "section": "Secretaria de Monitoramento de Ações Governamentais",
+    "summary": "Experiência de 9 meses na SEMAG, atuando como Assessor e Analista de Dados, utilizando Python e JavaScript para desenvolvimento de painéis dinâmicos no Power BI.",
+    "title": "Assessor de Tecnologia e Informação na SEMAG",
+    "url": "https://github.com/bwprado",
+    "group": [
+      "Assessor de Tecnologia e Informação",
+      "Python",
+      "JavaScript",
+      "Power BI"
+    ],
+    "type": "ad",
+    "created": "2023-12-08T00:00:00Z",
+    "id": "1"
+  },
+  {
+    "chapeu": "Desenvolvedor de Front-end",
+    "image": "https://picsum.photos/500/300",
+    "section": "Nexur Tecnologia e Software",
+    "summary": "Mais de 1 ano como Desenvolvedor de Front-end na Nexur, especializado em Next.js, React, Redux, RTK Toolkit, e Tailwind para criação de interfaces responsivas.",
+    "title": "Desenvolvedor de Front-end na Nexur",
+    "url": "https://github.com/bwprado",
+    "group": [
+      "Desenvolvedor de Front-end",
+      "Next.js",
+      "React",
+      "Redux",
+      "Tailwind"
+    ],
+    "type": "ad",
+    "created": "2023-12-08T00:00:00Z",
+    "id": "2"
+  },
+  {
+    "chapeu": "Contractor",
+    "image": "https://picsum.photos/500/300",
+    "section": "Threed Software",
+    "summary": "Trabalhando como Contractor na Threed Software há 3 anos, criando códigos de alta performance para desenvolvimento de softwares incríveis.",
+    "title": "Contractor na Threed Software",
+    "url": "https://github.com/bwprado",
+    "group": ["Contractor", "Coding Practices", "Remote Work", "JavaScript"],
+    "type": "ad",
+    "created": "2023-12-08T00:00:00Z",
+    "id": "3"
+  },
+  {
+    "chapeu": "Diretor Geral",
+    "image": "https://picsum.photos/500/300",
+    "section": "Loja Meia Ponta",
+    "summary": "9 anos como Diretor Geral na Loja Meia Ponta, gerenciando equipe de vendas, compras, e comunicação da empresa.",
+    "title": "Diretor Geral na Loja Meia Ponta",
+    "url": "https://github.com/bwprado",
+    "group": ["Diretor Geral", "Management", "Sales"],
+    "type": "ad",
+    "created": "2023-12-08T00:00:00Z",
+    "id": "4"
+  },
+  {
+    "chapeu": "Gerente de Projetos",
+    "image": "https://picsum.photos/500/300",
+    "section": "Construtora A4 Arquitetura",
+    "summary": "5 anos como sócio e gerente de projetos na Construtora A4 Arquitetura, liderando a construção de 12 casas de pequeno/médio porte.",
+    "title": "Gerente de Projetos na Construtora A4 Arquitetura",
+    "url": "https://github.com/bwprado",
+    "group": ["Gerente de Projetos", "Construction", "Management"],
+    "type": "ad",
+    "created": "2023-12-08T00:00:00Z",
+    "id": "5"
+  },
+  {
+    "chapeu": "TypeScript",
+    "image": "https://picsum.photos/500/300",
+    "section": "Nexur Tecnologia e Software",
+    "summary": "Conhecimento intermediário/avançado em TypeScript, com experiência em desenvolvimento de aplicações web e mobile.",
+    "title": "Desenvolvedor de Front-end na Nexur",
+    "url": "https://github.com/bwprado",
+    "group": [
+      "Desenvolvedor de Front-end",
+      "Next.js",
+      "React",
+      "Redux",
+      "Tailwind"
+    ],
+    "type": "ad",
+    "created": "2023-12-08T00:00:00Z",
+    "id": "6"
+  },
+  {
+    "chapeu": "Svelte",
+    "image": "https://picsum.photos/500/300",
+    "section": "WIP Development",
+    "summary": "Software gratuito para gestão de estoque, desenvolvido em Svelte e hospedado no Vercel, com banco de Dados Supabase. Confira o código no GitHub.",
+    "title": "SmartStockIt App",
+    "url": "https://wwww.smartstockit.com",
+    "group": ["Svelte", "Supabase", "Vercel", "GitHub"],
+    "type": "ad",
+    "created": "2023-12-08T00:00:00Z",
+    "id": "7"
+  },
+  {
+    "chapeu": "WIX Velo Master",
+    "image": "https://picsum.photos/500/300",
+    "section": "Wix Developer",
+    "summary": "Participo de um grupo de desenvolvedores WIX Velo Master, criado pela WIX para escutar os desenvolvedores mais experientes e melhorar a plataforma.",
+    "title": "WIX Velo Master",
+    "url": "https://www.wix.com",
+    "group": ["WIX Velo Master", "WIX", "WIX Velo", "WIX Corvid"],
+    "type": "ad",
+    "created": "2023-12-08T00:00:00Z",
+    "id": "8"
+  },
+  {
+    "chapeu": "WIX Velo Certified",
+    "image": "https://picsum.photos/500/300",
+    "section": "Wix Developer",
+    "summary": "Certificado pela WIX como desenvolvedor WIX Velo, com conhecimento avançado em WIX e em todas as suas ferramentas e API",
+    "title": "WIX Velo Certified",
+    "url": "https://www.wix.com",
+    "group": ["WIX Velo Certified", "WIX", "WIX Velo"],
+    "type": "ad",
+    "created": "2023-12-08T00:00:00Z",
+    "id": "9"
+  },
+  {
+    "chapeu": "React",
+    "image": "https://picsum.photos/500/300",
+    "section": "Desenvolvedor Front-end",
+    "summary": "Curso de 20h em React feito na Udemy, conhecimento intermediário/avançado em React, com experiência em desenvolvimento de aplicações web e mobile.",
+    "title": "Desenvolvedor Front-end - Perfil no GitHub",
+    "url": "https://github.com/bwprado",
+    "group": [
+      "Desenvolvedor de Front-end",
+      "Next.js",
+      "React",
+      "Redux",
+      "Tailwind"
+    ],
+    "type": "ad",
+    "created": "2023-12-08T00:00:00Z",
+    "id": "10"
+  }
+]

web/Api/index.js

@@ -1,22 +1,45 @@
-const express = require('express');
-const cors = require('cors');
-const app = express();
-const PORT = process.env.PORT || 3000;
-const fs = require('fs');
+const express = require('express')
+const cors = require('cors')
+const app = express()
+const PORT = process.env.PORT || 3000
+const fs = require('fs')
+
+const minMax = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
 
 app.use(cors())
 
 app.get('/feed/page/:page', async (req, res) => {
-	const page = req.params.page;
-	try {
-		const raw = fs.readFileSync(`./dump/cleared/page_${page}.json`);
-		const parsed = JSON.parse(raw);
-		res.send(parsed);
-	} catch (e) {
-		res.send({ message: "We're unable to load this page." });
-	}
-});
+  const page = req.params.page
+  try {
+    const raw = fs.readFileSync(`./dump/cleared/page_${page}.json`)
+    const parsed = JSON.parse(raw)
+    res.send(parsed)
+  } catch (e) {
+    res.send({ message: "We're unable to load this page." })
+  }
+})
+
+app.get('/feed/top3', async (req, res) => {
+  const random = minMax(1, 10)
+  try {
+    const raw = fs.readFileSync(`./dump/cleared/page_${random}.json`)
+    const parsed = JSON.parse(raw)
+    res.send(parsed.slice(0, 3))
+  } catch (error) {
+    res.send({ message: "We're unable to load this page." })
+  }
+})
+
+app.get('/ads', async (req, res) => {
+  try {
+    const raw = fs.readFileSync(`./dump/cleared/ads.json`)
+    const parsed = JSON.parse(raw)
+    res.send(parsed)
+  } catch (error) {
+    res.send({ message: "We're unable to load this page." })
+  }
+})
 
 app.listen(PORT, () => {
-	console.log(`API executando em http://localhost:${PORT}`);
-});
+  console.log(`API executando em http://localhost:${PORT}`)
+})

web/HISTORY.md

@@ -0,0 +1,83 @@
+# Começando o Desafio Globo
+
+Definindo as melhores práticas de desenvolvimento com `Vanilla JS`, `HTML5` e `CSS`.
+Não serão utilizados frameworks para explorar meu potencial de adaptação em equipes diversas.
+
+Como estou bem acostumado com `TypeScript` pode ser que o utilize no projeto.
+
+(UPDATE): Decidi utilizar `Vanilla JS` + `JSDoc` para tipagem e deixar o projeto mais vanilla possível.
+
+## Estruturando o Aplicativo
+
+1. Header
+2. Main (Matéria em Foco)
+3. Section (Lista de Matérias)
+4. Aside (Agrupador de Notícias)
+5. Footer
+
+### Criando um WebComponent para a Section de Lista de Matérias
+
+Decidi criar um WebComponent pra encapsular tudo que fosse responsável por essa secção, assim tornando o componente um
+**micro-frontend**.
+
+Encapsulei os estilos usando um `Shadow DOM` para testar algumas coisas tendo em vista que foi a primeira vez que fiz
+um `WebComponent` mais complexo, anteriormente havia trabalhado com `WebComponents` mais como `CustomElements` na plataforma
+**WIX**.
+
+### Adicionando a publicidade
+
+Nada muito complexo, apenas usando o index para jogar uma propaganda à cada `8` notícias, o ideal era criar em endpoint para fornecer essas propagandas de forma dinâmica, simulando a contratação de espaço publicitário na página principal. Por enquanto somente um placeholder foi colocado.
+
+### Criando um Modal para os vídeos
+
+Criei um modal utilizando `dialog` que já inclui acessibilidade e backdrop para maior facilidade.
+
+Existe uma função no `WebComponent` que usa o modal do `document` pra poder exibir fora no componente.
+
+Ao fechar o modal ele para o vídeo que estiver em execução, talvez seja necessário pegar todos os vídeos da página principal e fazer um loop para pausar todos, pra evitar que qualquer outro possa estar em execução em segundo plano.
+
+### Desenvolvimento da página principal
+
+Decidi utilizar a forma mais simples de desenvolvimento Vanilla, apenas pegando os elementos e os modificando de acordo com a necessidade.
+
+Criei na API um endpoint para pegar 3 notícias, simulando pegar as 3 notícias mais lidas no momento, algo interessante para colocar na seção principal.
+
+### Criação de conteúdos relacionados
+
+Resolvi fazer um novo fetch para a API no intuito de simular uma busca por notícias relacionadas, utilizei o mesmo endpoint das top 3 notícias de forma randômica. São 3 fetchs no total, um das 3 matérias do top, 1 do component `news-list` e 1 dos conteúdos relacionados.
+
+### Finalizando com Responsividade Mobile.
+
+Adicionei apenas uma `media query`, que é que tem no site G1 hoje, fiquei satisfeito com o resultado da responsividade, embora eu ainda pudesse melhorar de forma considerável.
+
+### Agradecimentos
+
+Agradeço à todos a oportunidade de participação no desafio, que foi não foi só um desafio técnico, mas também um desafio físico de mental, uma semana difícil, onde todos os trabalhos acumularam, mas por sorte, hoje dia 09/12 foi feriado em minha cidade, e resolvi fazê-lo nesse tempo livre, em torno de 8h.
+
+# Guia de instalação
+
+Primeiramente, na pasta `Api`, instale o servidor utilizando o seguinte comando:
+
+`yarn ou npm install`
+
+Depois é só executá-lo com o comando:
+
+`yarn start ou npm run start`
+
+Posteriormente, basta instalar o servidor `http-server` utilizando o seguinte comando:
+
+`yarn ou npm install`
+
+Depois basta rodá-lo com o comando:
+
+`yarn dev`
+
+
+# O que faria se tivesse mais tempo?
+
+- Melhorar e testar tratamento de erros, principalmente os fetchs da API.
+- Fazer testes unitários, principalmente no componente `<news-list />`
+- DRY (alguns códigos podem ser abstraídos para funções mais genéricas e puras)
+- Adicionar loading states para os componentes.
+- Melhoraria o código de inserção de publicidade, fazendo a API já retornar a posição da publicidade, movendo a da regra de negócios para a API, facilitando a modificação simples sem mexer no front.
+- Melhorar o loading de imagens, pra otimizar performance.