Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/soumya6tiwari/kharchaguru
KharchaGuru is a MERN stack-based expense tracker designed to help users efficiently manage and monitor their finances. It features user authentication, real-time tracking, and a user-friendly interface for categorizing and analyzing expenses.
https://github.com/soumya6tiwari/kharchaguru
axios chartjs expressjs html-css-javascript jwt-token mongodb nodejs reactjs styled-components
Last synced: 1 day ago
JSON representation
KharchaGuru is a MERN stack-based expense tracker designed to help users efficiently manage and monitor their finances. It features user authentication, real-time tracking, and a user-friendly interface for categorizing and analyzing expenses.
- Host: GitHub
- URL: https://github.com/soumya6tiwari/kharchaguru
- Owner: Soumya6Tiwari
- Created: 2024-07-25T08:03:49.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-08-11T22:20:49.000Z (3 months ago)
- Last Synced: 2024-08-12T19:51:01.779Z (3 months ago)
- Topics: axios, chartjs, expressjs, html-css-javascript, jwt-token, mongodb, nodejs, reactjs, styled-components
- Language: JavaScript
- Homepage:
- Size: 15.7 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# KharchaGuru
KharchaGuru is a cutting-edge MERN stack-powered expense tracker crafted to elevate personal finance management to a new level of efficiency. This elegant platform seamlessly integrates secure user authentication, real-time expense monitoring, and a sleek, intuitive interface designed for effortless categorization and insightful financial analysis. KharchaGuru simplifies financial data, providing clear insights that help users make informed decisions and take control of their financial future.
# Screenshots
*Login page of KharchaGuru*
.png)
*SignUp page of KharchaGuru*
.png)
*SignUp Validations*
.png)
*Register New user*
.png)
*Logging in User*
.png)
*FrontLook of the DashBoard*
.png)
*Empty income Page*
.png)
*Empty expense Page*
.png)
*Adding incomes*
.png)
.png)
*Adding expenses*
.png)
.png)
*Showing all incomes*
.png)
*Showing all expenses*
.png)
*View Transactions (incomes)*
*View Transactions (expenses)*
*Updated DashBoard*
.png)
.png)
## Table of Contents
- [Features](#features)
- [Prerequisites](#prerequisites)
- [Techstack](#installation)
- [Getting Started](#getting-started)
- [Installation](#installation)
- [Usage](#usage)
- [Contributing](#contributing)
- [License](#license)
- [Contact](#contact)
## Features
- **User Authentication**: Secure user signup and login with JWT-based authentication.
- **Real-Time Expense Tracking**: Keep track of your expenses as you spend, with instant updates and data storage.
- **Expense Categorization**: Organize your expenses into categories for better analysis and budgeting.
- **Income Categorization**: Track and categorize your income sources to maintain a clear financial overview.
- **History Tracking**: View detailed histories of your expenses and income, allowing for better financial planning and retrospection.
- **Data Analysis**: Gain insights into your spending and income patterns with visualizations and detailed reports.
- **Visual Representation with Charts**: Easily understand your financial data through charts and graphs, making analysis more intuitive and actionable.
## Prerequisites
The prerequisites for the KharchaGuru project are:
1. **Basic Knowledge of MERN Stack**:
- **MongoDB**: Understanding of database design and queries.
- **Express.js**: Familiarity with building RESTful APIs.
- **React**: Experience with React components, state management, and hooks.
- **Node.js**: Basic knowledge of server-side JavaScript.
2. **JavaScript and ES6**: Understanding of modern JavaScript features and syntax.
3. **Version Control with Git**: Familiarity with Git for version control and collaboration.
4. **npm (Node Package Manager)**: Experience with managing packages and dependencies using npm.
5. **Basic Knowledge of Authentication**: Understanding of JWT and how to implement secure authentication.
6. **Environment Setup**:
- Node.js and npm installed.
- MongoDB installed locally or access to a MongoDB Atlas account.
- Code editor like VSCode.
- **Styled-components**: Familiarity with styled-components for styling React components.
- **Postman or similar tool**: To test API endpoints during development.
## Techstack
- **Frontend**: React, styled-components, HTML5, Javascript
- **Backend**: Node.js, Express.js
- **Authentication**: JSON Web Tokens (JWT)
- **Database**: MongoDB
- **Styling**: CSS, styled-components
## Getting Started
Follow these steps to get started
## Installation
Here are the installation steps for the KharchaGuru project:
#### Installation
1. **Clone the Repository**:
Start by cloning the KharchaGuru repository from GitHub to your local machine:
git clone https://github.com/Soumya6Tiwari/kharchaguru.git
cd kharchaguru
2. **Install Frontend Dependencies**:
Navigate to the frontend directory and install the necessary dependencies using npm:
cd frontend
cd frontend
npm install
3. **Install Backend Dependencies**:
Next, move to the backend directory and install the backend dependencies:
cd backend
npm install
4. **Setup Environment Variables**:
Create a `.env` file in the `backend` directory and add the following environment variables:
MONGODB_URI= mongodb+srv://soumyaecc6:[email protected]/?retryWrites=true&w=majority&appName=Expense
JWT_SECRET=MCA2025
5. **Start the Backend Server**:
npm start
6. **Start the Frontend Development Server**:
Now, navigate back to the frontend directory and start the frontend server:
npm start
7. **Access KharchaGuru**:
Open your web browser and go to `http://localhost:3000` to start using KharchaGuru.
### Additional Notes
- Ensure that MongoDB is running either locally or in the cloud (e.g., MongoDB Atlas).
- The backend server typically runs on `http://localhost:5000` and interacts with the frontend server running on `http://localhost:3000`.
- If you encounter any issues, check the console for error messages and ensure that all dependencies are correctly installed.
# Usage
Here’s the usage section for the KharchaGuru project:
### usage
1. **Sign Up or Log In**:
- Visit `http://localhost:3000` in your web browser.
- If you don't have an account, click on the "Sign Up" button and create an account by providing your email and password.
- If you already have an account, simply log in using your credentials.
2. **Add an Expense**:
- After logging in, navigate to the "Add Expense" section.
- Select a category (e.g., Food, Transport, Entertainment) for your expense.
- Enter the amount, date, and any additional notes.
- Click "Add Expense" to save it.
3. **Add Income**:
- Go to the "Add Income" section.
- Choose the income source category (e.g., Salary, Freelance, Investments).
- Enter the income amount, date, and any relevant notes.
- Click "Add Income" to save it.
4. **View Expense and Income History**:
- Access the "History" section to view a detailed log of all your expenses and income on the dashboard
7. **Log Out**:
- When you're done, ensure to log out of your account securely by clicking on the "Log Out" button.
# Contributing
### contributing
Contributions are welcome! Please fork the repository and submit a pull request with your changes.
# License
### license
This project is licensed under the MIT License.
# Contact
### contact
For any inquiries or feedback, please reach out to [email protected]