ZBD Next.js Dev Playground

Developer Playground for testing the ZBD API

Live Dev Playground · 1-Click Deploy · Developer Dashboard

---

This is a starter kit for building fullstack applications using Next.js react framework alongside ZBD for global instantaneous Bitcoin payments.

This starter kit also emcompasses a Dev Playground (see /pages/playground.js) where ZBD-enabled modules can be used / tested.

Installation & Setup

First you must install the project's dependencies:

npm run dev
# or
yarn dev

Then you must create a .env.local file in the root directory with your ZBD API key, like so:

ZBD_API_KEY=xxxxxxxxxxxxxxxx

You may also simply rename the .env.local.example file to .env.local.

That's it! You're all set.

Starting Dev Server

To start the dev server run:

npm run dev
# or
yarn dev

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

File Structure

You can start editing the project page by modifying pages/index.js. There is additional comments throughout this file as well. The page should auto-update as you edit the file. Any JS page inside of pages are treated as React components that can be rendered on the application.

Specifically, check out /pages/index.js and /pages/playground.js as they are the two main pages available in this starter kit.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes and effectively make up your project's backend APIs. The backend API is using the @zbd/node SDK library for Node.js to interact with the ZBD API.

The main goal for this starter kit is to provide ample resources around source code that can be used to speed up your development of ZBD-powered applications.

Learn More

To learn more about ZBD, take a look at the following resources:

• ZBD Documentation Portal - documentation, guides, and walkthroughs
• GitHub - ZBD's org GitHub account with lots of example source code and open source SDK libraries
• Discord Dev Chat - join other developers discussing ZBD integration topics

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.

Deploy on Vercel

To make the most out of this Playground, deploy the project to Vercel using the Deploy button below and pass your ZBD API Key in the settings. This will spin up an instance of the Dev Playground connected to YOUR ZBD account.