Quick setup
This guide will teach you how to create a social application where users can create on-chain content and connections in the social network. You will learn to implement features that will empower your users to own their social identities and the content they've created.
Once users have set up their profiles, they will have the ability to enable rules for the subscriptions to their profiles (e.g. pay to subscribe) and the posts they've created (e.g. pay to collect post).
This is a more comprehensive example with the sole purpose of going over core features and highlighting how easy to implement them. Later on you can extrapolate and get creative with your project to create different use cases that would truly make your app stand out.
Jump to
How to Build Content app covers the following sections:
- Create a Profile
- Authentication
- Subscribe to Profile
- Create a Post
- Collect a Post
- Middleware for Subscribe
- Middleware for Post
Prerequisites
The app you're about to build is using Next.js. Make sure that you have installed Node.js on your computer and MetaMask extension in your Chrome browser.
Installation
Clone the repo https://github.com/cyberconnecthq/cc-content-app.git and run the following command in your terminal to install all the packages that are necessary to start the development server: npm install
or yarn install
.
Set up env variables
In this demo, you need to set 5 env variables:
NEXT_PUBLIC_API_KEY
andNEXT_PUBLIC_API_SECRET
are for uploading metadata using Pinata (register on Pinata).- For development environment, you need to set
NEXT_PUBLIC_GRAPHQL_ENDPOINT
tohttps://api.cyberconnect.dev/testnet/
. - When you call the
relay
mutation from the API, you need to putX-API-KEY: process.env.NEXT_PUBLIC_CYBERCONNECT_API_KEY
in the request header, you can register the key from the dashboard. - Last but not least, make sure to set
NEXT_PUBLIC_CHAIN_ID
to97
which is BSC Testnet.
NEXT_PUBLIC_API_KEY=*** // PINATA API KEY
NEXT_PUBLIC_API_SECRET=*** // PINATA API SECRET
NEXT_PUBLIC_CYBERCONNECT_API_KEY=*** // CyberConnect API KEY
NEXT_PUBLIC_GRAPHQL_ENDPOINT=https://api.cyberconnect.dev/testnet/ // CyberConnect Endpoint
NEXT_PUBLIC_CHAIN_ID=97 // BSC Testnet
Local Development
To start the local development server run the command npm run dev
or yarn dev
and open up the browser window http://localhost:3000. Most changes are reflected live without having to restart the server.
Live demo
This is the link for the live version of the app you are about to build: https://cc-content-app.vercel.app/
Let's dive into the docs and start building a content application!