Skip to content

Latest commit

 

History

History
105 lines (77 loc) · 3.05 KB

README.md

File metadata and controls

105 lines (77 loc) · 3.05 KB
Raw

PennWise

A simple and intuitive expense tracker application built with ReactJS and TailwindCSS. This application allows users to add, delete, and edit transactions, categorize them as income or expenses, and visualize their financial data. It helps you manage your finances effectively by keeping track of all your transactions in one place.

Table of Contents

Demo

Check out the live demo: PennWise

Features

  • Add New Transactions: Record income and expenses by specifying the amount, category, date, and description.
  • Edit Transactions: Modify existing transactions directly from the transaction list.
  • Delete Transactions: Remove transactions that are no longer needed.
  • View Summary: See a summary of total income, total expenses, and the balance (Income - Expenses).
  • Visualize Data: View a chart that visually represents income and expenses over time.
  • Responsive Design: Seamlessly use the application on any device, thanks to TailwindCSS.

Installation

To get a local copy up and running, follow these simple steps:

Prerequisites

  • Node.js (version 12 or higher)
  • npm (version 6 or higher) or yarn

Installation Steps

  1. Clone the repository:

    git clone https://github.com/your-username/expense-tracker.git
cd expense-tracker

  2. Install dependencies:

    npm install
# or if you prefer yarn
yarn install

Usage

  1. Start the development server:

    npm start
# or if you prefer yarn
yarn start

  2. Open your browser and navigate to http://localhost:5173

  3. Use the application to manage your transactions.

Technologies Used

  • ReactJS: A JavaScript library for building user interfaces, especially single-page applications, using a component-based architecture.
  • Tailwind CSS: A utility-first CSS framework for rapid UI development.
  • Chart.js: A popular JavaScript library for creating charts to visualize your data.
  • React Icons: A library of popular icons for React applications.

Project Structure

├── src
│   ├── components
│   │   ├── Footer.jsx
│   │   ├── Navbar.jsx
│   │   ├── Summary.jsx
│   │   ├── TransactionForm.jsx
│   │   ├── TransactionList.jsx
│   │   ├── Summary.jsx
│   │   └── ...
│   ├── App.jsx
│   ├── index.css
│   ├── main.jsx
│   └── ...
├── tailwind.config.js
├── package.json
└── ...

Contributing

Contributions are welcome! Please follow these steps:

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature-branch).
  3. Make your changes.
  4. Commit your changes (git commit -m 'Add some feature').
  5. Push to the branch (git push origin feature-branch).
  6. Open a pull request.