Expense Tracker

The project is an expense tracker application built with React. It allows users to keep track of their expenses by adding details such as the expense title, amount, and date. Users can add new expenses, view a list of their expenses, filter expenses by year, and see a visual representation of their expenses through charts. The application helps users monitor their spending and manage their financial records effectively.

🚀 Live Demo

Experience a live demo of the Expense Tracker application. Click on the provided link to access the live version of the project and interact with its functionality, user interface, and features in real-time.

Live Preview ➡️ Demo

🖼️ Project Screenshots

Take a look at these screenshots of the Expense Tracker project to get a visual preview of the application's user interface and key features.

💡 Key Features

Here're some of the project's best features:

• New Expense: Easily create new expense entries by providing the title, amount, and date.
• Year Filtering: Effortlessly view and filter expenses based on the desired year using the built-in filtering capability.
• Interactive Charts: Gain valuable insights into your expenses through interactive charts that provide a visual representation of your financial data.
• Data Integrity: Ensure the accuracy and reliability of your expense data with input validation, guaranteeing that only valid information is entered.

🛠️ Installation Steps

Follow the steps below to set up the project:

1. Clone the repository:

To clone the expense-tracker repository, run the following command in your terminal:

git clone https://github.com/kranthikumarkaranam/expense-tracker.git

2. Install the dependencies:

After cloning the repository, navigate to the project directory in your terminal and run the following command to install the required dependencies:

npm install

3. Start the server:

To start the server and run the Expense Tracker application, use the following command:

npm start

4. Access Expense Tracker:

Once the server is up and running, you can access the Expense Tracker application in your web browser by following these steps:

• Open your web browser.
• Type http://localhost:3000 in the address bar.
• Press Enter to access the Expense Tracker application.

📌 Quick Start Guide

Here are the necessary steps to effectively utilize the Expense Tracker application.

• Dashboard Overview: Upon accessing the Expense Tracker application, you will be presented with the main dashboard.
• Adding a New Expense: To add a new expense, click on the "Add New Expense" button. Fill in the required fields such as the expense title, amount, and date. Click "Add Expense" to add the expense entry.
• Expense List: The newly added expense will appear in the expense list on the dashboard. You can view the title, amount, and date of each expense.
• Expense Filtering: To filter expenses by year, use the filtering capability provided. Select the desired year from the dropdown menu, and the expense list will update accordingly.
• Insights with Interactive Charts: Gain insights into your expenses through interactive charts. These charts provide a visual representation of your financial data and help you analyze your spending patterns.
• Data Validation: The Expense Tracker application ensures data integrity with input validation. It validates the information entered, ensuring that only valid data is accepted for the expense title, amount, and date fields.
• Exploring Additional Features: For additional functionalities or features, explore the application and interact with its various components.

By following these usage instructions, you can effectively utilize the Expense Tracker application to track and manage your expenses, gain insights into your financial records, and maintain control over your personal finances.

💻 Tech Stack

Technologies used in the project:

• HTML5
• CSS3
• ES6+ JavaScript
• ReactJS

🍰 Contribution Guidelines

Contributions are highly appreciated! If you come across any issues or have suggestions for improvements, please feel free to submit a pull request. To ensure smooth collaboration, please follow the guidelines below:

• Fork the repository and create a new branch from the `main` branch.
• Ensure that your code adheres to the project's coding style and conventions.
• Provide clear and concise descriptions of your changes in the pull request.

By following these guidelines, you can contribute to the project effectively and help enhance its quality. Thank you for your valuable contributions!

💖 Like my work?

Thank you for taking the time to explore the project. I hope it brings value and joy to those who use it.

If you need any assistance or have any inquiries, please feel free to contact me here.

Made with ❤️ by KRANTHI.