An awesome financial tracker application based on website
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
Financial Tracker Application is a web application that allows their user to keep track of their income and expense. To use this application, user just need to register to the application, then login to add an income or expense that they got. After that, the system will automatically calculate their balance and display a line chart that visualize the transaction per month. User can also generate the transaction history into PDF format with this application.
Main technology used to built this application are listed below:
To get started with this project locally, follow below steps:
Make sure you have package manager (either npm or yarn), and also PostgreSQL on your machine.
FYI: This project uses yarn as package manager, but you're free to use npm too.
- Install Yarn (Only for user who want to use yarn)
npm i -g yarn
- Have PostgreSQL installed on your machine
Below steps will guide you through the local installation process of this application
- Get your Google Client ID, Google Client Secret, and also GMail Refresh Token from here
- Get your facebook app ID at here
- Clone the repo
git clone https://github.com/stanleyclaudius/financial-tracker.git
- Install project dependency
Make sure that your terminal pointing at the root directory of this project (financial-tracker folder).yarn install && cd client && yarn install
- Complete the .env variable
Rename .env.example file atserver/config
directory become.env
, then fill the value for every key. Below is the guideline for filling the .env value:
Key What To Fill Example Value PORT Your server port 5000 CLIENT_URL Your client side URL http://localhost:3000 DB_USER Your PostgreSQL username postgres DB_PASS Your PostgreSQL password root DB_NAME Your database name fintrack DB_HOST Your PostgreSQL host localhost DB_PORT Your PostgreSQL port 5432 DB_ENV Your database environment development ACCESS_TOKEN_SECRET Random complex string for JWT DUhxdx183)_--aACN#2% REFRESH_TOKEN_SECRET Random complex string for JWT 17hdjcD7ud(-*&732~ ACTIVATION_TOKEN_SECRET Random complex string for JWT kc81i^&%`-Did##1Z GOOGLE_CLIENT_ID Your google client ID 3392348929324-tarur228dxxx GOOGLE_CLIENT_SECRET Your google client secret GOCSPX-xxxxxxx GMAIL_REFRESH_TOKEN Your gmail refresh token 1//028dhdjBMudu2829xxx MAIL_SENDER_ADDRESS Email that want to be used to send mail [email protected] - Complete the constant.ts value
Rename constant.example.ts file atclient/src/utils
directory becomeconstant.ts
, then fill the value for every constant. Below is the guideline for filling the constant.ts value:
Key What To Fill Example Value GOOGLE_CLIENT_ID Your google client ID 3392348929324-tarur228dxxx FACEBOOK_APP_ID Your facebook app ID 18239943847394 - Create a database with name corresponding to your
DB_ENV
value at .env file - Run below command at your terminal that pointing to the root directory of this project
yarn knex migrate:latest --migrations-directory server/migrations
- Lastly, run below command at your terminal to spin off the application
yarn run dev && cd client && yarn start
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt
for more information.
LinkedIn: Stanley Claudius
Project Link: https://github.com/stanleyclaudius/financial-tracker
Special thanks to:
- Othneildrew for providing an amazing README template.
- React Icons for providing icon to be used in this application.
- Tailwind CSS for providing CSS framework to be used in this application.
- Heroku for providing hosting service for this application.