Upgraded Finance
Like CS50 Finance, with a more user friendly design.
Rationale for project
From a users standpoint the original app was frustrating to use, especially if the user made an error.
I started with implementing typeahead and later added more UI/UX improvements.
Index Page & Typeahead
Index page evolution
Comparison of the old index page vs the new index page
Typeahead and Input Event Handling
Searching for stocks is easier thanks to typeahead.
Buying shares or cancelling transactions is now possible.
In the previous app, the user would have had to type the correct symbol and the right
number of shares.
Register & Login Logic
Validation Logic Flowchart
Comparison of login/register logic
Old Register Example
Old version of finance: errors redirect to an error page which the user must navigate away from
New Register Example
New version: users are given real-time feedback, there is no need to navigate back
Buying & Selling Improvements
Old Buying Example
Old Selling Example
Old method of buying and selling shares - calculations and checks all done on server side
New Buying and Selling Calculation Functionality
Calculations done client-side with the user receiving immediate feedback - value of shares are updated and cash balance is changed.
When there isn't enough cash available, the maximum amount of shares are calculated and
shown.
In addition, the buy button is disabled if there is not enough cash available.
Confirming Transactions with AJAX
Transactions are not confirmed until the user decides to confirm them with the button.
This required an overhaul of the calculation logic and was a challenging task.
Confirming the transaction data doesn't require a page
reload as it did before.
Using Event Handlers to Guide User Experience
Using event handlers to constrain what the user could do was another UI change.
If the user decides to buy, the sell input is disabled and vice versa.
Backend & Other Improvements
Handling Errors with Typeahead Requests
Other changes included avoiding duplicate entries, managing AJAX responses where an API call failed.
Other improvements include:
Modularising server functions
Separating API, database and server logic
SQLAlchemy ORM
More readability than raw SQL strings
Stock Data Updating
Separate module that updates a list of all purchasable stocks
Client-side data store
Enabling real-time updates and calculations
The app may take some time to load as the server initializes
Create your own account or use:
Username: testuser
Password: testuser