-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
180 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,5 @@ | ||
| # ExpenseMate | ||
|
|
||
| <!--toc:start--> | ||
|
|
||
| - [ExpenseMate](#expensemate) | ||
| - [Features](#features) | ||
| - [Tech Stack](#tech-stack) | ||
| - [Usage](#usage) - [Authentication & Creating an Account](#authentication-creating-an-account) - [Dashboard](#dashboard) - [Expenses](#expenses) - [Income](#income) - [Update User Profile](#update-user-profile) | ||
| <!--toc:end--> | ||
|
|
||
| ExpenseMate is a full-stack personal finance management web application designed to help users track | ||
| their income, expenses, and budget efficiently. The app offers an intuitive interface for users to manage their financial | ||
| activities, view transaction history, and gain insights into their spending habits through various reports and summaries. | ||
|
|
@@ -97,3 +89,57 @@ Users can also toggle the theme of the user interface from light to dark. In add | |
| before a user logs in again. | ||
|
|
||
|  | ||
|
|
||
| ## Local Installation and Setup | ||
|
|
||
| ### Prerequisites | ||
|
|
||
| In order to run the app locally, make sure you have these installed: | ||
|
|
||
| 1. Node.js | ||
| 2. npm | ||
| 3. MongoDB | ||
|
|
||
| After this, you can clone the repository to have access to both front-end and back-end source code. | ||
|
|
||
| ```bash | ||
| git clone https://github.com/m-usaid99/ExpenseMate.git | ||
| cd ExpenseMate | ||
| ``` | ||
|
|
||
| ### Frontend Setup | ||
|
|
||
| 1. Navigate to the front-end directory: | ||
|
|
||
| ```bash | ||
| cd frontend | ||
| ``` | ||
|
|
||
| 2. Install dependencies: | ||
|
|
||
| ```bash | ||
| npm install | ||
| ``` | ||
|
|
||
| 3. Set up environment variables: | ||
|
|
||
| - Create a `.env` file in the `frontend` directory. | ||
| - Create your JWT_SECRET (you can search up how to do so easily on Google). | ||
| - Add the following to your `.env` file. | ||
|
|
||
| ```env | ||
| REACT_APP_API_URL=https://expensematebackend.onrender.com/api | ||
| ``` | ||
| 4. Start the frontend development server: | ||
| ```bash | ||
| npm start | ||
| ``` | ||
|
|
||
| 5. You can view the documentation for the backend API through Swagger by accessing [this link](https://expensemate-bmu7.onrender.com/api-docs/). | ||
|
|
||
| ### Backend Setup | ||
|
|
||
| To do development work on the backend, you will need access to the Sendgrid API as well as MongoDB Atlas. I would recommend getting in touch with me via [email](mailto:[email protected]) if you want to | ||
| collaborate on the backend API. | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| # ExpenseMate | ||
|
|
||
| ExpenseMate is a full-stack personal finance management web application designed to help users track | ||
| their income, expenses, and budget efficiently. The app offers an intuitive interface for users to manage their financial | ||
| activities, view transaction history, and gain insights into their spending habits through various reports and summaries. | ||
|
|
||
| ## Features | ||
|
|
||
| - **Income and Expense Management**: Record and categorize income and expenses. | ||
| - **Category Filtering**: Filter transactions by date, category, and tags. | ||
| - **Real-time Summary**: View total income, expenses, and savings in a dashboard overview. | ||
| - **Dark/Light Theme Toggle**: Switch between dark and light themes for better usability. | ||
| - **Budget Tracking**: Set budgets and monitor spending against those budgets. (In Progress) | ||
| - **Responsive Design**: Optimized for both desktop and mobile use. Some pages will be made more responsive soon. | ||
|
|
||
| ## Tech Stack | ||
|
|
||
| - **Frontend**: | ||
| - React | ||
| - Redux | ||
| - React Router | ||
| - MUI (Material UI) & mui-x/charts | ||
| - Axios | ||
| - **Backend** | ||
| - Node.js | ||
| - Express | ||
| - Mongoose | ||
| - Database | ||
| - MongoDB (deployed on MongoDB atlas) | ||
| - Testing | ||
| - Jest | ||
| - Documentation | ||
| - Swagger (for API documentation) | ||
| - Deployment (CI/CD) | ||
| - Github Actions + Render | ||
| - Vercel | ||
|
|
||
| ## Usage | ||
|
|
||
| You can start using ExpenseMate by visiting the live application: | ||
|
|
||
| - **_ExpenseMate_**: [Live App on Vercel](https://expensemate.vercel.app) | ||
|
|
||
| ### Authentication & Creating an Account | ||
|
|
||
| Users can create an account by clicking on the SIGN UP button on the Login page. User will be prompted to enter personal details to create their account. | ||
|
|
||
|  | ||
|
|
||
| After successful registration, the user will be automatically redirected to the Dashboard. | ||
|
|
||
|  | ||
|
|
||
| ### Dashboard | ||
|
|
||
| The dashboard contains links to specific pages, as well as overall financial summary to understand your financial health at a quick glance. | ||
|
|
||
| <a href="https://i.imgur.com/hpojhY4.png" target="_blank"> | ||
| <img src="https://i.imgur.com/hpojhY4.png" alt="Screenshot" width="600"/> | ||
| </a> | ||
|
|
||
| #### Features to be added | ||
|
|
||
| - A chart tracking budgets and expenses against those budgets. | ||
| - Quick action buttons to add income/expense. | ||
|
|
||
| ### Expenses | ||
|
|
||
| On the expense page, users can see their expense trends for the past 12 months. They can also view a list of their expenses, and filter expenses based on various categories. | ||
| Users can also add expenses using the 'Add Expense' button. | ||
|
|
||
|  | ||
|
|
||
| ### Income | ||
|
|
||
| The Income page works the exact same way as the Expense page. The only difference is that the tags and categories for incomes are different compared to expenses. | ||
|
|
||
| ### Update User Profile | ||
|
|
||
| Users can also change their profile information, as well as the user interface theme. The user profile settings can be accessed through the drop down menu on the top right of the screen. | ||
|
|
||
|  | ||
|
|
||
| The profile update form is very similar to the sign up form. Users will get a notification upon a successful change in the back-end. | ||
|
|
||
|  | ||
|
|
||
| Users can also toggle the theme of the user interface from light to dark. In addition to being stored in the database, this setting is also stored in local storage; so it can be accessed | ||
| before a user logs in again. | ||
|
|
||
|  | ||
|
|
||
| ## Local Installation | ||
|
|
||
| ### Prerequisites | ||
|
|
||
| In order to run the app locally, make sure you have these installed: | ||
|
|
||
| 1. Node.js | ||
| 2. npm | ||
| 3. MongoDB | ||
|
|
||
| After this, you can clone the repository to have access to both front-end and back-end source code. | ||
|
|
||
| ```bash | ||
| git clone https://github.com/m-usaid99/ExpenseMate.git | ||
| cd ExpenseMate | ||
| ``` | ||
|
|
||
| ### FrontEnd Setup | ||
|
|
||
| 1. Navigate to the front-end directory: | ||
|
|
||
| ```bash | ||
| cd frontend | ||
| ``` | ||
|
|
||
| 2. Install dependencies: | ||
|
|
||
| ```bash | ||
| npm install | ||
| ``` | ||
|
|
||
| 3. Set up environment variables: | ||
| - Create a `.env` file in the `frontend` directory. | ||
| - Create your JWT_SECRET (you can search up how to do so easily on Google). |