Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abdurraahimm/financial-tracker
A simple financial tracker app built with React, TypeScript, and Tailwind CSS.
https://github.com/abdurraahimm/financial-tracker
lucide-react pwa reactjs recharts shadcn-ui tailwindcss vite
Last synced: 17 days ago
JSON representation
A simple financial tracker app built with React, TypeScript, and Tailwind CSS.
- Host: GitHub
- URL: https://github.com/abdurraahimm/financial-tracker
- Owner: AbdurRaahimm
- Created: 2024-10-22T13:13:13.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-10-25T08:59:55.000Z (2 months ago)
- Last Synced: 2024-10-25T16:16:48.986Z (2 months ago)
- Topics: lucide-react, pwa, reactjs, recharts, shadcn-ui, tailwindcss, vite
- Language: TypeScript
- Homepage: https://financiaal-tracker.netlify.app/
- Size: 594 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Financial Tracker
A simple financial tracker app built with React, TypeScript, and Tailwind CSS.
### Prerequisites
- Node.js (v14 or later)
- npm or yarn
### Installation
1. Clone the repository:
```
git clone https://github.com/AbdurRaahimm/Financial-Tracker.git
```
2. Navigate to the project directory:
```
cd Financial-Tracker
```
3. Install dependencies:
```
npm install
```
or
```
yarn install
```
4. Start the development server:
```
npm run dev
```
or
```
yarn run dev
```
5. Open your browser and visit `http://localhost:5173` to view the app.
## Features
1. Add transactions using the form with description, amount, category, and date. and select currency from the dropdown.
2. View your balances for different categories.
3. Use the statistics with pie chart and filter by week, month, or year.
4. View trends using the bar chart, which can be filtered by week, month, or year.
5. Filter transactions in the history section by category.
6. Update and Delete transactions from the history section.
7. Responsive design for mobile and desktop devices.
8. Print the transactions.
9. PWA (Progressive Web App) support.
## Technologies Used
- Vite React
- TypeScript
- Tailwind CSS
- Recharts (for data visualization)
- Lucide React (for icons)
## Project Structure
- `src/components`: React components
- `src/types`: TypeScript type definitions
- `src/data`: Static data (e.g., currency list)
## Live Demo
[Live Demo](https://financiaal-tracker.netlify.app/)
## Screenshots
## PWA
## Connect on Social Media
- [Twitter](https://twitter.com/AbdurRahim4G)
- [Instagram](https://www.instagram.com/abdurrahim4g/)
- [Facebook](https://www.facebook.com/Rahim72446)
- [LinkedIn](https://www.linkedin.com/in/abdur-rahim4g/)
- [YouTube](https://youtube.com/@AbdurRahimm)