Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/khushijtrivedi/budget-tracker
- Owner: khushijtrivedi
- Created: 2024-08-10T14:43:02.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-10T14:47:35.000Z (5 months ago)
- Last Synced: 2024-08-10T15:58:44.451Z (5 months ago)
- Topics: git, html-css-javascript, localstorage, material-ui, reacthooks, reactjs, speechly, speechly-voice, state-management
- Language: JavaScript
- Homepage:
- Size: 120 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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 SpeechlyThis 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.