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
- 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.
Make sure to add your own MONGOURI from your mLab database in config/keys.js.
module.exports = {
mongoURI: "YOUR_MONGO_URI_HERE",
secretOrKey: "secret"
};Also, add your own Plaid API keys (PLAID_CLIENT_ID, PLAID_SECRET, and PLAID_PUBLIC_KEY) in
routes/api/plaid.js
const PLAID_CLIENT_ID = "YOUR_CLIENT_ID";
const PLAID_SECRET = "YOUR_SECRET";
const PLAID_PUBLIC_KEY = "YOUR_PUBLIC_KEY";
client/src/components/dashboard/Dashboard.jsandclient/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>
// 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