MERN Plaid

YouTube Link https://youtu.be/znrBfD8d0SY

Full-stack banking web app built with Plaid's API and the MERN stack.

This project uses the following technologies:

• React and React Router for the frontend
• Express and Node for the backend
• MongoDB for the database
• Redux for global state management
• Plaid for bank account linkage and transaction data
• Passport for user authentication

Our Plaid flow will go as follows.

• User links a bank account within app, causing our app’s public key to be sent to Plaid.
• Plaid responds with a public token, which is unique for each sign in and expires in 30 minutes.
• We send our public token to our back-end server, exchanging it for an access token and item id (each bank account has a unique access token and item id).
• We’ll save this access token, item id and a few other fields in our database (while checking for duplicate accounts).
• We’ll send our access token, client id, and client secret to Plaid to get the user’s transactions.

Configuration

Mongo

Make sure to add your own MONGOURI from your mLab database in config/keys.js.

module.exports = {
  mongoURI: "YOUR_MONGO_URI_HERE",
  secretOrKey: "secret"
};

Plaid

Also, add your own Plaid API keys (PLAID_CLIENT_ID, PLAID_SECRET, and PLAID_PUBLIC_KEY) in

1. routes/api/plaid.js

const PLAID_CLIENT_ID = "YOUR_CLIENT_ID";
const PLAID_SECRET = "YOUR_SECRET";
const PLAID_PUBLIC_KEY = "YOUR_PUBLIC_KEY";

2. client/src/components/dashboard/Dashboard.js and client/src/components/dashboard/Accounts.js

<PlaidLinkButton
                buttonProps={{
                  className:
                    "btn btn-large waves-effect waves-light hoverable blue accent-3 main-btn"
                }}
                plaidLinkProps={{
                  clientName: "YOUR_APP_NAME",
                  key: "YOUR_PUBLIC_KEY",
                  env: "sandbox",
                  product: ["transactions"],
                  onSuccess: this.handleOnSuccess
                }}
                onScriptLoad={() => this.setState({ loaded: true })}
              >
                Link Account
</PlaidLinkButton>

Quick Start

// Install dependencies for server & client
npm install && cd client && npm install

// Run client & server with concurrently
npm run dev

// Server runs on http://localhost:5000 and client on http://localhost:3000