/TodoFrontEnd

Projeto desenvolvido para avaliação de capacidades em uma vaga fullStack.

Primary LanguageJavaScript

Bem vindos ao TodoFrontEnd

Objetivo

Projeto desenvolvido para avaliação de capacidades em uma vaga fullStack.

O desafio

A empresa Ebytr está passando por problemas de produtividade/controle porque as pessoas colaboradoras vêm tendo dificuldade na organização de suas tarefas individuais. Por esse motivo, a diretora de produto Carolina Bigonha decidiu implantar uma nova forma de organizar as tarefas. Você foi a pessoa contratada para desenvolver um sistema capaz de auxiliar as pessoas colaboradoras a se organizar e ter mais produtividade. Na Ebytr o time de desenvolvimento utiliza a Stack MERN para criar suas aplicações. Foi combinado com a Ebytr que você utilizará essa mesma Stack para resolver o problema de organização e produtividade da empresa. Abaixo estão (i) os requisitos técnicos, (ii) as funcionalidades, (iii) critérios de avaliação do desafio e (iv) algumas dicas importantes.

Requisitos técnicos:

  • Front-End em React;
  • Back-End em NodeJS, com MongoDB;
  • Arquitetura em camadas;

Funcionalidades

  • Visualizar a lista de tarefas;
  • Esta lista deve ser ordenável por ordem alfabética, data de criação ou por status;
  • Inserir uma nova tarefa na lista;
  • Remover uma tarefa da lista;
  • Atualizar uma tarefa da lista;
  • A tarefa deve possuir um status editável: pendente, em andamento ou pronto;

Como instalar

Pré-requisitos para rodar o projeto:

  • NPM

Copie o ssh do projeto git@github.com:cae07/TodoFrontEnd.git

  • Abra um terminal no seu computador e utilize os comandos abaixo na ordem que são apresentados:

  • git clone git@github.com:cae07/TodoFrontEnd.git

  • cd TodoFrontEnd

  • npm install

  • npm start

A aplicação rodará na porta 3000.

Arquitetura da aplicação

├── README.md
├── src
│   ├── setupTests.js
│   ├── index.js
│   ├── App.js
│   ├── api.js
│   ├── Tests
│   │   ├── login.test.js
│   │   ├── main.test.js
│   │   └── renderWithRouter.js
│   │
│   ├── Pages
│   │   ├── index.js
│   │   ├── Loading.jsx
│   │   ├── Login.jsx
│   │   └── Tasks.jsx
│   │
│   ├── Images
│   │   ├── fundo.jsx
│   │   └── fundo2.jsx
│   │
│   ├── Dictionary
│   │   └── errorMessages.jsx
│   │
│   ├── CSS
│   │   ├── login.css
│   │   └── todolist.css
│   │
│   ├── Context
│   │   ├── myContext.js
│   │   └── Provider.js
│   │
│   └── Component
│       ├── helpers
│       │   ├── index.js
│       │   └── validateFields.js
│       │
│       ├── Modal
│       │   ├── AlertModal.js
│       │   ├── DeleteModal.jsx
│       │   ├── index.js
│       │   └── UpdateModal.jsx
│       │
│       ├── index.js
│       ├── LoginForm.jsx
│       ├── TasksBody.jsx
│       └── TasksHeader.jsx
│
├── package-lock.json
└── package.json

Tecnologias

  • React
  • bootstrap
  • react-bootstrap
  • eslint
  • dotenv
  • prop-types
  • axios

Regras de negócio

Tela de login

Input email

necessário email válido no formato seuEmail@email.com

Input password

necessário password válido

Tela de Cadastro

Input email

necessário email válido no formato seuEmail@email.com e necessita ser único.

Input password

Mínimo de 6 digitos

Tela de tasks

input nova tarefa

O campo não pode ser vazio

input atualizar tarefa

O campo não pode ser vazio

Comandos básicos

Iniciar aplicação

  • npm start

Rodar testes

  • npm test

Próximos passos

  • Adicionar filtros para visualização da tabela
  • Continuar os testes do app

Link para o projeto

https://todo-front-end-psi.vercel.app/

Link para o repositório de Back-end

https://github.com/cae07/TodoBackEnd

Divirta-se