CRM – Integrate CRM data with Apideck
A sample project for viewing and managing leads with the Apideck CRM API.
The CRM API is a single API to push and query CRM data from +12 connectors. In this sample project, we use the Apideck Node SDK to create a customer relationship management tool that allows you to manage leads from multiple services (e.g., Salesforce, HubSpot, Copper, etc.)
Built with Next.js, TypeScript, and Tailwind.
Run the sample locally
- An Apideck account: You can sign up for an Apideck account here: https://app.apideck.com/signup
- Apideck Application ID: Available in your Apideck dashboard.
- Apideck API Key: Available in your Apideck dashboard.
Installing the sample
This project uses the CRM API with the Node SDK. Visit https://developers.apideck.com/apis/crm/reference for documentation of the API and https://github.com/apideck-libraries/apideck-node for documentation about the SDK.
Step 1: Update your environment variables
.env.exampleand create a
- Add your API key:
- Add your Application ID:
- Your env should also include
- Your env could include
NEXT_PUBLIC_CONSUMER_ID=test-consumer, but if you don’t want to scope this application to a single consumer, you should use a unique user identifier as consumer ID. You can provide a consumer ID when creating a session by passing the
Step 2: Install dependencies
- Install dependencies with
- Run the development server with
npm run dev
http://localhost:3000/to see if it’s running. If you haven’t configured any integrations you will see a message.
Step 3: Create a Vault session and add connections
You need to create a Vault session and add/configure at least one CRM connection. You can do this by clicking the
Integrations settings button in the navbar. This button will redirect you to the Integration Settings app that gives you a UI to configure CRM connections.
After configuring at least one CRM connection, you can use the
Return to application link to return to
localhost:3000. You can change the return URL by providing a
redirect_uri while creating a session.
You should now be able to load and manage the leads of the connection you have configured.
crm ┣ __tests__ ┃ ┣ components ┃ ┗ pages ┣ public ┃ ┣ fonts ┃ ┣ img ┣ src ┃ ┣ components ┃ ┣ pages ┃ ┣ styles ┃ ┣ types ┃ ┗ utils ┣ .babelrc ┣ .env.local ┣ .eslintrc.json ┣ .gitignore ┣ .prettierrc ┣ README.md ┣ jest.config.js ┣ next-env.d.ts ┣ package.json ┣ postcss.config.js ┣ tailwind.config.js ┣ tsconfig.json ┗ yarn.lock
After you have cloned the project and once the installation is done, you can open your project folder:
Inside the newly created project, you can run some commands:
next dev, which starts the app in development mode.
Open http://localhost:3000 to view it in the browser.
next build, which builds the application for production usage
next start, which starts a Next.js production server
eslint command for all files with the
tsx extensions. See the
.eslint.json file for all configuration settings.
eslint command with the
--fix flag, which automatically tries to fix linting problems.
eslint command with the
--cache flag, which only checks the changed files.
Runs Prettier, which formats all files inside the
src directory based on the configuration set inside the
tsc command to compile the project and check if it has type errors.
jest command, which runs all tests
jest command with
--watch flag, which runs all tests in watch mode.
jest command with
--coverage flag, which indicates that test coverage information should be collected and reported in the output.
This project uses husky and lint-staged to run linters against staged git files on commit.
Before each commit, we run
prettier on all staged files.
Before each push to the repository, we run
jest to check if all tests are passing.
To learn more, take a look at the following resources:
- CRM API – info about the CRM API of Apideck
- CRM API Documentation – documentation of the CRM API
- Vault API Documentation – documentation of the Vault API
- Next.js Documentation – learn about Next.js features and API
- Vercel Serverless Functions – learn more about serverless functions by using the
/pages/apidirectory in Next.js projects
- Learn Next.js – an interactive Next.js tutorial
- TypeScript – learn about TypeScript
- Tailwind CSS – learn about the utility-first CSS framework Tailwind
- React Testing Library – learn about testing React components with React Testing Library
- ESLint – learn about analyzing code with ESLint
- Prettier – learn about formatting code with Prettier
- Prettier Extension – a Prettier extension for Visual Studio Code