4.1) App Screen 1 “AddExpense” for Expense Tracker
Welcome back readers, we are starting the actual development of our Expense Tracker application. We are going to develop the easiest screen first, which is the “AddExpense” screen.
At this screen, the user has to fill a form that consists of various fields. These fields are:
- Expense Name
- Expense Amount
- Date and Time of Expense
- Expense Category
- Expense Note
- Expense Tags
Let us look at how the screen looks during various scenarios:
- Blank Form:
2. Entering values into the form:
In the AddExpense form, we have filled the values for purchase of Skullcandy earphones.
3. Successful form submission:
On pressing the save button, the Data APIs of Hasura are called and the insert query is made to the PostgreSQL database. After successful execution of the insert query, a toast message is displayed indicating that the expense is successfully stored in the database.
4. Inserted record in database:
The data received from the AddExpense form is inserted into the database as shown.
Link to app after screen 1: https://goo.gl/3MvQYZ
In the next blogpost, we will learn how to retrieve this data and display it in a list format.
-Vinit Neogi and Akash Dabhi
