My Expense Tracker

This project was bootstrapped with Create React App. It was created for submission in Pana Cloud Bootcamp 2020.

Link to WebApp

The web app has been deployed to Surge, and can be accessed here.

Original Features

The following are some of the features present in the original app created by the Bootcamp Faculty in a live session:

  • Adding new transaction
  • Deleting an existing transaction.
  • Dynamically calculating current balance, income and expense

Added Features

I created a simmilar app from scratch. The following are some additional features added by me:

  • A simple calculator
  • Calculator can be made visible or hidden
  • Made the transactions history component scrollable
  • Editing an existing transaction
  • Added the capability to handle empty transactions list
  • Added additional details in transactions
  • Made some input fields required

Learning Outcomes

The following are some of the learning outcomes of this project:

  • Building a web app with React.JS
  • Using React's useState, useReducer and useContext Hooks
  • Using React's Context API to transfer data to functional components without prop drilling
  • Familiarity with ES6 syntax of JavaScript
  • Styling webpages with CSS3
  • Using CSS to align react components
  • Using CSS to style borders, background, font, forms, images, buttons, etc.
  • Using CSS to make components scrollable and styling the scrolbar.