Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/khushijtrivedi/budget-tracker

A comprehensive budget tracker application where users can manage their expenses either through keyboard input or live voice commands. This app leverages advanced React and JavaScript concepts and provides a user-friendly interface for tracking your monthly or daily expenses.
https://github.com/khushijtrivedi/budget-tracker

git html-css-javascript localstorage material-ui reacthooks reactjs speechly speechly-voice state-management

Last synced: about 2 months ago
JSON representation

A comprehensive budget tracker application where users can manage their expenses either through keyboard input or live voice commands. This app leverages advanced React and JavaScript concepts and provides a user-friendly interface for tracking your monthly or daily expenses.

Awesome Lists containing this project

README

        

# Budget Tracker App

A comprehensive budget tracker application where users can manage their expenses either through keyboard input or live voice commands. This app leverages advanced React and JavaScript concepts and provides a user-friendly interface for tracking your monthly or daily expenses.

## Features

- **Expense Management**: Add, view, and manage your expenses on a daily or monthly basis.
- **Voice Input**: Utilize voice commands to add expenses using Speechly integration.
- **State Management**: Efficient state management using React's Context API.
- **Local Storage**: Persistence of data using browser local storage.
- **Material UI**: A modern, responsive design with Material UI components.
- **Scalable Structure**: A scalable and maintainable folder structure in React.

## Technologies Used

- **React**: For building the user interface.
- **JavaScript (ES6+)**: Core programming language used.
- **Context API**: For state management.
- **Local Storage**: To save and persist data.
- **Material UI**: For styling and responsive design.
- **Speechly**: For integrating voice commands.
- **HTML5/CSS3**: For markup and styling.

## Getting Started

Follow these steps to get the project running on your local machine:

### Prerequisites

- Node.js and npm installed on your local machine.

### Installation

1. Clone the repository:
```bash
git clone https://github.com/your-username/budget-tracker-app.git
## Voice Integration with Speechly

This project includes voice integration powered by [Speechly](https://www.speechly.com/). To use the voice capabilities:

1. **Sign up** for a free Speechly account.
2. **Create a new app** on the Speechly dashboard.
3. **Obtain your Speechly app ID**.
4. **Update the `useSpeechly.js` file** with your Speechly app ID.