1. Introduction

This repository is meant for a Frontend web application for an expense tracker application.

Link for backend application: https://github.com/nahwu/expense-app-backend

App Demo v0.0.1

2. Purpose

While there are many expense trackers out there. The good ones are mostly behind a paywall.

Knowledge or awareness of your own expenses is very crucial to our personal financial health for both the present and the future.

For example, it only takes 20 average medium-sized spending (e.g. $50) within a month to reach 4 figure expense (>= $1000) for the month. It's not uncommon to know someone who spends beyond their means, especially when one suddenly have more income than before.

The goal of this project is to begin with expense awareness and then expand onwards to expense budgeting >> saving & networth projection >> retirement planning

3. Supported features

1. Transactions data
   1. Date, item description, expense category, payer, receiver, expense/income, amount
2. Feature: View existing transactions
   1. View most recent transactions
   2. Search based on item description
3. Feature: Create transactions
4. Feature: Delete transactions
5. Demo functionality for
   1. Adding expense
   2. Viewing expense
      1. Sorting expenses
6. Added in Dockerfile for this application
7. Added TLS support

4. Development Roadmap

1. Feature: Mobile friendly view for existing expenses (ready-made table is not suitable for mobile)
2. Feature: Add support for view Transaction API
   1. Search based on time period as well
   2. Add in pagination (page + page size) for results
3. Feature: Add support for edit Transaction API
4. Feature: Add support for aggregation Transaction API (for descriptive analytics e.g. charts)
   1. View current month expenses (by category)
   2. View current month expenses VS budgeted
   3. View current month savings
5. Feature: Add support for monthly recurring expense
6. Feature: Add support for list, create, edit, delete Expense Category API
7. Feature: Add support for income
8. Feature: Add support for list, create, edit, delete Expense Payer API
9. Feature: Add support for list, create, edit, delete Expense Receiver API
10. Feature: Allow data import from CSV file
    1. Flexible field-name remapping for data import/export
11. Feature: Allow data export to CSV fil
12. Feature: Investment tracking
13. Feature: Account login
14. Feature: Account creation
15. Feature: Multi accounts visibility for family sharing
16. Feature: Upload and attach image to expense

X. OPTIONAL - Developers only

X1. To run React application for development

npm start

X2. Build, push, export Docker image

• Build Docker image

    docker build -t nahwu2/react-expense-app:0.1 .
  

• Upload Docker image to Docker Registry

    docker push nahwu2/react-expense-app:0.1
  

• Export Docker image as a file. Normally used when there is no Internet at the deployment location. If on Windows, use this command with Git Bash.

    docker save nahwu2/react-expense-app:0.1 | gzip > exported_react_expense_app_0_1.tar.gz
  

X3. Convert React class components to functional components

https://www.digitalocean.com/community/tutorials/five-ways-to-convert-react-class-components-to-functional-components-with-react-hooks

X4. To remove TLS support from React Web Server

Open nginx.conf and change from

listen 8081 ssl;
server_name  nahwu.synology.me;
ssl_certificate /mycert/bundle.pem;
ssl_certificate_key /mycert/privkey.pem;

to

listen 8081 ssl;
server_name  nahwu.synology.me;

X5. To remove TLS support from calling backend server

Open src/App.js and change from

const backendServerPath = "https://nahwu.synology.me:8080";

to

const backendServerPath = "http://nahwu.synology.me:8080";

X6. Login Module

npm install @react-oauth/google@latest
https://www.npmjs.com/package/@react-oauth/google
https://github.com/MomenSherif/react-oauth

Getting Started with Create React App

This project was bootstrapped with Create React App.

Dependencies

npm install jwt-decode --save

npm install js-cookie --save