App Screen 3 (UI + Backend integration)

This blog is dedicated to explicate the working and UI of the third screen of the app named “Hisa-Kitab” which has been developed under the internship at

This screen comprises of vital informations that can be derived out of the nature and amount of the expenditures. This page gets opened when the user clicks on “Draw Insights” button that is present in the lower section of the Dashboard. This page comprises of the information such as what was the total sum of the expenditures, what was the maximun and minimum expense and lastly, what was the average expenditure. These informations enable the user make a better budget plan for the future and hence lets him/her save wisely. The state of this screen looks the following way:-

The information (given above) helps one draw an efficient pattern to make him spend wisely. Ultimately our goal the app has been achieved, “money saved is money earned”. Now you can expect to buy a few cups of coffee with the money you have earned by being a wiser man :)

Index of contents in this web-app development series
  1. Idea of the app — Hisab-Kitab: Save to Earn
  2. Prototype of the app
  3. Setting up the development environment
  4. Learning Git
  5. Setting up local development setup
  6. Data model of the app
  7. Hasura Data API + Postman collection
  8. Hasura Auth API + Postman collection
  9. App Screen 1 (UI + Backend integration)
  10. Updates
  11. App Screen 2 (UI + Backend integration)
  12. App Screen 3 (UI + Backend integration)
  13. User feedback and Testing
  14. Final app link
Like what you read? Give Souvik Haldar a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.