Holaplex Hub Starter

A template repository to help you build NFT based applications using Holaplex Hub.

Includes:

• NextJS 13 web framework (app directory enabled)
• Postgres database management using Prisma ORM
• User management with social based login through next-auth
• Style application using Tailwind
• Holaplex Hub SDK

Folder Structure

/prisma
  schema.prisma # prisma schema file
  /migrations # prisma auto-generated migration files
/src
 /app # next js app directory
  /login # social sign up or login
  page.tsx # home page
 /pages
   /api # next js api routes
    graphql.ts # apps graphql server
 /modules # utility clients and functions
   db.ts # prisma db client
   holaplex.ts # configured holaplex client
 /queries # holaplex and app api queries
 /mutations # holaplex and app api mutations
 tailwind.config.js # color theme

Getting Started

Ensure you have nodejs and docker installed on your workstation.

# start postgres in a docker container
docker compose up -d

# install dependencies
npm install

# setup database
npm run db

# boot up the app
npm run dev

See your app at http://localhost:3000

Environment

Create a .env file at the root of the project. Add the following environment variable.

# setup SSO with Google
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

# setup SSO with Twitter
TWITTER_CLIENT_ID=
TWITTER_CLIENT_SECRET=

# database
DATABASE_URL=postgres://postgres:holaplex@localhost:5432/hub-starter
POSTGRES_DB=hub-starter
POSTGRES_PASSWORD=holaplex

# holaplex
HOLAPLEX_API_ENDPOINT=https://api.holaplex.com/graphql
# https://docs.holaplex.dev/api
HOLAPLEX_AUTH_TOKEN=
HOLAPLEX_PROJECT_ID=
# Create wallets for desired blockchains (SOL,MATIC,ETH). Can add multiple blockchains separated by comma.
HOLAPLEX_WALLET_ASSET_TYPES=
# Drop Id for team A
HOLAPLEX_A_DROP_ID=
# Drop Id for team B
HOLAPLEX_B_DROP_ID=
# Custom image url for team A Nft
NEXT_PUBLIC_HOLAPLEX_VOTE_A_IMAGE=
# Custom image url for team B Nft
NEXT_PUBLIC_HOLAPLEX_VOTE_B_IMAGE=

Migrations

Follow the Prisma guide on adjusting the database through migrations. Once the Prisma schema has been adjusted run npm run migrate.

Release

The starter is designed to be deployed to render using their Infrastructure as Code (IaC) configuration file render.yaml. The IaC manifest will set up a web server for the mint page and a database for storing users, sessions, and wallets.

Database

After deploying the environment, access the shell of the web server and run the following command to create and set up the database schema:

npm run db

Environment Variables

Although the IaC will create placeholder environment variables for the web service, you will need to update them to match your Holaplex account.