yogeshprasanna / expense-manager-react

An 💰 Expense Tracking App Made using React ⚛️ , Firebase for storage and authentication

A Simple Expense Manager 💵

Note

I have stopped support for this application in terms of updating the stack and versions, if you run npm install , you might run into errors for not having latest versions of firebase , hence i advice to download the node modules in this project to run it locally

DEMO Account

In case you need to have a quick look at the app without creating an account, use the below credentials

Click Here For Demo

Username : [email protected] password : yogesh

SCREENSHOTS

Mobile Views

Night Mode Home Page

Month View Page Night Mode

Daily View Night Mode

Statistics Night Mode

Saving Goals Night Mode

Settings Night Mode

Filter Night Mode

Home Page Day Mode

Monthly View Day Mode

Daily View Day Mode

Statistics Day Mode

Loan Page Day Mode

Saving Goals Day Mode

Settings Day Mode

Login Screen

Calendar Component

SETUP

1. Setting Up Firebase

• Create a firebase account

• Create a new firebase project

  

• Be Sure to Choose Realtime Database , and not firestore

• change database rules to

• Now lets add the app in firebase

• Give Your app a name & hosting is optional

• Now Lets add the config in ./src/firebase/firebase.js

• OPTIONAL_STEP : If you're hosting this app somewhere make sure the api key comes from .env.local as environment variable, doing this does not expose yor api-key , and do not commit this file to github , add this in .gitignore # api Keys *.env

  create a file named .env.local in root folder and add your firebase api key here

  REACT_APP_FIREBASE_API_KEY = "your-api-key-here"

• Enable Google Authentication and Email Authentication , Feel Free to add other authentication methods and setup accordingly

• Setup Email Verification Template

• Finally we need to set up the API-Key for currency converter , which is needed for travel mode.

  • Head over to currencyconverterapi.com

  • create your API-KEY

  • Add this in .env.local as a environment variable

    REACT_APP_FREE_CURRENCY_CONVERTER_API_KEY = "your-api-key-here"

2. Setup Repo Locally

   git clone https://github.com/YogeshPrasanna/expense-manager-react.git

npm install

  This will install all the required packages and dependencies to run the app.

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Supported Browsers

By default, the generated project uses the latest version of React.

You can refer to the React documentation for more information about supported browsers.

expense-manager-react's Issues

Issue with firebase authentication error

Hi Yogesh,
Thanks for sharing excellent application, i have deployed locally the application but authentication failed with below error on login page. I am new to full stack development. Can you please help on how to fix this issue.

{"error":{"code":400,"message":"API key not valid. Please pass a valid API key.","errors":[{"message":"API key not valid. Please pass a valid API key.","domain":"global","reason":"badRequest"}],"status":"INVALID_ARGUMENT"}}

Thanks,
Anusha

Application Not working for new Users

Describe the bug
When a new user sign up through email , the the does not respond back with home page , it'll be loading forever

To Reproduce
Steps to reproduce the behavior:

1.Sign up with email
2.Login to the application
3. Home page is loaded - with page loading continiously

Expected behavior
Page should load up with no records and all cards with 0 Amount

Empty table when there are no records

There needs to be a custom message indicating the user when there are no records found

Error While Updating Expense

Describe the bug
Expense Update error while updating an expense from other views , except from home view

To Reproduce
Steps to reproduce the behavior:

1. Update an expense from any other views except home page

Expected behavior
Updating an expense should work in all views
convertedCurrency is NaN , hence error

Add expense popup issue

When a user starts to type in comments section , Android keyboard opens up , which breaks the popup layout , and blocks the vision of comments section

Bug in Daily view Doughnut chart

Describe the bug
Bug in Daily view Doughnut chart
Shows different color when hovered on a category

To Reproduce
Steps to reproduce the behavior:

1. Go to Daily view

Expected behavior
Show show the same color when hovered

Improper Display of month total

Describe the bug
The month value is displaying 000 instead of 0

To Reproduce
Steps to reproduce the behavior:

1. visible when logged in

Expected behavior
Should be coinverted to number and be displayed

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: Laptop
• OS: windows 10
• Browser : chrome ,all

Account
Demo account ; [email protected]

Additional context
should be checked for other cards too..

Unable to deploy the project

Hi ,

I followed all the instructions provided in your git repo but even then i am not able to run the project. Is there anything I had missed out. Please find the screenshots attached.

Please clarify the firebase initialisation process too.

Logo Proposal for expense-manager-react

Hellow @YogeshPrasanna
I'm a graphic designer and I like to support your project because I believe a good logo that reflects your project at its best can help the project publicity and trustability, also i'm an open source enthusiast. I would like to design a logo for your project if you interested, I will be happy to work with you! :)

Best Regards

Leonardo Deroy

Graphic Designer

Invalid Firebase API error

Even after providing the correct web API Key I am not able to authenticate nor sign in.
On click of

I get a error message

{"error":{"code":400,"message":"API key not valid. Please pass a valid API key.","errors":[{"message":"API key not valid. Please pass a valid API key.","domain":"global","reason":"badRequest"}],"status":"INVALID_ARGUMENT"}}.

What couldbe the possible error.

Month Viewv : calender Left -rigth arrows size

Describe the bug
Month view calender chevron arrows is 100 percent in mobile view

To Reproduce
Steps to reproduce the behavior:

1. Go to month view
2. See error

Expected behavior
icons should fit in a single line

Screenshots

Improper Responsive view in Savings Page for Mobile Device

**Responsiveness issue in case of mobile devices **
Savings page data insertion form doesn't have a scroll feature to scroll down till the end of the form. Also the submit button doesn't show up.

To Reproduce (Mobile device)
Steps to reproduce the behavior:

1. Go to 'Savings Page'
2. Click on 'Insert (+ icon)'
3. Scroll down to ' Scroll bar missing (required only for mobile device)'
4. Form doesn't appear completely

Expected behaviour
A scroll bar till the end of the form and submit the form.

Screenshots

Smartphone (please complete the following information):

• Device: Redmi 5A
• OS: Android 7.1.2
• Browser: Google Chrome
• Version 75.0.3770.101

issue with logo in login page

Describe the bug
The logo size is enlarged , should be placed exactly right above sign in page desc

Expected behavior
should be placed exactly right above sign in page desc at a reduced size

Screenshots

Update Readme

1. Application Setup

2. Setting up firebase

3. Creating Env Variables For firebase Api

Expenses in cards are not comma seperated in mobiles

Describe the bug
Expenses in cards are not comma seperated in mobiles

Month View : Changing year does not fetch correct data

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to Month View
2. Change year to some other year than current year
3. the tables , total card , categories card show the current year data

Expected behavior
The data should be from the selected year and not current year

EditExpense Popup shows up loading alltime

In monthly , daily and filter view , whenever we edit an expense , the popup never shows the form , it always shows loading

npm install error

Describe the bug
npm install throwing error on GCP Cloud hosted Ubuntu 18.04 LTS

To Reproduce
Steps to reproduce the behavior:

1. Go to Cloud console
2. cd to expense-manager-react
3. enter command npm start
4. See error

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 18.04

Error Details

root@money-mgmt:/opt/expense-manager-react# npm start

> [email protected] start /opt/expense-manager-react
> react-scripts start

sh: 1: react-scripts: not found

npm ERR! Linux 4.15.0-1037-gcp
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "start"
npm ERR! node v8.10.0
npm ERR! npm  v3.5.2
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] start: `react-scripts start`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] start script 'react-scripts start'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the expense-manager-react package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     react-scripts start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs expense-manager-react
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls expense-manager-react
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /opt/expense-manager-react/npm-debug.log

Save button overlaps add button

Describe the bug
When editing a expense, save button in edit form is not accessible properly as add expense button overlaps save button

Improper Calculation for month

Describe the bug
Home page month value and month page month value does not match

Expected behavior
Both the calculations should match

Screenshots

Additional context
In home page it's calculating the month data for all years.
Resolution: should display only this years current month total value

Infinite loading

Hi @YogeshPrasanna

The loan page is in infinite loading state. Even the insert (+) button is missing. However didn't find any such issue with your demo site.

Email address is badly formatted in sign in

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to sign in page
2. Enter your email , if it contains spaces at end or start
3. you'll see this error

Expected behavior
This should not happen , it should trim the email

Screenshots

Doughnut Chart Error on Clicking Legend

Describe the bug
On Click of a legend in doughnut chart in Monthly and statistics view ,We receive a type error

App Keeps on loading always if settings is returned null from db

For Existing users if there are no settings saved in database , the app keeps on loading after authenticated .

New Feature request

Is your feature request related to a problem? Please describe.
Not a problem but a enhancement

• Describe the solution you'd like*
  Under expenses tab we got a category Investment which is a kind of saving. So if some input with the category Investment is entered then it should be entered under savings table not under expense table. Assume I withdraw 1000 from ATM where do i store that value. If I store it under expenses then it will cause duplication of data.

Cards: Wrong Today and Week Calculation

Describe the bug
Wrong Today and Week Calculation

To Reproduce
Steps to reproduce the behavior:

1. You would be able to check this issue in home and statistics page , where today and this week card would consider previous years data for the week and today date

Expected behavior
year validation should happen

We are a group of Software Engineering students from University of Malaya and we had conducted testing on Expense Manager for Software Testing class. We found a number of defects as documented in the following report. Thanks!

The testing has been conducted using Black Box Testing, White Box Testing, Static Testing and GUI Testing.

Black Box Testing techniques used:
i. Equivalence Partitioning
ii. Boundary Value Analysis
iii. Decision Table Testing
iv. State Transition Testing
v. Use Case Testing

White Box Testing techniques used:
i. Error Guessing

Expense Manager Software Testing Report.pdf

Data Migration Issue

Describe the bug

Once you migrate to the new DB Table , say you delete all the data , then you'll see your old data appearing again , this means once the data is migrated from old table to new table , the records are not deleted in old table

To Reproduce
Steps to reproduce the behavior:
1 .Delete all your expenses , you'll see old data

Expected behavior
once migrated , even if you delete all the data , your old data should not re-appear