Summary

PennyRoyal is a web application inspired by Mint.
The app was built using Ruby on Rails on the back end supported by postgreSQL and Javascript on the front end, making heavy use of the React.js library. PennyRoyal allows users to:

• Create and edit a user account
• Log in / Log out
• Add, edit and delete financial accounts
• Create transactions, or receive them from financial institutions
• Edit transaction details
  • Change the date
  • Change the description
  • Change the category
  • Not change the amount
  • Add a note
• View transactions filtered by account or account type
• Search for transactions using keywords in the description, account type, or selected tags (New!)
• Tag transactions with multiple tags

Overall structure

Back end

Rails is used for the back end. The structure is RESTful and all data requests use AJAX and are fulfilled with a JSON API. Several associations are used to prefetch data, minimize SQL queries to the database and minimize server queries.

Front end

React.js is used for the front end with a Flux architecture. This allows for rapid rendering and removal of components without requiring new pages/partials to be sent from the server. In addition, I made use of React router components to further reduce data requests. The whole site, basically uses React to render things on the fly, including form modals, which are rendered as separate components/pages rather than using CSS 'display:none'.

Libraries

PennyRoyal uses:

• React.js
• Flux
• Bcrypt for authorization
• Paperclip to store user profile images using Amazon Web Services
• figaro to securely store keys and other important data.

Primary components

User authorization

User accounts are fully handled in Rails. Authorization uses BCrypt for password hashing, passwords are only stored in encrypted form.

Financial Accounts

Accounts are created by the user by choosing from a financial Institution (see schema) and choosing an account type. Institutions each have their own list of account templates (bases) to choose from, as a separate table in the database. Institutions can be added on the server side, but not by the user.

Accounts have a balance which can be refreshed and updates in real-time. Each has a number of transactions.

Transactions

Transactions are the primary component of the app. In this iteration, the data is generated by the app on the back end (sample data) but future goals are to import data from Yodlee, which powers data transfer between financial institutions. All transactions are listed in a clear, straightforward table that shows only date, description, category, and amount.

Transactions have a number of attributes that can be modified. Description, date, category, along with notes and tags. To avoid visual overcomplexity, the form for changing the data was designed to match the appearance of the table, inline. Date and category have clear dropdowns generated as separate components on demand using React. To edit notes and tags, a separate detail view can be displayed and hidden by the user.

The Future!

These are the features that I want to add to the app:

• Filter transactions by tag
• Search for transactions by description, category, tag
• Interact with Yodlee for actual bank/institution data.
• Budgets for spending
• Graphs to show monthly spending, perhaps using D3.js
• Alerts for overspending, payments due, etc.