https://github.com/korngsamnang/react-budget-tracker
A budget tracker app.
https://github.com/korngsamnang/react-budget-tracker
context-api reactjs tailwindcss usereducer-hook
Last synced: 3 months ago
JSON representation
A budget tracker app.
- Host: GitHub
- URL: https://github.com/korngsamnang/react-budget-tracker
- Owner: korngsamnang
- Created: 2023-06-22T17:19:53.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-11-18T15:56:17.000Z (over 1 year ago)
- Last Synced: 2025-01-23T02:17:32.044Z (5 months ago)
- Topics: context-api, reactjs, tailwindcss, usereducer-hook
- Language: JavaScript
- Homepage: https://v1-budget-tracker.netlify.app/
- Size: 49.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Budget Tracker App
## Overview
The Budget Tracker App built using React, leveraging the Context API and the
useReducer hook to manage state.
> Budget tracker app built using React (Context API+useRudcer)
> 
## Features
- **Add Expenses:** Users can easily add new expenses.
- **Delete Expenses:** The app allows users to remove unwanted expenses.
- **Search Expenses:** Users can search for specific expenses.
- **Sort Expenses:** The app provides sorting options, allowing users to
organize their expenses.
- **Edit Budget:** Users have the flexibility to edit their budget details.
## Styling
The app's UI is styled using [Tailwind CSS](https://tailwindcss.com/), a highly
customizable utility-first CSS framework. Tailwind CSS streamlines the styling
process with a vast set of pre-built classes that you can easily apply to your
components.
## Libraries Used
- **React Icons:** The app uses the React Icons library to enhance the visual
appeal of the user interface with a variety of stylish icons.
- **uuid:** The uuid library is used to generate unique identifiers for each
expense, ensuring data integrity and avoiding conflicts.
## Getting Started
1. Clone the repository to your local machine.
```bash
git clone https://github.com/korngsamnang/react-budget-tracker
```
2. Install dependencies using npm or yarn.
```bash
npm install
```
3. Start the development server.
```bash
npm run dev
```
4. Open your browser and navigate to `http://localhost:5173` to access the
Budget Tracker App.
Feel free to explore the app, manage your budget, and take advantage of the
various features it offers!