https://github.com/harikrishna-9885699666/expense-tracker-vite-react-typescript-redux-bootstrap

Expense Tracker - Vite + React + TS + Redux + Boostrap CSS
https://github.com/harikrishna-9885699666/expense-tracker-vite-react-typescript-redux-bootstrap

react reacthookform redux typescript vite

Last synced: 2 days ago
JSON representation

Expense Tracker - Vite + React + TS + Redux + Boostrap CSS

• Host: GitHub
• URL: https://github.com/harikrishna-9885699666/expense-tracker-vite-react-typescript-redux-bootstrap
• Owner: HariKrishna-9885699666
• Created: 2024-05-28T06:48:57.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-05-28T13:04:08.000Z (8 months ago)
• Last Synced: 2024-05-29T02:52:41.297Z (8 months ago)
• Topics: react, reacthookform, redux, typescript, vite
• Language: TypeScript
• Homepage: https://expense-tracker-vite-react-ts-redux.netlify.app/
• Size: 55.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Expense Tracker - Vite + React + TS + Redux + Boostrap CSS

Expense Tracker - Vite + React + TS + Redux + Boostrap CSS

A simple yet powerful expense tracking application built with React, TypeScript, Redux Toolkit, and Bootstrap CSS.  This project allows you to:

## Live Demo

You can check out the live demo of the application here: [Expense Tracker Demo](https://expense-tracker-vite-react-ts-redux.netlify.app/)

##

- **Add expenses:**  Record your daily expenses with descriptions, amounts, categories, and dates.

- **Edit expenses:** Easily modify existing expense details.

- **Delete expenses:** Remove unwanted expenses from your records.

- **View expenses:**

  - **List view:** See a sortable, filterable, and paginated list of your expenses.

  - **Daily summary:** Get a clear overview of your daily spending with collapsible sections for each day.

- **Download data:** Export your expense data in a CSV format.

- **Local Storage Persistence:** All your expense data is automatically saved to your browser's local storage so it's not lost on page refresh.

## Features

- **Intuitive Interface:**  User-friendly form for adding and editing expenses.

- **Clear Organization:**  Expenses are organized by date in both list and daily summary views.

- **Sorting and Filtering:** Easily sort and filter expenses by various criteria.

- **Pagination:**  Navigate through pages of expenses when the list gets long.

- **CSV Export:** Download your expense data for further analysis.

- **Offline Support:** Data is stored locally, allowing you to use the app even without an internet connection.

## Technologies Used

- **React:** Frontend library for building the user interface.

- **TypeScript:**  Superset of JavaScript that adds static types for improved code quality and maintainability.

- **Redux Toolkit:** A streamlined way to manage application state with less boilerplate.

- **Bootstrap CSS:** A popular CSS framework for responsive and visually appealing design.

- **React Hook Form:** A library for form handling and validation.

- **Date-fns:** A library for manipulating and formatting dates.

- **react-csv:** A library to help you build CSV download functionality in React.

- **uuid:** Library for generating unique IDs for expenses. 

## Installation

1. **Prerequisites:**

   - Node.js (version 14 or higher)

   - npm (or yarn): Usually comes bundled with Node.js.

2. **Clone the repository:**

   ```bash

   git clone https://github.com/HariKrishna-9885699666/expense-tracker-vite-react-typescript-redux-bootstrap.git

   cd expense-tracker-vite-react-typescript-redux-bootstrap

   npm install

   npm run dev