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, 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.

   git clone https://github.com/korngsamnang/react-budget-tracker

2. Install dependencies using npm or yarn.

   npm install

3. Start the development server.

   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!