• Keep Record of How Much you spend.
• Add Your Expenses According to Category.
• You Can See All of Your Expenses At One Place.
• You Can Filter Your Expenses According to Category.
• You Can Update or Delete Your Previous Added Expenses.
• You Can See Your Weekly Expense Report of Current Month.
• You Can See Your Category Wise Expense Report of Current Month.

The task must satisfy the following requirements:

• 1. User authentication: SignIn and Signup
• 2. Provide three tabs - Dashboard, Expenses, and reports accessible through a navbar.
• 3. Dashboard:
  1. Show total spent amount
  2. List last 5 transactions
• 4. Expenses:
  1. List of expenses for the current user.
  2. Button to create a new expense.
  3. Must contain the following fields: DateTime, Amount, Currency, Description (optional), and a Category.
  4. The categories are -- Home, Food, Fuel, Shopping and Other.
  5. Can be created only after logging in
  6. Can be read only by the user who owns it.
  7. Can be updated or deleted by the user who owns it.
  8. Ability to filter the expenses by category.
• 5. Report:
  1. Show total amount spent per week of the current month.
  2. Show total amount spent per category basis on the current month.
• 6. The front-end must be a Single-Page-Application.
• 7. Follow proper design guidelines and coding standards.

These are optional improvements that’ll help in boosting your submission score.

• 1. No business logic code in client app. (It must be only on the backend-server)
• 2. The front-end web client is a PWA (Progressive Web App).
• 3. Hosting the front-end and back-end to a cloud or hosting provider.
  1. Better if the cloud provider is Google Cloud Platform.
• 4. Using GraphQL instead of traditional REST API.
• 5. Pagination on the list of expenses.
• 6. Use ReactiveExtensions in client web app: (RxJs for Javascript)
• 7. User roles -- Admin and normal users.
  1. A separate page for Admin listing all users (only accessible by admin users)
  2. Admin users can view the expenses of all the users.
  3. Admin users can edit or delete the expense of all users.

Landing Page Of Web Application

Normal User Login Page

User Register Page

Admin Login Page

Normal User Dashboard

where person can see his total expense(in INR) and five latest expenses made by him.

Expense Page

where person can see all of the expense added by him(sorted in descending order of date and time), a button to add new expenses, filter expenses category wise and button to delete or edit particular expense.

Add Expense Page

here user can add new expenses and choose any currency(used an api to get all currency name) while adding an expense.

Delete Particular Expense

Edit Particular Expense

Report Page

weekly report of expense of current month added by user(in INR)(used an api to change any currency to Indian currency)

category wise report of expense of current month added by user(in INR)(used an api to change any currency to Indian currency)

Admin Page

list of all user (only visible to admin)

expense added by particular user(admin can edit or delete expense)

Email : [email protected]

Password : 654321

In this website I used two external api. one to access all available currency name(to show on add and edit expense page) and another to convert any currency into Indian currency(while showing total expense on dashboard or on report page.)