https://github.com/thomas465xd/personal_budget-contextapi-react

A simple personal budget and finance agenda made using React, TypeScript, reducer and contextAPI
https://github.com/thomas465xd/personal_budget-contextapi-react

context-api custom-hooks js jsx react reducer tailwind tailwindcss ts tsx typescript usereducer

Last synced: about 1 month ago
JSON representation

A simple personal budget and finance agenda made using React, TypeScript, reducer and contextAPI

• Host: GitHub
• URL: https://github.com/thomas465xd/personal_budget-contextapi-react
• Owner: Thomas465xd
• License: mit
• Created: 2024-09-15T15:19:14.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-10-22T01:08:29.000Z (3 months ago)
• Last Synced: 2024-11-10T03:35:46.632Z (2 months ago)
• Topics: context-api, custom-hooks, js, jsx, react, reducer, tailwind, tailwindcss, ts, tsx, typescript, usereducer
• Language: TypeScript
• Homepage: https://expenses-control-contextapi.vercel.app/
• Size: 141 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Personal Budget & Agenda using React, TypeScript and ContextAPI

This is a simple personal budget and finance management application built using **React**, **TypeScript**, **reducer**, and **Context API**. The app helps users track their expenses and remaining budget while providing an enhanced user experience through various UI elements and functionalities.

## Features

- **Expense Tracking**: Users can add, update, or delete their expenses with a swipe action, improving interactivity.

- **Budget Overview**: A circular progress graph shows how much of the overall budget has been spent.

- **Date Selection**: A calendar is used to select dates when adding or updating expenses.

- **User-Friendly Interface**: The app employs UI libraries like **react-swipeable-list** to allow swipe-based actions and a visually appealing interface.

  

## Technologies Used

- **React**: For building the UI components.

- **TypeScript**: For type safety and enhanced developer experience.

- **Reducer & Context API**: To manage the global state of the app efficiently.

- **UI Libraries**:

  - `react-swipeable-list`: For interactive expense management (swipe actions to update or delete expenses).

  - `react-circular-progressbar`: For displaying the budget usage in a circular graph.

  - **Other enhancements**: Calendar for date selection, modal dialogs, and animated transitions for smooth user interactions.

## How to Run the Project Locally

1. Clone the repository:

   ```bash

   git clone https://github.com/your-username/your-repo.git

   cd your-repo

2. Install Dependencies:

  ```bash

  npm install

  ```

3. Start the development server:

   ```bash

   npm run dev

   ```

4. Open your browser and go to http://localhost:5173

## License

This project is licensed under the MIT License. See the LICENSE file for details.

---

Made with ❤️ by Thomas Schrödinger