Aplicação com exibição de notícias do New York Times - Teste Compasso UOL

Notícias de Ciência e Tecnologia consumidas da Api do New York Times
Explore o conteúdo »

Reporte Bugs · Envie seu feedback

Conteúdo

1. Sobre o Projeto
   • Tecnologia utilizada
2. Iniciando
   • Pré-requisitos
   • Configuração
3. Contato

Sobre o Projeto

Descrição do teste: https://github.com/rodrigo-oliveira-compasso/teste-react

Essa foi uma aplicação utilizando a plataforma nodejs e framework reactjs. O backend serviu para basicamente criar uma api que consome os dados da api do NYT, Usei o express para realizar essa tarefa. Usado o cors para liberar a api do backend para o frontend(a api do NYT poderia ser consumida diretamente do frontend, mas para fins de teste criado o backend).

No front optei por utilizar o Styled components pelo fato de mapear melhor os componentes, embora possa parecer verboso, a manutenção pode ficar mais rápida. Usei algumas dependências para facilitar o tratamento de dados como o date-nfs que ajuda na manipulação de datas. O axios usei para realizar a conexão com a api do backend.

Desenvolvido com

Principais tecnologias:

• React
• Nodejs

Principais Dependências:

• Styled Components
• Axios
• Date nfs
• Express
• Cors

Iniciando

Acesso a aplicação

Realizar os passos do tópico: Configuração desse Readme e na sequencia acessar http://localhost:3000.

Funcionalidades

1. Ao carregar o endereço http://localhost:3000 já estará com o título das notícias do NYT distribuídas em cartões dinamicamente;
2. Para escolher o tipo de assunto das noticias que deseja visualizar(ciência ou Tecnologia), basta clicar no menu que fica no topo da página e selecionar o assunto desejado.
3. Ao clicar no cartão da notícia irá abrir um modal com os seguinte dados: Título, assunto e a url da notícia selecionada.
4. Para sair do modal, basta clicar em qualquer parte da tela

Veja o Protótipo: Veja o Protótipo :https://xd.adobe.com/view/9a1ad5ef-25d2-42cb-9d55-aadd0be93ef2-cf49/

Pre requisitos

• Node instalado

Configuracao

Faça o clone desse repositório

Iniciando o Backend :

I.Na pasta Backend executar o comando:

npm install

II.Assim que finalizar a instalação do node_modules, executar o comando:

npm start

O backend estará disponível no endereço: http://localhost:3333

Iniciando o Frontend :

I. Na pasta Frontend/web executar o comando

npm install

II.Assim que finalizar a instalação do node_modules, executar o comando:

npm start

Após feito essas etapas, o projeto poderá ser acessado nesse endereço: http://localhost:3000

Contato

Fellipe Carvalho - https://br.linkedin.com/in/fellipe-carvalho-6b688190 - [email protected]

Link do Projeto: https://github.com/FellipeCarvalho