Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/joaog23/fluxosfrontend

O front-end da minha aplicacão de controle financeiro pessoal Dinamica Fluxos
https://github.com/joaog23/fluxosfrontend

finance money reactjs redux redux-thunk styled-components typescript

Last synced: 21 days ago
JSON representation

O front-end da minha aplicacão de controle financeiro pessoal Dinamica Fluxos

Awesome Lists containing this project

README 

        
 



Fluxos Frontend






Estas são as tela do sistema de financas pessoais Fluxos, separei a aplicação em dois repositorio para melhor organização do projeto.



 Indice 🗂️





 
  •  1 - 🪡Edições •
    • 

     
  •  1 - 🚪Introdução •
    • 

     
  •  2 - ⚙️ Tech Usadas • 
    • 

     
  •  3 - 👇🤘 Como instalar • 
    • 

     
  •  4 - 🤘Como Usar • 
    • 

     
  •  5 - Considerações finais  • 
    • 

     
  •  6 -📁😅🤪 Coisa não tão relevantes • 
    • 

     
  •  7 -🧑‍💻 Autor • 
    • 

     
  •   8- Licença • 
    • 


    Edições 🪡
    


    Alterações   | Data | Versão

    :---------: | :------: | :------:

    Correção Bugs erros | 06/09/2022 | 1.0.0

    Emissão Inicial | 05/09/2022 | 1.0.0
    


    Introdução🚪
    


    Este sistema tem o intuito organizar as minhas finanças pessoais, baseado em uma planilha de uso posterior por mim, foca na organização com base nas necessidades do usuário, usando das classificações para separação gastos e lucros do usuário.
    


    Techs Usadas 🦾
    


    [![My Skills](https://skillicons.dev/icons?i=js,html,css,ts,react,styledcomponents,redux)](https://skillicons.dev)
    


    **• Typescript**

    **• React**

    **• Styled-Components**

    **• Redux**

    **• Axios**

    **• ReactChats-2**
    


    3- Como instalar 🧑‍🔧
    


    1. Instale o Backend. Clique aqui para ver como instalar!

    2. Clone o sistema.

    3. Abra o terminal na pasta raiz.

    4. Digite um npm install.

    5. Volte no terminal e digite npm run build

    6. A pasta build será criada. Basta usar um servidor para teste Tipo live server ou npm start para testa o servidor.
    


    O próprio node.
    


    4- Como usar 👩‍💻
    


    Entre com 

    usuario de **testedev** e

    senha : **testedev**

    esse usuário e administrador caso queria ver todas as telas.
    


    ou

    Crie o seu próprio um usuário e senha.
    


    Na tela inicial clique e registre.
    


    para entrar como usuário comum **Atenção esse usuário tem somente acesso a tela DASHBOARD**
    


    ### 🤫Ei você quer testar essa aplicação em tempo real! então clique abaixo 👇🏽:

    Teste um deploy já feito agorinha 🙃!
    


    


    Em seguida faça login com sua senha e usuário.
    


    Explicando as telas do Sistema.🤔😁
    


    #### Dashboard mostrando alguns dados.
    


    **Mês atual** 📅
    


    Mostra dados relevante logo no inicio da aplicacão esses dados são servidos alguns com gráficos para melhor visualização destes. Eles são:
    


    • Ganhos

    • Gastos

    • Saldo Atual

    • Ganhos por subelementos 

    • Gasto por subelementos
    


    **Subelemento** vem da minha classifição, na contabilidade existe 2 elementos chamados de **ATIVOS E PASSIVO**, assim, vendo isso eu criei a legenda subelemento que, simbolizando uma classificação abaixo dos elementos. Sendo eles, Bens de uso, bens de consumo ou lazer entre outras coisa.
    


    **Do Ano**

    Demostrando os Gasto e Ganhos ao longo de 12 meses
    


    


    #### Fluxo de Caixa 💸
    


    Manipula os gastou e ganhos do fluxo de caixa dando, podendo adicionar, deletar, editar, e classificar, tudo bem intuitivo uso para os usuáros da aplicação 
    


    


    #### Configurações 🪛
    


    Tem algumas classifições serve para organização dos dados do fluxo de caixa com local, tipo de elemento passivo ou ativo, entre outras coisa...
    


    Elas serão usadas no fluxo de caixa ao adicionar um novo item.
    


    


    #### Usuários 🚶‍♂️
    


    Gerencia os usuários da aplicação. Lista todos os usuários

    Importante ressaltar que foram criados dois tipos de usuários os administradores, com acesso a todos os privilégios e comum, sendo que o comum somente tem acesso a tela inicial dashboard.
    


    


    #### Usuário Logado 🙋🏽‍♂️
    


    Mostra dados do usuário logado presente nesse momento.
    


    


    Os usuários podem sem **admin ou não admin**, administradores podem ver todas as telas, já usuários **comuns** somente podem ver somente o **dashboard.**
    


    


    5 -🥺😭 Considerações finais
    

    Ainda tem alguns bugs que não conseguir resolver do react, mas vou trabalhar nisso.
    


    Esse projeto foi com trazer o que já foi consolidado anos atrás com uma planilha de Excel pra web,😓😒 porém tive a infelicidade de isso não dar muito certo, devido o tipo de modo que foi desenvolvido a aplicação. Não pude nem escalar e mais nem o hospedar para possível demonstração prática para todos. Se quiserem mais detalhes disso basta entrar em contato comigo no LinkedIn ou no e-mail.

    Enfim,😉 no mais ela ficou sendo uma aplicação desktop mesmo... futuramente irei refatorá-la para e gerar um ou novo programa ou atualizar o existente. Obrigado pela atenção de todos.
    


    8 - Autor ✍🏻
    


     

     
    

     Joao Guilherme 🚀
    


    Feito com 🤭 por Joao Guilherme 👋🏽 Entre em contato!
    


    [![Linkedin Badge](https://shields.io/badge/-Joao-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/jaoo/)](https://www.linkedin.com/in/joaog123/)

    [![Badge](https://shields.io/badge/[email protected]?style=flat-square&logo=Microsoft&logoColor=white&link=mailto:[email protected])](mailto:[email protected])
    


    8 - Licença
    


    [![Licence](https://shields.io/github/license/Ileriayo/markdown-badges?style=for-the-badge)](./LICENSE)