vanisingh-24 / Expense-Tracker

Complex Expense Budget Tracker. State Management in React, Context API, Local Storage, Material UI. Voice capabilities using Speechly

Expense-Tracker-React

An elegant, voice-controlled expense tracker powered by React, Material UI and Speechly

Introduction

This complex Expense Budget Tracker is built using reactJS with concepts like

1. State Management using ReactHooks like useReducer, useState
2. Context API for global State management
3. Custom hooks

It uses Material UI Framework for styling and Local Storage. Most importantly, I've added voice capabilities to this application using Speechly.

Technologies

• React.js
• ContextAPI
• MaterialUI
• Chart.js
• Speechly API

Setup

In the project directory, you can run:

npm install

Install depedencies

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

Commands you can try out with Speechly:

• Add $100 Income in category salary for next Monday
• Add $50 Expense or (Expense of $50) in category Travel for yesterday
• Set amount to $10
• Set category to Travel
• Set Date to (particular date or yesterday/today/tomorrow/etc.)
• You can speak the command in any way you like, Speechly will simply grab the keywords such as amount, date, category,type from your sentence