sample-project-sync-for-expenses

Note: This sample project won't work deployed to Vercel without the OPTIONAL_MONGODB_CONNECTION_STRING set. It will fallback to lowdb, which only works locally.

---

Sync for Expenses is an API and a set of supporting tools. It has been built to enable corporate card and expense management platforms to provide high-quality integrations with multiple accounting platforms through a standardized API.

This sample project implements setting a company up for expense sync.

Prerequisites

• Sign up!
• Enable Sync for Expenses
• Configure your data type settings
• Ensure an accounting integration is enabled. You can get started with our accounting sandbox, though sandbox syncs will fail..
• You should disable our banking and commerce sandbox integrations.

For the full experience, enable a non-Codat sandbox integration (e.g. QuickBook Online Sandbox)

For more information, follow the Sync for Expenses getting started guide.

Getting started locally

1. Create a local env file

• Copy the .env.example file into a .env.local file

2. Set your Codat auth header

• Set the CODAT_AUTH_HEADER to your authorization header.

3. Optional - Configure MongoDB as your database

• If you would prefer to use a traditional database over LowDB, set the OPTIONAL_MONGODB_CONNECTION_STRING to your MongoDB connection string. The connection string will need to include the database name. This is recommended if you are deploying this application.

4. Webhooks - Open up a local tunnel

This demo relies on webhooks that signal when a sync has completed successfully (or failed). To allow Codat's webhooks to hit this demo app, you'll need to open up a local tunnel. We recommend using localtunnel:

• Run localtunnel

npx localtunnel --port 3000

• Extract the URL. It should look like https://some-subdomain.loca.lt
• Set the CODAT_RECEIVE_WEBHOOK_BASE_URL to this URL. The .env.local file will need updating with this value.

5. Run the development server

Install dependencies

npm install

then start the server

npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Implementation details

• We've taken care of creating new webhook rules for each company you add - instead of this, you can just create the rules once, listening for all companies.
• We've used Embedded Link for the authorization of access to the data.
• This project uses next/font to automatically optimize and load Inter, a custom Google Font.
• We've implemented two approaches to storage:
  • For local development, lowdb with act as a lightweight database.
  • For deployment, we've implemented MongoDB Atlas. Set OPTIONAL_MONGODB_CONNECTION_STRING and the code will use this functionality.

Deploying the project

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Webhooks

Unlike locally you don't need to setup anything extra to handle the webhooks. Just make sure you've set the environment variable CODAT_RECEIVE_WEBHOOK_BASE_URL correctly (excluding the /api/webhooks path).

E.g. https://sample-project-sync-for-expenses.vercel.app

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Pitfalls

• If you're using a free trial, you may hit the free plan limitations. You won't be able to create more than 5 Sync for Expenses companies.