DEV Community: Perry Raskin

Quick Start: Next.js and Plaid to pull financial data

Perry Raskin — Sun, 15 Mar 2020 23:22:38 +0000

Now that I've got a lovely Next.js personal website up and running, I'm ready for my next project. I've always enjoyed grabbing CSV files from my credit card or bank accounts and playing around with the financial data. It allowed me to run super custom reports for properly managing personal finances. One method of doing this was using Jupyter Notebook and running some Matplotlib plots, which I explain on this GitHub repo.

For a while now I've been meaning to integrate Plaid into a web app and try manipulating some financial data. After inevitably using it in the many budgeting apps I've encountered, I knew I had to give it a try myself. Currently I use Copilot, an iOS budgeting app that uses Plaid, and I absolutely love it. My code MRJA4Q will get you 3 months free!

I followed a blog post by Derek Sams that showed me how to get a React app running with Plaid. To get it working with Next.js, I had to make a few changes you may notice if you decide to compare the two.

Our Starter App

What we're focusing on here is to simply get Plaid working with a working React app. It will make a call to Plaid's transactions API and display transactions to the console. Of course once you get this done you can build upon this thing to make it do some really useful stuff!

Get Set Up

If you'd like, you can get started from scratch using Next.js's guide on starting a new project. For this post I'll focus on the boilerplate repo I published to GitHub. Once you clone the repo you'll want to run npm install in the root folder to get all set up. Please see the ReadMe file for more information.

The Code

Notice our API routes in /pages/api. Next.js automatically handles routing for us simply based on files it detects in this folder, like magic! We will take advantage of this along with our handy fetching utility called isomorphic-unfetch. These are important for working with Plaid's API.

The API

Let's take a look at the API in /pages/api/plaid/index.js. First we need to import next-connect, which will allow us to utilize the Next.js request handler. In our case, we will be sending a POST request. Then of course we'll need plaid for connecting to Plaid's API, and moment to do work with a few dates.

    import nextConnect from 'next-connect';
    import plaid from 'plaid';
    import moment from 'moment';

Next, we need to initialize some variables. As our .env file defines the API tokens received from Plaid, I defined them here. These are used to create the Plaid client object, which allows us to exchange keys and grab transactions as will be seen later in the file.

    const PLAID_CLIENT_ID = process.env.PLAID_CLIENT_ID;
    const PLAID_SECRET = process.env.PLAID_SECRET_SANDBOX;
    const PLAID_PUBLIC_KEY = process.env.PLAID_PUBLIC_KEY;
    const PLAID_ENV = process.env.PLAID_ENV;

    var ACCESS_TOKEN = null;
    var ITEM_ID = null;

    // Initialize the Plaid client
    export const client = new plaid.Client(
      PLAID_CLIENT_ID,
      PLAID_SECRET,
      PLAID_PUBLIC_KEY,
      plaid.environments[PLAID_ENV],
      { version: '2019-05-29', clientApp: 'Plaid Quickstart' }
    );

    const handler = nextConnect();

handler.post will begin the API call. We are doing two things here:

Calling client.exchangePublicToken to provide us with the access token
Calling client.getTransactions to return all transactions from the past 30 days

Once we receive the access token from client.exchangePublicToken we will use it when we call client.getTransactions. That's pretty much all that's going on here. The rest of the code is console logging the results so we can see what's going on as it happens.

Upon a successful response, we will receive the following JSON:

    res.json({
      ok: true,
      message: 'Success!',
      access_token: ACCESS_TOKEN,
      item_id: ITEM_ID,
      transactions: transactions
    })

If you use Postman, you should see this response. Clicking the "View Transactions" button after you connect the (sandbox) bank account, the dev console will output the { transactions: transactions } part of that response. More on front end aspects in the next section. Be sure to use the following sandbox credentials, provided by Plaid:

User ID: user_good
Password: pass_good

The Front End Component

I recently learned that if we want to work with state when using Next.js, we need to call useState(). For our little project, we'll need transactions to be stateful.

    const [transactions, setTransactions] = useState(Object);

That's it! We're basically just declaring a variable along with a matching setter for its state. In this case, transactions is the variable and setTransactions is the setter function. If you are familiar with deconstructing, you cant think about it as deconstructing the imported useState functionality.

    function handleOnSuccess(public_token: any, metadata: any) {
        // send token to client server
        fetchSwal
          .post('/api/plaid', {
            public_token: public_token,
            metadata: metadata,
          })
          .then((res) => {
            if (res.ok !== false) {
              setTransactions({ transactions: res.transactions });
            }
          });
      }

This is the function that handles the click of our “Connect your bank!” button to grab transactions. You'll see in the PLink component how it all comes together. This basically just makes an API call to grab the transactions from the account you just logged into through Plaid! Once we have the transactions, our setTransactions setter function sets the state to the value we just received.

We will then print the transactions to the dev console (in Chrome, for example) by clicking the "View Transactions" button.

    function handleClick(res: any) {
      console.log('transactions:', transactions);
    }

Conclusion

It's amazing that we have access to such a great API like Plaid. It really allows us devs to get creative with all kinds of data.

Feel free to leave comments and let me know how this went for you! I'd love to hear about any cool features you implemented following this initial setup.

Beautify code in your Next.js blog

Perry Raskin — Wed, 11 Mar 2020 14:54:43 +0000

It definitely took me way too long to get code blocks correctly highlighted on my blog. Next.js seems to have less tutorials out there in general, especially for specific use cases like these. I hope to fix that, at least a little bit, with my own blog. As I experience issues and overcome each challenge, my plan is to write up a post about it. Here's #1!

Quick Background

As a starting point, I want to outline the architecture of my website. As Next.js goes, I have page components in the /pages directory. Blog posts are generated dynamically via the /pages/blog/[slug].tsx page, where the getInitialProps function pulls content from the .md files located in the /posts folder.

If this is new to you, there are tutorials that explain how this works (e.g. Next.js docs). Feel free to also view the code on the GitHub repo.

Before Highlight.js

For a visual, below is what the BlogPostTemplate component looked like before I did anything fancy. I will only include the relevant code to keep it short, but feel free to view the entire file in the repo.

<article className="mb-10 markdown">
  <header>
    <h1 className="text-5xl">{frontmatter.title}</h1>
  </header>
    <div className="mb-5 my-auto text-sm font-semibold text-neutral-400">
      {reformatDate(frontmatter.date)}
    </div>
  <div>
    <ReactMarkdown 
      source={markdownBody}
    />
  </div>
</article>

Notice that this code simply applies a title, date, and the contents of the .md file. By default, inline code and code blocks were not nicely styled, and of course I wasn't satisfied with that. Luckily, react-markdown takes an optional parameter called renderers where we can provide a custom style to HTML tags of our choosing. This is where it got confusing - I had to dive into the source code to figure out what exactly I needed to pass to it.

The CodeBlock Component

First and foremost, make sure you have your imports for highlight.js. You can choose any theme from the /styles folder that's provided.

import Highlight from 'react-highlight';
import '../../node_modules/highlight.js/styles/nord.css';

After a lot of trial and error, I realized I needed to create a custom component to pass to renderers. I'm sure there are other ways to do this, but this made the most sense to me, and it worked quite nicely.

interface CodeBlockProps {
  value: any;
}

const CodeBlock: NextPage<CodeBlockProps> = ({ value }) => {
  return (
    <div>
      <Highlight>
        {value}
      </Highlight>
      <br />
    </div>
  )
}

Since the code parameter of renderers requires a component with a <code> element that's inside of a <pre> element, this is what I came up with. <Hightlight /> includes all of that, so I added it inside this component, and passed the value (the actual code) as props.

<ReactMarkdown 
  source={markdownBody}
  renderers={{
    code: CodeBlock
  }}
/>

Then, I simply passed the CodeBlock component to code and finally it worked! Just be sure you don't have PurgeCSS stripping your highlight.js CSS, and you should be good to go.

I also blog on my personal site, where this post was originally published.