/moneybags

UTHOU2018 Class Project 3

Primary LanguageJavaScriptMIT LicenseMIT

MoneyTree

Money Tree is afinancial forecasting application that depends on a third-party API called Plaid to supply banking data. The sandbox model provides sample data from sample institutions to emulate transactions coming from a real user and bank. In other words, MoneyTree is a budget application that targets young adults or teenagers who want to learn more about their spending habbits and gain the ability to become financially responsible. To accomplish this, we have included a few elements that will help our user remain engaged with our app and incentivized to utilize MoneyTree. These elements include: gamification, color theory, and visual representations.

Gamification:

  • AVATAR that changes according to the users' spending habbits. The avatar will have an angry face when the users' cash flow is negative and a happy face when the users' cash flow is positive.
  • ACHIEVEMENTS are trophies gained by the user when certain goals or objectives are met. For instance, when you log in twice you will receive a notification that you just earned an achievement and the corresponding trophy will be gained.

Color Theory:

  • ORANGE is a mood-lifting and welcoming color that promotes comfort and improve neural functioning. It is also an attention seeking color that can highlight important elements. For this reason, the button elements are orange within our app.
  • BLUE is a great color for learning situations. For example, blue ink, blue lines on paper, and more items utilize blue to improve a learning environment. However, blue is also a relaxing/calming color that promotes a friendly environment.
  • GREEN promotes restfulness and calm which can improve efficiency and focus. It can also be linked to nature and money which is the intersection of MoneyTree's brand. This color is great for long-term concentration!

Visual Representations:

  • Pie Chart
  • Graph Chart
  • Transactional Data

Technology:

  • React
  • XHTML
  • JSX
  • CSS
  • ReactStrap
  • Plaid
  • Sandbox

Authors:

  • Addis Casco and others can be found on the team page

Try it yourself!

You can watch the video demo below that can demo the process for you.

Video Demo: https://drive.google.com/file/d/1AjWtzn56s4NBhuWRXqZ1ManLrwxaI6Ka/view

Simulated experience

If you'd like to browse the project as an end-user, you have two options:

  1. A development server has been setup with sample bank data available through the following URL: http://demo.money-tree.io. After you've registered and logged in, please connect bank by using username: user_good and password: pass_good
  2. If you would like to see how the project operates with real bank data, you can visit the following secure site, with your preferred banking account username and password: https://money-tree.io

Please note, our project does not store your banking information at any point, and all identifyable data is encrypted through Plaid.

TEST STATUS: CircleCI

plutus_sandbox

This is a just a basic file structure for development purposes. The self-signed certificate will cause a warning in your Chrome browser, unless you follow some steps to trust the certificate. The deployed version will use a certificate from a CA. You will need to make your own .env file to get the app into a testable condition. The keys and instructions will be posted on the Slack channel for the unshared files that will be needed. I haven't yet created the routes in React, but the sandbox is fully functional inside React for testing/development.

About Merges

This project is currently under development and the structure may change. If you are a contributor or looking to be one, please refer to the documentation found at CONTRIBUTING.md.