The account balances feature of this application is currently under maintenance and is, therefore, unavailable. I am working diligently to return this feature as soon as possible.
- Live Application
- Description
- Technologies
- How To Use
- API Paths
- Application Features
- Version 2.0 (future upgrade)
- License
- Author Info
This application can be viewed here: acc-balance-and-transactions-application.vercel.app
The backend API is currently running here: acc-balance-and-transactions-app-server-2.vercel.app
Both the client and server are hosted on Vercel with the databases hosted by MongoDB
This application is designed to become a transaction tracker and budgeting software to help users create financial goals. This application drew inspiration from Mint's budgeting and goal-setting features.
Current features include:
- Connecting your bank account
- Viewing transactions from the last 30 days
This application implements Plaid's API end points to connect to your bank account information. However, sample login credentials are provided within the application's home page that allows users to easily view and use the application's features.
This application's front-end is built on React and TypeScript, jQuery and Vanilla CSS. An API handles all promises necessary to interact with the back-end API database.
The application's back-end is built on Express.js and MongoDB servers utilizing RESTful APIs.
The Express CORS package is implemented for specified domains to access the back-end API. The CORS package is commented out for installation simplicity, but is ready to be used by uncommenting a few lines of code (Detailed instructions within Installation section below)
- Backend API setup
- Creating RESTful APIs
- Using Express for middleware request and response handling
- Implementing MongoDB servers
- Frontend built on React with React router and hooks
- jQuery implemented on frontend for some features
- TypeScript implemented on the frontend
- Express CORS package implemented
- Project deployed on Vercel
The API calls to MongoDB servers are meant to assist in adopting a login system to this application, which will be built in the near future. Therefore, these API calls perform a frivolous task for the time-being.
Create a free Plaid account here to have access to your own
PLAID_CLIENT_ID
andPLAID_SECRET
s.
- Fork and clone this repository
cd
into the newly created directory- Run
cp ./server/.env.sample ./server/.env
- Update the newly created
.env
file in the./server
directory- Input the
PLAID_CLIENT_ID
assigned to your Plaid account - Depending on the environment, input the sandbox or development
PLAID_SECRET
assigned to your Plaid account - Alter the value of
PLAID_ENV
todevelopment
if you wish to use real banking information - Alter the value of
DATABASE_URL
with the connection URL to your MongoDB database cluster unless you wish to use a local database connection
- Input the
- Run
cp ./client/.env.sample ./client/.env
- The newly created
.env
file in the./client
directory does not need to be editted, unless you wish to connect to the server at a location other thanhttp://localhost:5000
- Run
npm install
to install project dependencies - Run
npm start
to start your client and server concurrently
Other:
- Reconfigure lines 12 - 20 of the
./server/src/app.js
file to use the CORS package. Alter the value(s) of theallowedDomains
array to include the location(s) where you plan to run the client of the application
Please reach out for assitance if you are having trouble getting the server to properly run.
API Path | Function |
---|---|
/link/token/create |
POST: create a link_token |
/item/public_token/exchange |
POST: exchange a public_token for an access_token |
/transactions/get |
GET: retrieve the last 30 days of transactions from accounts associated with linked bank account |
/accessToken |
POST: create a new collection containing the access_token to the specified MongoDB database cluster |
/accessToken/:id |
GET: retrieve the collection corresponding to the specified collection id |
/accessToken/:id |
PATCH: update the collection corresponding to the specified collection id |
/accessToken/:id |
DELETE: delete the collection corresponding to the specified collection id |
The application contains a navigation menu containing 2 different pages:
- Home
- View Transactions
The home page contains a button that will navigate the user to Plaid Quickstart, which is Plaid's own API that allows for safe and secure connection to use your bank institution's login credentials to access your accounts and transactions.
Additionally, simple instructions are provided (not pictured above) that contain the bank institution login credentials for the sandbox environment.
The transactions page allows the user to view all transactions from the associated account from the last 30 days. The following information is included for each transaction:
- Name of the account that the transaction belongs to
- Date of transaction
- Name of the merchant
- Name of the transaction
- Category data regarding the transaction
- Amount of the transaction
Per instructions provided on the Home page, the Plaid Quickstart API allows the user to input credentials of a sample account to be used for experimentation with the application and to test its functionality while using the sandbox environment. If a development environment is being used, real and authentic login credentials can be used to view the application with real-time data.
You can learn more about Plaid Quickstart from their documentation.
In addition to optimizing the current code base and updating some of the TypeScript type annotations, there are a number of updates planned for the near future to give this application more functionalities. These include:
- Ability to create monthly budgets for different categories and track current progress for the current month
- Add a pie/donut chart to the transactions page that displays each category of transactions represented by their portion of total transaction amount. This will allow users to easily visual spending patterns
- User/login system that can save user's information instead of needing to input login credentials for institutions every time upon opening the application
Feel free to reach out to me if there are any other features not listed that you would like to request to be added.
MIT License
Copyright (c) [2021] [Miki Saarna]
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- GitHub: miki-saarna
- LinkedIn: Mikito Saarna
- Website: MikiSaarna.com