Background

This project is a side project derived from a gossip with friends about buying house and retirement. During the discussion, we gradually realized that a sense-making personal financial decision relied on multiple financial facts and estimation, which could not easily achieved by just thinking.

Goal

This project aims to provide an application for users to evaluate important financial decisions based on their own financial facts, such as salary, living cost, and housing.

Process

As a side project, Tangjuan is implemented through a bottom-up approach. Starting from a spreadsheet demo, essential data fields and formula get defined. Then a monolith web app get scaffolded, written in Python with Flask framework, to re-implement the spreadsheet demo to improve the usability.

To accomplish further requirement, a front-end / backend web app get adapted with the monolith revised as backend. The frontend is developed with vue.js framework, PrimeVue as UI library, and Tailwind for utility class. After the implementation of the basic features demo by the spreadsheet, the further design is on going with a more detailed consideration and diverse features.

1. Spreadsheet demo

In the spreadsheet demo, important financial facts are considered, such as salary, living cost, and increase range of salary by year. Essential financial decisions, such as when buying a house, when start raising a child, and when to retire, are also included. Figure 1 shows the asset accumulation, salary and living cost across ages estimated by the spreadsheet demo. (Click to check the spreadsheet demo)

2. Monolith implemented by Python/Flask

To provide a better user interface and encapsulated the formula, a monolith is implemented by Python with Flask framework. A javascript library Chart.js is used for plotting on browser side. The Figure 2 shows the landing page of the monolith. (Click to check the monolith web app demo)

The source code could be check in this Github repo.

3. Frontend by Vue.js

While monolith could serves the basic features, such as rendering data from database to webpages, or calculating results based on input, more complicated UI interaction would required complicated javascript. Thus, a vue.js based frontend is introduced to provide robust support for UI interaction. UI library PrimeVue and css framework tailwind is used for coherent design style. Figure 3 shows the landing page of the frontend app.

(Click to check the front-end web app demo)

The source code could be check in this Github repo.

4. Defining Schemas

By so far Tangjuan is served as a tool for estimating personal financial facts without signup. While it would be safe as no personal information left, and all the information would vanished once the page closed, the user scenario is limited to one-time estimation. Advanced needs, such as financial planning (save the result for checking in the future) or comparing (saving different plans for comparing) would not be possible without connecting with a database.

As an iterative and ongoing project, an Entity-Relationship Diagram (ER Diagram) is designed for supporting advanced features, shown in Figure 4. The deployment of the ER Diagram and advanced features is still in progressed.

5. API Design

To provide a flexible and scalable way to access the resources, the API design is essential. Based on the features drafted in the “1. Spreadsheet demo” section, the Tang Juan API supported a scenario-based finance planner and simulator. The Figure 5 shows part of the Tang Juan API Doc, while the documentation could be accessed at here.

Sidenote

The project name “Tang Juan” is derived from two slangs in Mandarin, “Tang ping” (躺平) and “Neijuan.” (内卷) “Tang ping” literally means “lie down flat”, which is considered as a rejection to the over-competitive work environment in China after 2020s. And “Neijuan”, emerged at similar time, literally means “inside roll”, meaning an overworked life under extreme competition.

Thus, “Tang Juan”, as a financial facts estimation tools, aims to empower users balancing work and life. With “Tang Juan”, a clear personal finance landscape would be shown, suggesting how much salary and assets would be needed to accomplish personal financial goals.