Money.io

This project is live here https://money-io.vercel.app

Money.io is a financing app that allows users to keep track of their spendings as well as debts and loans.

Table of Contents

1. Usage
2. Development
   1. Overview
   2. Authentication
   3. Libraries
3. Team

Usage

Users can signup using money.io or login with their google accounts for faster access

Once logged in, users can keep track of their spendings from the transactions page

Once logged in, users can keep track of debts due and lowned by adding them from the debts page

Development

Overview

Money.io uses a react frontend to build an application that is componentalized. The application was converted to the new hooks api to reduce codebase by more than 50% The application was converted to a next js application for faster and free hosting on vercel Redux was used to manage state, allowing stateful and stateless components to only focus on connected state Authentication was provided with react-google-login to get the user's access token An avataar is randomly generated using the username as seed

Authentication

Authentication is provided using 2 patterns:

1. Using local signup/signin
2. User signs up by providing their details on the signup page
3. An email is sent to the user with a token to verify the user
4. Once the user verifies by clicking the email link, they can login
5. Upon signin, a redis session is started using passport.js and the user is redirected to transaction
6. Using google's signin flow Google signin
7. User logsin with their google details and provides consent
8. Google returns a token for the user
9. The token is sent to the backend using the authorization header
10. Upon token verificationA redis session is started using passport.js and the user is redirected to transaction

Libraries

Libraries

Money.IO is built using the following libraries to provide a safe, easy to use and easy to maintain user and development experience.

Frontend:

1. Next.js which provides faster loads time using server side rendering
2. React.js which provides a safer, scalable viewing experience , as well as much shorter code using the new React hooks api
3. Redux.js which stores state in a much more manageable layout
4. react-google-login which provides an easy to use login button based on google's signin recommended practice
5. Vercel which provides a free and easy way to host nextjs apps
6. avataaars which allows for an easy way to generate avataaars

Backend:

1. Node.js which provides javascript runtime bult using V8 to run javascript
2. Express.js which provides a web application framework to help build a server
3. MYSQL which provides a database to store user's information, transactions, and debts
4. Passport.js which provides an authentication framework
5. Redis.io which provides a datastore to hold user session data
6. passport-local which provides a local passport strategy to start a server-side session on successful authentication
7. passport-google-strategy which provides a google strategy to start a server-side session on successful token verification
8. Heroku which allows easy deployment through git

Team

Project was rewritten by Humaid Khan

Original Project

original Team:

• Product Owner: Jonathan Wu
• Scrum Master: Humaid Khan
• Development Team Members: Dunstan Zheng, Chris Lu