MoneyThings is a desktop Single Page Application for personal finance management.

Qiqi Chen: chen.qiq(at)northeastern.edu

Ziqing Mao: mao.zi(at)northeastern.edu

Class link: CS5610 Web Development

Demo Link: https://moneythings.herokuapp.com/

Video Demo: https://www.youtube.com/watch?v=

Slides: Google Slides

username: Ziqing
password:　111

MoneyThings
├─bin                             // express entry
├─frontend                        // react project root
│  ├─build                        // react app bundle
│  ├─public                       // static files
│  │  ├─favicon
│  │  └─images
│  │      ├─avatar
│  │      └─avatar_thumbnail
│  └─src                          // react src
│      ├─auth                     // auth related components
│      ├─images
│      ├─shared
│      ├─stylesheets
│      └─tabs                     // different functional tabs
│          ├─account
│          ├─alltime
│          ├─budget
│          ├─dateRangeSelection
│          ├─overview
│          └─trends
├─routes                          // express routers
└─src                             // backend src

• Authentication system stores bcrypt + salted hashcode for sensitive data security

• Transaction data displayed in groups by either date or category

  Add Transaction

  

  Delete Transaction

  

• Data visualization by pie chart and line chart

  

• Monthly Budget can be set and view by categories

  

• Update account information including the password, the avatar, and the username

https://moneythings.herokuapp.com/

For development, you need to start two servers

yarn install
cd frontend
yarn install
cd ..
yarn frontend

The frontend will run on http://localhost:3000

yarn backend

The backend will run on http://localhost:3001

Note: do not work on port 3001 as the express only provide api during development.

cd frontend
yarn build (generate build folder)
cd ..
yarn backend

Check the webpage on http://localhost:3001

Don't push the build/ folder to your deployment server.

• This project is under MIT license.
• Sample avatars of the demo are provided by Iconfinder and they are under a free license.