A Personal Finance Application Built With React

Overview

Desafio | Front-end - Módulo 3

Após alguns meses trabalhando em projetos mais simples, você foi designado pelo seu Tech Lead para desenvolver uma aplicação que será apresentada a um cliente muito importante.

Para acessar o repositório da API que será consumida no front, acesse o seguinte link.

Para o seu desenvolvimento foi liberado layout que você pode encontrar no seguinte link.

Para acessar o pdf contendo as informações de id e class, acesse o seguinte link.

O sistema trata-se de uma aplicação para controles de finanças pessoais, e as funcionalidades são:

Observação: Existem funcionalidades obrigatórias e opcionais!

  • Cadastro de uma nova transação (Obrigatório)
  • Edição de uma transação (Obrigatório)
  • Exclusão de uma transação (Obrigatório)
  • Listagem de transações (Obrigatório)
  • Ordernação dos items conforme clicado no header da tabela nas seguintes colunas: Data, Dia da semana e Valor (Obrigatório)
  • Na parte de resumo, o valor de entradas,saídas e saldo é referente ao que está listado na tabela (Obrigatório)
  • A parte de filtros não é toda obrigatória, veja abaixo:
    • Dia da semana (Opcional)
    • Categoria (Opcional)
    • Valor (Obrigatório)

Dicas importantes

Você receberá um boilerplate (um projeto com algumas configurações prontas).

Para começar a trabalhar você precisará executar alguns comandos, mas isso é somente na primeira vez.

  1. Realizar o fork do repositório
  2. Clonar para seu computador o fork feito
  3. Executar o npm install (para instalar as dependências)
  4. Executar o npm start (Para "rodar" o projeto! Esse passo deve ser executado todas as vezes que você for desenvolver a aplicação)

Quando você fizer todos esse procedimentos, o projeto em React irá executar e exibir no seu navegador uma aplicação básica.

Observação: Caso não abra automaticamente o seu navegador, você pode acessar o projeto usando o endereço http://localhost:3000 .

Detalhamento de Requisitos:

Cadastro de uma nova transação:

Para cadastrar uma nova transação o usuário deverá clicar no botão Adicionar Registro, que ficará logo abaixo da área de resumo.

Ao clicar no referido botão, um modal com a opção de adicionar informações de uma transação deve ser exibido:

Nesse modal todas as informações devem ser preenchidas, lembrando que você pode adicionar uma entrada ou saída de dinheiro, por padrão o valor deve ser o de saída, caso o usuário queira adicionar um valor de entrada ele precisará clicar no botão Entrada.

*Todos os campos são obrigatórios!

Após realizar as validações, após o usuário clicar no botão confirmar, uma nova transação deve ser inserida e a tabela de listagem deve ser atualizada.

É importante lembrar que quando adicionarmos uma nova transação, a área de resumo deve refletir o que a tabela está exibindo, refazendo assim todos os cálculos após a inserção de um novo registro.

Editar uma transação:

Para editar uma transação o usuário deverá clicar no ícone do lápis, que se encontrará na tabela de listagem de transações:

Esse ícone =>

Ao clicar no ícone de editar uma transação, o modal (que foi utilizado para adicionar uma nova transação) deverá ser aberto e as informações da transação "clicada", deverão ser preenchidas automaticamente, assim como a imagem abaixo:

*Novamente, todos os campos são obrigatórios!

Após validar os campos e o usuário clicar em confirmar, a transação deverá ser atualizada na API usando requisição do tipo patch ou put e a transação deverá ser atualizada na tabela de listagem de transações.

Excluir uma transação:

Para excluir uma transação o usuário deverá clicar no ícone da lixeira, que se encontrará na tabela de listagem de transações:

Esse ícone =>

Ao clicar nesse ícone, um "popup" irá aparecer para que o usuário confirme ou não a exclusão, fazendo com que não hajam exclusões por engano, veja abaixo como aparece o "popup":

Listagem de transações:

As transações registradas por meio dos endpoints da api, deverão ser listadas numa tabela que ficará ao centro da página, nessa tabela teremos 6 colunas, sendo:

  1. Data da transação no formato dd/mm/yyyy
  2. Dia da semana, nessa coluna deveremos utilizar apenas os primeiros nomes dos dias da semana, ao invéz de Segunda-Feira, deveremos utilizar o formato Segunda.
  3. Descrição, nessa coluna listaremos as descrições informadas no cadastro de transação.
  4. Categoria, aqui vamos mostrar as categorias inseridas em cada uma das transações cadastradas.
  5. Valor, nessa coluna exibiremos os valores de cada uma das transações. Existem uma regra importante nas cores e nos sinais, para valores de entrada de dinheiro (credit) exibimos o número positivo e na cor roxa, já para Saídas de dinheiro (debit) exibimos o número na cor laranja.
  6. Na última coluna nós não teremos um cabeçalho, nessa coluna ficarão os botões de editar e excluir.

Cada linha da tabela representa uma transação. Portanto cada botão representa a ação para um registro.

Cabeçalho da tabela:

No cabeçalho da tabela deverá haver a opção de clicar e ordenar de forma crescente e decrescente, para isso basta o usuário clicar no nome da coluna, a cada clique a ordenação deve ser alterada entre crescente e decrescente.

Cada vez que clicamos no nome da coluna, as ordenações feitas em outras colunas devem ser desfeitas, sendo assim, somente é possível ordenar uma coluna por vez.

As colunas que possuem ordenação são: Data, Dia da semana e Valor.

Veja abaixo o ícone que representa que a coluna está sendo ordenada:

  • Ordenando a coluna data de forma crescente (do menor para o maior)
  • Ordenando a coluna Dia da semana de forma decrescente (do maior para o menor)

Importante: Somente a coluna em ordenação deve conter os ícones, resumidamente quando clicamos em uma coluna para ordenar, os outros ícones das demais colunas devem desaparecer.

Resumo das transações:

O resumo das transações devem ser exibidos numa "box", onde teremos apenas 3 informações:

  • Entradas
  • Saídas
  • Saldo

É importante ressaltar que os valores de entrada, saída e saldos são calculados com base nos elementos mostrados na tabela, ou seja, suponhamos que hajam 10 transações cadastradas na api, mas a tabela está recebendo um filtro por dia da semana e somente 3 transações estão sendo exibidas, basicamente o resumo deve ser calculado com base nessas 3 transações apenas.

Veja na imagem abaixo, como deve ser o resumo;

Filtros:

A área de filtros por padrão é oculta, por isso você deve implementar a lógica para que quando o usuário clique no botão Filtrar a área de filtro seja exibida e quando clicar novamente seja ocultada, veja abaixo o botão que exibe/oculta a área de filtros:

Os filtros servem para dar granularidade aos dados, ou seja, para haver a possibilidade de exibir as transações conforme selecionamos requisitos para tal. Por exemplo, se disseremos que deve-se exibir apenas as transações realizadas aos domingos, basicamente deveríamos selecionar o domingo no filtro de Dia da semana, veja o exemplo abaixo:

Os filtros são cumulativos, ou seja, se você seleciona para filtrar segunda em dia da semana, depois seleciona pix em categoria, informa valor mínimo 10 e valor máximo 300, todos os filtros devem ser levados em consideração. Resumidamente não devemos exibir na tabela transações com: Valores menores que 10, valores maiores que 300, realizadas em um dia diferente de segunda e nem outra categoria que não seja pix.

O funcionamento dos filtros segue a seguinte ordem:

  1. Seleciona-se os filtros em dia da semana ou categoria
  2. Informa-se valores mínimos e/ou valores máximos
  3. Após selecionar os filtros desejados, clica-se no botão aplicar filtros.

Importante: Não é obrigatório selecionar todos tipos de filtros (Dia da semana + Categoria + Valores Mínimos + Valores Máximo), pois todos eles são indepententes.

Para limpar os filtros atuais, o usuário deverá clicar no botão limpar filtros

Importante:

  1. Ao clicar em aplicar filtros sem nenhum filtro selecionado, o sistema deve exibir todas as transações disponíveis cadastradas.
  2. Ao clicar em limpar filtros, o sistema deve exibir todas as transações disponíveis cadastradas.

Veja na imagem abaixo os botões:

Aulas úteis:

LEMBRE-SE: é melhor feito do que perfeito!!!

tags: front-end módulo 3 React CSS desafio
Owner
Giu Zambot
Giu Zambot
A Personal Finance Application Built With React

Desafio | Front-end - Módulo 3 Após alguns meses trabalhando em projetos mais simples, você foi designado pelo seu Tech Lead para desenvolver uma apli

Giu Zambot 2 Oct 13, 2021
A portfolio built in React and NextJS. Simple, clean, and fast.

A portfolio built in React and NextJS. Simple, clean, and fast.

Vipul Jha 51 Oct 18, 2021
React Weather App - A simple weather app that allows you to get current weather information

React Weather App - A simple weather app that allows you to get current weather information

Kirill Bukovski 0 Sep 23, 2021
React Front End for Gallery API

React Front End for Gallery API

null 3 Oct 13, 2021
Google Search themed portfolio website, made using ReactJS

Google Search themed portfolio website, made using ReactJS

Enjeck Cleopatra 108 Oct 12, 2021
Personal blog by Dan Abramov.

overreacted.io My personal blog. Forked from Gatsby blog starter. Syntax theme based on Sarah Drasner's Night Owl with small tweaks. To run locally, y

Dan Abramov 6.2k Oct 15, 2021
Chat Loop is a highly scalable, low-cost, and high performant chat application built on AWS and React leveraging GraphQL subscriptions for real-time communication.

Chat Loop is a highly scalable, low-cost, and high performant chat application built on AWS and React leveraging GraphQL subscriptions for real-time communication.

Smile Gupta 20 Aug 29, 2021
Restaurant Finder application for NYC demonstrating Atlas Search Features. Uses React and Tailwind.

What's Cooking with Atlas Search A Restaurant Finder Application Demo MongoDB Atlas Search Hello! ?? This application allows you to search lightning f

MongoDB Developer Relations 7 Oct 18, 2021
Node.js and mongoDB Google Drive Clone

MyDrive MyDrive is an Open Source cloud file storage server (Similar To Google Drive). Host myDrive on your own server or trusted platform and then ac

null 2.5k Oct 14, 2021
Spaceflix is a pixel-perfect clone of Netflix. Browse and watch trailers, create individualized profiles, and save movies to your personal list for later viewing.

Spaceflix Visit the Live Site here Spaceflix is a space-themed, pixel-perfect clone of Netflix. Like the real thing, Spaceflix allows users to stream

Ezra Hecker 34 Sep 23, 2021
Fast 🚀 and easy beautiful progressive portfolio app. Made with React.

Portfolio Website Sv.dev Built With My personal portfolio sv-dev.netlify.app This project built using these technologies: React.js SASS Cloudinary Wor

Volodymyr Snaichuk 11 Sep 15, 2021
A ReactJS clone application of the popular Spotify music streaming service. This application utilizes the Spotify API and the Spotify Web Playback SDK

Spotify Clone Front-End A front-end clone project of the Spotify web player. The project was created using the create-react-app CLI. The app is meant

null 198 Oct 11, 2021
Elementos is a web-based application that allows you to explore periodic table elements.

Elementos - React/Redux Microverse Capstone Project Elementos is a web-based application that allows you to explore periodic table elements. It featur

Ángel Díaz 8 Oct 16, 2021
👻 A SnapChat clone built with React, Redux and Typescript. Styled with SASS. Tested with Cypress, Jest and Enzyme. Linted with Eslint and formatted with Prettier!

?? SnapChat Clone [LIVE APP] [Live App] • [Video Demo] ⚡️ Breakdown Built with React Only functional components using hooks Folder structure: Flat - n

null 835 Oct 1, 2021
React + TypeScript app built using clean architecture principles

React + TypeScript app built using clean architecture principles

Alex 1.1k Oct 18, 2021

Fakebooker 1.0.0 Fakebooker is an extensive open-source project that is essentially a clone of the real Facebook. Now Fakebooker is not one of those l

Kristian 142 Sep 13, 2021
Winamp 2 reimplemented for the browser

Webamp A reimplementation of Winamp 2.9 in HTML5 and JavaScript with full skin support. As seen on TechCrunch, Motherboard, Gizmodo, Hacker News (1, 2

Jordan Eldredge 8.2k Oct 18, 2021
Talk2Feel - A React based chat app using chatengine.io Rest API and has features of creating groups and Sign-In with any valid Google Account.

Talk2Feel - A React based chat app using chatengine.io Rest API and has features of creating groups and Sign-In with any valid Google Account. As the mental health of people is becoming a major issue now-a-days therefore this project is created keeping in mind the idea of giving a platform to the people where they can share their worries and thoughts with anyone online and do not need to reveal their identity as well as other personal data.

Anshika Srivastava 4 Oct 5, 2021
A minimalistic manga reader for desktop built with React and Django

A minimalistic manga reader/server for serving local manga images on desktop browser.

Padam Upreti 9 Aug 28, 2021