Login e criação de comentários com React
help
{{apiData.me.position}}˚ no Ranking
profile pic account_circle
Login Comece agora
Iniciar Desafio Iniciar Desafio Fórum
{{apiData.participant_count}} Participantes
Criado Por: Created by Bruno Ventura
React
ES6
Javascript
Testes unitários
React-Router
LocalStorage

Login e criação de comentários

Utilizando React, React-Router, LocalStorage e testes unitários, você irá criar uma interface para registro e login de usuários, assim como de criação e visualização de comentários para receitas utilizando armazenamento com LocalStorage.

Tópicos

Com esse desafio, você aprenderá:

  • React
  • ES6
  • Javascript
  • Testes unitários
  • Formulários
  • LocalStorage
  • Controle de usuários

Requisitos

Você precisará do Nodejs (LTS ou Current) instalado em sua máquina.

Detalhes

Dentro da pasta src, você encontrará a estrutura básica do projeto React, todos arquivos necessários já estão criados assim como a estrutura em relação a HTML e CSS. Sua missão será criar a lógica dos componentes para deixá-lo dinâmico.

Dentro da pasta sample_data, você terá uma listagem de receitas que deverá ser impressa na tela.

Para auxiliar seu desenvolvimento, dentro da pasta services, você encontrará os módulos commentsService e loginService.

DICA: Aproveite o código desenvolvido no desafio anterior para facilitar a implementação

Tarefas

Registro e Login

  1. No endpoint /user/login, ao preencher usuário, senha e clicar no botão de Register, o usuário deverá ter seus dados registrados e login realizado;
  2. No endpoint /user/login, ao preencher usuário, senha e clicar no botão de Login, com dados VÁLIDOS, o usuário deverá ter seu login realizado;
  3. No endpoint /user/login, ao preencher usuário, senha e clicar no botão de Login, com dados INVÁLIDOS, o usuário deverá receber uma mensagem de erro;
  4. O usuário LOGADO não pode entrar no endpoint /user/login;
  5. O usuário NÃO LOGADO não pode entrar no endpoint /user/profile;
  6. No endpoint /user/profile, ao clicar em Logout o usuário logado deverá ter sua sessão encerrada;

Comentários

  1. No endpoint /recipe/:recipeSlug, o usuário deverá ver todos os comentários da receita listados dentro do componente CommentsBlock;
  2. Apenas usuários logados devem poder comentar;
  3. O usuário logado deve poder remover os comentários que ele mesmo criou, IMPORTANTE: O icone trash deverá aparecer apenas nos comentários do usuário logado;

Atenção

  • NÃO MUDE o nome dos componentes, eles são utilizados para a realização dos testes.
  • Os testes do exercício anterior não serão validados novamente

Rodando a aplicação

Na primeira execução rodar o comando:

npm install

Para rodar a aplicação:

npm start
codenation code review

Para receber Code review, compartilhe o link abaixo com colegas ou em nosso fórum de discussões:

codenation code review

Para receber Code review, você precisa primeiramente finalizar o desafio.

{{apiData.participant_count}} Participantes

Para definir seu posicionamento no ranking do desafio, utilizaremos a nota mais alta que tiver conquistado nele. Caso outra pessoa participante obtenha a mesma nota que a sua, o critério de desempate será data e hora de envio da mais recente.

empty ranking Ainda não temos participantes suficientes para o ranking!
Aproveite e seja um dos primeiros a participar desse desafio.
CODE:NOME NOTA
{{candidate.position}}. {{candidate.name}} {{candidate.score.toFixed(2)}}%
Installing Node.js via package manager

[Inglês] Guide to how install Node.js

Javascript Eloquente

Esse livro é sobre JavaScript, programação e maravilhas digitais

React Official Documentation

[Inglês] Documentação oficial do React

O que é React

Introdução ao que é o React

Testing React with Jest and Enzyme

[Inglês] Como testar componenentes React com Jest e Enzyme

Gerenciando rotas com React Router

Primeiro passos para criar uma aplicação com roteamento

Testing React-Router

[Inglês] Melhores práticas no teste de componentes com React Router

[Vídeo] React #6 - Como tratar Input

Tratando inputs com React

Usando Web Storage API

A API Web Storage fornece mecanismos pelos quais os navegadores podem armazenar pares de chaves/valores de uma maneira muito mais segura e intuitiva do que usar cookies. Este artigo fornece um passo a passo sobre como usar essa tecnologia.