8000 GitHub - sian19/Planilha_Online: Uma planilha online feita em ReactJS
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

sian19/Planilha_Online

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Planilha Online

Uma planilha online feito utilizando ReactJS no front end e firebase no back end.

Imagens do projeto:

Um projeto de uma planilha online feita em ReactJs e firebase, onde o usuário deve logar através do Facebook ou Google se o mesmo já tiver uma conta nessas duas plataformas. Após o usuário logar no site ele é direcionado para uma página onde se tem um formulário onde ele deve escolher o mês e preencher os dados que ele quer que seja salvo como banco, conta, valor, data de pagamento e data de vencimento. Com isso o usuário salva esses dados e automaticamente é exibido para ele em tela os dados com o valor somado de cada item se no caso ele colocar mais de uma linha de items. A planilha online funciona como uma espécie de controle de finanças onde o usuário ao logar e preencher os dados ele pode consultar oque foi pago ou oque ainda se vai pagar e o valor total das suas finanças que é exibido no final da tabela, dessa forma ele pode fazer o controle de cada mês de forma separada. O usuário também pode escolher um tema masculino (o site fica com cores em azul) ou feminino (o site fica com as cores em rosa).

Oque foi usado no desenvolvimento da aplicação:

    Front End

  • O projeto foi criado utilizando o framework ReactJs.
  • Foi utilizado funções e hooks para renderizar e trabalhar os componentes.
  • Foi utilizado a biblioteca react-router-dom para trabalhar a paginação e a lógica das rotas privadas.
  • Foi utilizado styled components para estilizar alguns componentes para dessa forma o trabalho de alterar algumas cores de forma dinâmica pegando por base estados ficando mais fácil o desenvolvimento.
  • Foi utilizado ContextAPI para trabalhar alguns estados de forma global.
  • Foi utilizado um estado global para fazer a alteração do tema do site de masculino para feminino ou vice versa.
  • Back End

  • Foi utilizado o Firebase para desenvolver os processos internos da aplicação.
  • Se criou um arquivo js onde fica os dados da aplicação criada no firebase, então basta importar as funções do firebase para utilizar recursos como autenticação e fazer requisições no banco de dados (CRUD).
  • Foi utilizado a biblioteca firebase-auth para fazer com que o usuário tenha a opção de logar com o Facebook ou o Google.
  • Foi utilizado a biblioteca firebase-firestorage para guardar os dados criados, ler os dados e exibi-los em tela quando solicitado pelo usuário, editar os dados e apagar algum dado em específico.

Link do projeto:

Clique aqui

About

Uma planilha online feita em ReactJS

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
0