Este projeto é um desafio técnico e comportamental.
O entregável será um site de notícias. Para efeitos didáticos, usaremos como fonte de dados a API do site The New York Times.
Fixar conhecimento em:
- Javascript
- HTML
- CSS
- Node
- Express
- Rotas
- Views (hbs)
- partials
- layout
- Organização;
- Leitura e compreensão de Documentação de módulos;
- Leitura de documentação de API;
- Boas práticas de código JS;
- Escrever documentação sobre projetos;
- Aprender novos módulos.
- Antes de começar, você precisa ler este documento até o fim.
Para este projeto, você deverá utilizar:
- Yarn
- Node.js
- Módulo node-fetch, para buscar dados da api;
- Módulo dotenv, para ler suas variáveis de ambiente;
.gitignorepara evitar que alguns arquivos ou pastas sejam versionados;- handlebars, para as views;
- Api de notícias do
The New York Times
Este projeto já vem com scripts de pré-commit e pré-push configurados para o padrão de código utilizado pelo time do Google. É uma excelente oportunidade de aprender e aplicar boas práticas de código. <3
É extremamente importante que você leia e/ou tenha fácil acesso à documentação dos módulos node-fetch e dotenv antes de começar a colocar a mão na massa.
Você deverá proteger suas credenciais. Elas não poderão aparecer em seu código versionado no github (em nenhum commit), para isso, utilize os arquivos:
.envpara guardar suas variáveis de ambiente e chaves..gitignorepara ignorar o arquivo e pasta de nomes.envenode_modulesrespectivamente.
Como usaremos a API do The New York Times, você precisará das credenciais de desenvolvedor para ter acesso aos dados do site. Para criar uma credencial de desenvolvedor, siga o passo a passo disponível no site abaixo:
https://developer.nytimes.com/get-started
A documentação da API do NYT está disponível em: https://developer.nytimes.com/docs/articlesearch-product/1/overview
O projeto deve ter as seguintes páginas:
- Página inicial
- Resultado de Busca
- Notícias mais vistas hoje
- Notícias mais compartilhadas por e-mail
- Sobre este site
Todas as páginas devem ter:
- o selo do New York Times, conforme informado na página de branding do jornal.
- Menu superior com logo e links para auxiliar a navegação
- Rodapé com links para todas as páginas do site
A página inicial deve ter um formulário de busca centralizado na parte superior; Logo abaixo do formulário de busca, deverá ser carregada uma lista com as 10 últimas notícias do site.
- O formulário de busca deve ter um campo de texto e um botão de "buscar". A página deverá seguir o padrão do site do jornal, mas você pode usar de sua criatividade para melhorar.
-
Para o formulário:
- Usar o método
GET; - O nome do campo de busca deve ser
q, de "query". - Ao clicar no botão
buscar, o usuário deve ser redirecionado para uma nova página/search-results
- Usar o método
-
Abaixo do formulário, deverá ser exibida uma lista com as últimas notícias de hoje.
- A página
/search-resultsdeve conter o resultado da busca pela palavra chave digitada pelo usuário; - O visual do resultado de busca deve ser igual ao do site oficial do The New York Times
- Ao clicar em uma notícia, o usuário deverá ser direcionado para a notícia no site do The New York Times;
- Caso a busca não tenha resultado, deverá retornar uma mensagem informando que não tem resultado, uma caixa de busca (identica a da página inicial) e, logo abaixo, a listagem das 10 últimas noticias de hoje.
Deverá exibir as últimas notícias de hoje, seguindo o mesmo formato do site oficial na sessão "Trending"
Deverá exibir as notícias mais compartilhadas por e-mail, seguindo o layout do site oficial na sessão "Trending"
Esta página é para você se apresentar e dizer para o mundo como você fez este projeto e, claro, dar crédito para os módulos e ferramentas que você utilizou.
Caso queira mostrar para o mundo o seu grande feito, siga os passos desta página: https://devcenter.heroku.com/articles/git
Lembre-se de compartilhar o link com a gente. <3