Teste para dev frontent da Equals9

Índice

Introdução
Programas Necessários / Bibliotecas Utilizadas
EndPoints da API
Dicas
Considerações

Introdução

Faça um clone desse repositório.
Crie uma aplicação com create-react-app.
Adicione uma tela simples de login e registro utilizando axios para comunicação com a api.
Ao receber a resposta da função de login, armazenar o token que será retornado pela requisição no localStorage to browser.
Após autenticar, adicionar duas telas com um menu utilizando a biblioteca react-router-dom para fazer o controle das rotas.
Na primeira tela a finalidade é criar um ToDo, monte um input para adicionar uma tarefa e liste todas abaixo com um botão para deletá-la individualmente e um checkbox para concluir ou ativar novamente a tarefa.
Na segunda tela a finalidade é criar um jogo ou uma atividade simples e interativa, fica á sua escolha (como exemplo um jogo da velha ou uma calculadora).

Programas

As ferramentas e bibliotecas para criar o projeto são (podendo utilizar outras caso necessário):

EndPoints

Método	EndPoint	Body	Descrição	Retorno
POST	/signup	{ username: "user", password: "pass" }	Rota para criar usuário novo	{ "msg": "Usuario criado com sucesso!" }
POST	/auth	{ username: "user", password: "pass" }	Rota para fazer requisição de login autenticando usuário	{ "msg": "Usuário autenticado com sucesso!", "token": "eyJhbGciOiJIUzI1N..." }
GET	/todo	{ params: { page: 1 } }	Retorna todos os items da lista de tarefas	{ "docs": [{ "_id": "61cf4b45182b60288ed4553a", "tarefa": "teste1", "ativo": true, "registro": "2021-12-31T18:26:13.742Z", "__v": 0}], "total": 1, "limit": 20 }
POST	/todo	{ tarefa: "tarefa", ativo: true }	Cria uma nova tarefa encaminhando os parâmetros acima	{ "_id": "61cf4b45182b60288ed4553a", "tarefa": "teste1", "ativo": true, "registro": "2021-12-31T18:26:13.742Z", "__v": 0 }
DELETE	/todo/:id		Deleta a tarefa que for passada como id no parâmetro	{ "docs": [{ "_id": "61cf4b45182b60288ed4553a", "tarefa": "teste1", "ativo": true, "registro": "2021-12-31T18:26:13.742Z", "__v": 0}], "total": 1, "limit": 20 }
PATCH	/todo/:id	{tarefa:'nomeTarefa',ativo:false}	Edita o valor da tarefa, podendo mandar somente um dos parâmetros para fazer atualização. (lembre de encaminhar o id da tarefa no parâmetro para modificar)	[{ "_id": "61cf4b45182b60288ed4553a", "tarefa": "teste1", "ativo": true, "registro": "2021-12-31T18:26:13.742Z", "__v": 0}], "total": 1, "limit": 20 }

Dicas

Clone do projeto por Https

git clone https://github.com/Equals9Tech/teste.git .

Clone do projeto por SSH

git clone git@github.com:Equals9Tech/teste.git .

Criar Projeto após o clone

npx create-react-app .

Instalar as Bibliotecas

npm i axios react-router-dom

Exemplo de utilização do axios para login

import React,{useRef} from 'react'
import axios from 'axios';

const App = () => {
  const usernameValue = useRef(null)
  const passwordValue = useRef(null)
  const endpoint = 'https://endpoint.com'

  const handleLogin = async () => {
    const submitLoginValue = {username: usernameValue.current?.value, password: passwordValue.current?.value}
    const submitLogin = await axios.post(`${endpoint}/login/`, submitLoginValue).catch(console.log)
    const resultado = submitLogin.data
    // utilizar o resultado para armazenar o token no localStorage do Browser
  }

  return (
    <>
      <input type='text' ref={usernameValue} placeholder='Username' />
      <input type='password' ref={passwordValue} placeholder='Password' />
      <Button type="primary" onClick={handleLogin}>Entrar</Button>
    </>
  )}

Exemplo de criação de conta

  const handleCreateAccount = async (username,password) => {
    const createAccount = await axios.post(`${endpoint}/login/${id}`,{ username:username,password:password }).catch(console.log)
    const resultado = deleteTodo.data
    // Atualizar a lista de todos a partir do resultado
  }

Exemplo de criação tarefa

  const handleCreateTodo = async (tarefa) => {
    const submitTodo = await axios.post(`${endpoint}/todo`, tarefa).catch(console.log)
    const resultado = submitTodo.data
    // Atualizar a lista de todos a partir do resultado
  }

Exemplo de atualização de tarefa

  const handleUpdateStatus = async (id) => {
    const submitUpdatedValue = await axios.patch(`${endpoint}/todo/${id}`, { active:false }).catch(console.log)
    const resultado = submitUpdatedValue.data
    // Atualizar a lista de todos a partir do resultado
  }
  const handleUpdateTodoName = async (id) => {
    const submitUpdatedValue = await axios.patch(`${endpoint}/todo/${id}`, { tarefa:'novoNome' }).catch(console.log)
    const resultado = submitUpdatedValue.data
    // Atualizar a lista de todos a partir do resultado
  }

Exemplo de deleção de tarefa

  const handleDeleteTodo = async (id) => {
    const deleteTodo = await axios.delete(`${endpoint}/todo/${id}`).catch(console.log)
    const resultado = deleteTodo.data
    // Atualizar a lista de todos a partir do resultado
  }

Exemplo de Utilização de redirecionamento do rect-router-dom para login caso não tenha token ainda.

<Route {...rest} render={() => (token ? <Component {...rest} /> : <Redirect to="/login" />)} />

Considerações

A tendência é a aplicação ser simples e direta, então levaremos em consideração a funcionalidade e a criatividade no layout. O endereço do meu discord é Ikira#1181, fique a vontade para tirar qualquer dúvida por mais que pareça simples. Buscar a informação é uma virtude, sanar as dúvidas é importante para o desenvolvimento, independente do nível de dificuldade =D.

Um detalhe que é opcional porém seria muito bem visto por nós, seria utilizar a biblioteca do MetaMask para react para conectar e ler balanço da carteira

biblioteca: Metamask-React

carteira do MetaMask: Metamask

romsishiyama / teste