InfoQuick links for Builders
NEW

CCIP is now live for all developers. See what's new.

Back to QuickStarts

Chainlink Demo App

Run the Chainlink Demo App locally to learn how to develop your own applications.

Overview

The Chainlink Demo App is an end-to-end implementation of several Chainlink services. It uses the Hardhat development environment and the Next.js frontend framework. This guide shows you how to deploy this app yourself and use it as a starting point for building your own decentralized applications.

Try out the demo at chainlink-demo.app.

See the code on GitHub.

Objective

This guide shows you how to deploy a demo app, which requires several steps common to Web3 apps. You will learn the basics of how to use the Hardhat development environment and the Next.js frontend framework.

Before you begin

Before you start this tutorial, complete the following items:

Steps to implement

1 Configure your local files

  1. Clone the repo and change directories:

    git clone https://github.com/smartcontractkit/chainlink-fullstack && cd chainlink-fullstack

  2. Initialize the submodule:

    git submodule init

  3. Update the submodule:

    git submodule update

  4. Install the dependencies:

    yarn install

  5. Start up the local Hardhat network and deploy all contracts:

    yarn chain

  6. In a second terminal start up the local development server run the front-end app:

    yarn dev

To interact with the local network, follow this step-by-step guide on how to use MetaMask with a Hardhat node.

If you've set the mnemonic from MetaMask the first 20 accounts will be funded with ETH.
2 Configure environment variables

  1. Use the .env.example file in the hardhat workspace. Copy it to new .env files and replace the values with the following values:

    • NETWORK_RPC_URL - An RPC is required to deploy to public networks. You can obtain one from Infura.
    • MNEMONIC - This is used to derive accounts from a wallet seed phrase from Metamask. The first account must have enough ETH to deploy the contracts as well as LINK which can be obtained from Chainlink's faucets.
    • PRIVATE_KEY - This is an alternative to using the mnemonic. Some changes are required in hardhat.config.js
    • ETHERSCAN_API_KEY - This can be obtained from an Etherscan account, and is used to verify your contract code on Etherscan.

  2. In the frontend workspace, configure a new .env file with the following value:

    • NEXT_PUBLIC_INFURA_KEY - Used for read-only mode and WalletConnect.
3 Deploy the contracts

  1. Before deploying the RandomSVG contract on a public network, you need to create and fund a VRF subscription.

  2. Set the ID of your VRF subscription in ./packages/hardhat/helper-hardhat-config.ts.

  3. Deploy on a public network:

    yarn deploy --network sepolia

  4. Confirm the contract onchain:

    npx hardhat verify --network <NETWORK> <CONTRACT_ADDRESS> <CONSTRUCTOR_PARAMETERS>

    example:

    npx hardhat verify --network sepolia 0x9279791897f112a41FfDa267ff7DbBC46b96c296 "0x9326BFA02ADD2366b30bacB125260Af641031331"
4 Run the example

Start the front end to test your deployed application.

  1. Change to the frontend directory.

    yarn start

  2. Navigate to the locally hosted web server to interact with the app.

When you are done, try making modifications to the code to improve it, redeploy the contract, and run the example again.

Examine the code

You can learn how the frontend works with deployed contracts by analyzing the code on GitHub.

Stay updated on the latest Chainlink news