/expense-tracker-react

A simple React app to track your expenses. With this app, you can add your expenses and filter them by year.

Primary LanguageJavaScript

Expense Tracker

A simple React app to track your expenses. With this app, you can add your expenses and filter them by year.

About Me ๐Ÿ’™ยป

๐Ÿ“ซ How to reach me _yamisagi yamisagi


How To Run This Project ๐Ÿš€


  • Clone the repo

    git clone
  • Install NPM packages

    npm install
  • Run the project

    npm start
  • Open the project on your browser

    http://localhost:3000/
  • Enjoy! ๐ŸŽ‰


(back to top)

About The Project

In this repository, I will build a simple React app to track your expenses. With this app, you can add your expenses and filter them by year.

Roadmap

  • Project Setup
  • Adding a New Expense Component
  • Add SCSS to the project
  • Create Expense Item Component & ExpenseCalendar Component
  • Create ExpenseForm Component & NewExpense Component
  • Add useState to the project & Add Expense Data
  • Add useRef to the project & Use it for Form
  • Use Previous State & Add Expense Data
  • Add UUID to the project & Add ID to the Expense Data
  • Add Two-Way Binding & Clear Form
  • Create Home Page
  • Add Filter Component & Filter by Year
  • Implement Filter Logic
  • Add Conditional Return Statements
  • Add Expenses Chart Component
  • Add Chart Component
  • Add Chart to the Home Page
  • Project Done ๐ŸŽ‰
  • Deploy the project to Netlify ๐Ÿš€

(Still working on it...)

(back to top)