Build an RSVP Decentralized application on CELO: Backend and Subgraph

Build an RSVP Decentralized application on CELO: Backend and Subgraph
none 0.0 0

About the tutorial

In this tutorial, we shall be building an RSVP decentralized application (dApp) on CELO to organize the process of sending, receiving, and tracking RSVPs for events. One important use case for this is for large-scale events such as conferences and concerts where attendees are required to register and RSVP ahead so that organizers can manage their registrations and track their attendance.


Before you begin this tutorial, kindly ensure you have all the necessary tools installed. The following should be installed on your computer

  • Node.js
  • NPM (Node Package Manager)

Starter Guide

For a starter guide, you can check out the codebase here

I recommend you take a look at the env.sample file in the code as it gives you a hint of what should be in your environment variables

Celo Composer

Celo Composer is built on Celo to make it simple to build dApps using a variety of front-end frameworks, and libraries. For more information on how to start off your project with Celo Composer, visit here. Please keep in mind that these are the frameworks you should select while installing Celo Composer

  • React
  • Rainbow-kit celo
  • Hardhat
  • Subgraph

If you are stuck, kindly refer to the Celo Composer installation section of my previous tutorial here.

The tiny difference is that when asked if you need to use a subgraph, please choose yes

Smart Contract

Once your dApp is up, navigate to the packages>> hardhat >> contract folder and create an Rsvp.sol file and copy this starter code

// SPDX-License-Identifier: MIT

pragma solidity ^0.8.4;

contract RSVP {
    event NewEventCreated(
        bytes32 eventId,
        address creator,
        uint256 eventTime,
        uint256 capacity,
        uint256 depositAmount,
        string eventDataHash

    event NewRSVP(bytes32 eventId, address attendee);

    event AttendeeConfirmed(bytes32 eventId, address attendee);

    event DepositsPaidOut(bytes32 eventId);

    struct Event {
        bytes32 eventId;
        string eventDataHash;
        address eventOwner;
        uint256 eventTime;
        uint256 depositAmount;
        uint256 maxCapacity;
        address[] confirmedRSVPs;
        address[] claimedRSVPs;
        bool paidOut;

    mapping(bytes32 => Event) public events;

    function createNewEvent(
        uint256 eventTime,
        uint256 depositAmount,
        uint256 maxCapacity,
        string calldata eventDataHash
    ) external {
        // generate an event ID based on other variables to create a hash
        bytes32 eventId = keccak256(

        address[] memory confirmedRSVPs;
        address[] memory claimedRSVPs;

        // create a new Event struct and add it to the events mapping
        events[eventId] = Event(

        emit NewEventCreated(

    function createNewRSVP(bytes32 eventId) external payable {
        // look up the event
        Event storage myEvent = events[eventId];

        // transfer the deposit to our contract and require that enough ETH was sent
        require(msg.value == myEvent.depositAmount, "INSUFFICIENT FUNDS");

        // require that the event hasn't already happened
        require(block.timestamp <= myEvent.eventTime, "ALREADY HAPPENED");

        // make sure the event is under the maximum capacity
            myEvent.confirmedRSVPs.length < myEvent.maxCapacity,
            "EVENT AT CAPACITY"

        // require that msg.sender isn't already in myEvent.confirmedRSVPs
        for (uint8 i = 0; i < myEvent.confirmedRSVPs.length; i++) {
            require(myEvent.confirmedRSVPs[i] != msg.sender, "ALREADY RSVP'D");


        emit NewRSVP(eventId, msg.sender);

    function confirmAllAttendees(bytes32 eventId) external {
        // look up the event
        Event memory myEvent = events[eventId];

        // require that msg.sender is the owner of the event
        require(msg.sender == myEvent.eventOwner, "NOT AUTHORIZED");

        // confirm each attendee
        for (uint8 i = 0; i < myEvent.confirmedRSVPs.length; i++) {
            confirmAttendee(eventId, myEvent.confirmedRSVPs[i]);

    function confirmAttendee(bytes32 eventId, address attendee) public {
        // look up the event
        Event storage myEvent = events[eventId];

        // require that msg.sender is the owner of the event
        require(msg.sender == myEvent.eventOwner, "NOT AUTHORIZED");

        // require that attendee is in myEvent.confirmedRSVPs
        address rsvpConfirm;

        for (uint8 i = 0; i < myEvent.confirmedRSVPs.length; i++) {
            if (myEvent.confirmedRSVPs[i] == attendee) {
                rsvpConfirm = myEvent.confirmedRSVPs[i];

        require(rsvpConfirm == attendee, "NO RSVP TO CONFIRM");

        // require that attendee is NOT in the claimedRSVPs list
        for (uint8 i = 0; i < myEvent.claimedRSVPs.length; i++) {
            require(myEvent.claimedRSVPs[i] != attendee, "ALREADY CLAIMED");

        // require that deposits are not already claimed
        require(myEvent.paidOut == false, "ALREADY PAID OUT");

        // add them to the claimedRSVPs list

        // sending eth back to the staker
        (bool sent, ) ={value: myEvent.depositAmount}("");

        //if this fails
        if (!sent) {

        require(sent, "Failed to send Ether");

        emit AttendeeConfirmed(eventId, attendee);

    function withdrawUnclaimedDeposits(bytes32 eventId) external {
        // look up event
        Event memory myEvent = events[eventId];

        // check if already paid
        require(!myEvent.paidOut, "ALREADY PAID");

        // check if it's been 7 days past myEvent.eventTimestamp
        require(block.timestamp >= (myEvent.eventTime + 7 days), "TOO EARLY");

        // only the event owner can withdraw
        require(msg.sender == myEvent.eventOwner, "MUST BE EVENT OWNER");

        // calculate how many people didn't claim by comparing
        uint256 unclaimed = myEvent.confirmedRSVPs.length -

        uint256 payout = unclaimed * myEvent.depositAmount;

        // mark as paid before sending to avoid reentrancy attack
        myEvent.paidOut = true;

        // send the payout to the owner
        (bool sent, ) ={value: payout}("");

        // if this fails
        if (!sent) {
            myEvent.paidOut = false;

        require(sent, "Failed to send Ether");

        emit DepositsPaidOut(eventId);

This smart contract will allow event owners create events with a certain capacity (number of attendees) and deposit amount, Attendees will then RSVP to those events by sending that deposit amount.

Proceed to write your deployment scripts. Navigate to packages/hardhat/contracts. Firstly, you need to install hardhat. Run this command to do so

npm i hardhat && npx hardhat compile

Your final output should look like this

x Solidity files compiled

In the deploy folder, create a script file. You could name it deploy.js and write your deployment code. Your code might look similar to this

const hre = require("hardhat");

const main = async () => {
  const contractFactory = await hre.ethers.getContractFactory('RSVP');
  const contract = await contractFactory.deploy();
  await contract.deployed();
  console.log("Contract deployed to this address:", contract.address);

const runMain = async () => {
  try {
    await main();
  } catch (error) {


Go back to your terminal and run the following command

npx hardhat --network alfajores run deploy/deploy.js

Your output should look similar to this

Contract deployed to this address: 0xc85CA226772cA949801EfCA6B9d153fB4a833aF7

Finally, verify your contract address with this command

npx hardhat --network alfajores verify 0xc85CA226772cA949801EfCA6B9d153fB4a833aF7

This is what your output should look like after the verification

Nothing to compile
Successfully submitted source code for contract
contracts/Rsvp.sol:RSVP at 0xc85CA226772cA949801EfCA6B9d153fB4a833aF7
for verification on the block explorer. Waiting for verification result...

Successfully verified contract RSVP on Etherscan.

Note: You need to have an etherscan apikey for a successful verification. You can get your API key from etherscan. Just login and generate one. In your hardhatconfig, please check that you have this variable
etherscan: {
apiKey: {
alfajores: process.env.CELOSCAN_API_KEY,
celo: process.env.CELOSCAN_API_KEY,


If you aren’t familiar with what a subgraph is, it is a blockchain indexing tool built by The Graph. The good thing is that it is part of the tools that can be added when setting up using Celo Composer. You should have had that set up earlier. Visit the hosted service on the Graph to create a subgraph. Sign in with your Github account

Select My Dasboard and Add Subgraph

You will be asked to fill in some information about the subgraph. I named my subgraph RSVP

Then proceed to click on the Create button. Once that’s done, you will be give some command templates such as for initialization , building, code generation and authentication.

Navigate to the packages/subgraphs folder and run the initialize command from your subgraph account. For mine, this was my command

graph init --product hosted-service amoweolubusayo/rsvp

You should select ethereum

Also choose hosted service

You will also be asked which specific ethereum service you want to work with. Select celo-alfajores

After this, you will be asked for the contract address you want to index. Provide this in the terminal as well

And with this, you have initialize your subgraph project.

For a sneak peek of how a working folder should look like, check out RSVP-composer/packages/subgraphs at main · amoweolubusayo/RSVP-composer · GitHub. Do not copy any build or generated folders.

Still in the packages/subgraphs folder, make the following changes to the schema.graphql file. No worries if you don’t have it, create one in that root folder. For starters, you can use this code

type Event @entity {
  id: ID!
  eventId: Bytes!
  name: String
  description: String
  link: String
  imageURL: String
  creator: Bytes!
  eventTime: BigInt!
  maxCapacity: BigInt!
  depositAmount: BigInt!
  paidOut: Boolean!
  totalRSVPs: BigInt!
  totalConfirmedAttendees: BigInt!
  rsvps: [RSVP!] @derivedFrom(field: "event")
  confirmedAttendees: [Confirmation!] @derivedFrom(field: "event")

type Account @entity {
  id: ID!
  totalRSVPs: BigInt!
  totalAttendedEvents: BigInt!
  rsvps: [RSVP!] @derivedFrom(field: "attendee")
  attendedEvents: [Confirmation!] @derivedFrom(field: "attendee")

type RSVP @entity {
  id: ID!
  attendee: Account!
  event: Event!

type Confirmation @entity {
  id: ID!
  attendee: Account!
  event: Event!

In my own project, my smart contract’s abi was created in the abi/alfajores folder. If by any chance, yours didn’t get created at all in any folder, no need to panic, you can create any folder of your choice and create a file to hold the abi of your smart contract. So the file could be named RSVP.json . Go to your smart contract on alfajores explorer and copy the abi. The images below will guide you as to where to find that

Copy the contract abi to your RSVP.json file.

Also , we need to make changes to our subgraph.yaml file. Again, if you don’t have it for an reason, just create one in the root folder same place the schema.graphql file is. Mine looks like this so properly reference the folder/file where your abi is. For example, mine is in the abis/alfajores folder. Check your deployed smart contract in the explorer for the startBlock as well. You will find this in the transactions tab. Mine was created at 17702677

specVersion: 0.0.4
  - ipfsOnEthereumContracts
  file: ./schema.graphql
  - kind: ethereum
    name: RSVP
    network: celo-alfajores
      address: "0xc85CA226772cA949801EfCA6B9d153fB4a833aF7"
      abi: RSVP
      startBlock: 17702677
      kind: ethereum/events
      apiVersion: 0.0.6
      language: wasm/assemblyscript
        - Event
        - Account
        - RSVP
        - Confirmation
        - name: RSVP
          file: ./abis/alfajores/RSVP.json
        - event: AttendeeConfirmed(bytes32,address)
          handler: handleConfirmedAttendee
        - event: DepositsPaidOut(bytes32)
          handler: handleDepositsPaidOut
        - event: NewEventCreated(bytes32,address,uint256,uint256,uint256,string)
          handler: handleNewEventCreated
        - event: NewRSVP(bytes32,address)
          handler: handleNewRSVP
      file: ./src/mapping.ts

Proceed to run the code generation command. Run this command

graph codegen

It will create a generated folder and/ or a mapping file which we will be working with shortly.

Proceed to the src folder or the folder where your mapping file got created. You should find a code template with the handlers you have in your subgraph.yaml file as functions. You need to map out the data you want from the subgraph in this file. So this code is a very good starting point.

import { Address, ipfs, json } from "@graphprotocol/graph-ts";
import {
} from "../generated/RSVP/RSVP";
import { Account, RSVP, Confirmation, Event } from "../generated/schema";
import { integer } from "@protofire/subgraph-toolkit";

export function handleNewEventCreated(event: NewEventCreated): void {
  let newEvent = Event.load(event.params.eventId.toHex());
  if (newEvent == null) {
    newEvent = new Event(event.params.eventId.toHex());
    newEvent.eventID = event.params.eventId;
    newEvent.eventOwner = event.params.creator;
    newEvent.eventTimestamp = event.params.eventTime;
    newEvent.maxCapacity = event.params.capacity;
    newEvent.deposit = event.params.depositAmount;
    newEvent.paidOut = false;
    newEvent.totalRSVPs = integer.ZERO;
    newEvent.totalConfirmedAttendees = integer.ZERO;

    let metadata = + "/data.json");

    if (metadata) {
      const value = json.fromBytes(metadata).toObject();
      if (value) {
        const name = value.get("name");
        const description = value.get("description");
        const link = value.get("link");
        const imagePath = value.get("image");

        if (name) {
 = name.toString();

        if (description) {
          newEvent.description = description.toString();

        if (link) {
 = link.toString();

        if (imagePath) {
          const imageURL =
            "" +
            event.params.eventDataHash +
          newEvent.imageURL = imageURL;
        } else {
          const fallbackURL =
          newEvent.imageURL = fallbackURL;

function getOrCreateAccount(address: Address): Account {
  let account = Account.load(address.toHex());
  if (account == null) {
    account = new Account(address.toHex());
    account.totalRSVPs = integer.ZERO;
    account.totalAttendedEvents = integer.ZERO;;
  return account;

export function handleNewRSVP(event: NewRSVP): void {
  let id = event.params.eventId.toHex() + event.params.attendee.toHex();
  let newRSVP = RSVP.load(id);
  let account = getOrCreateAccount(event.params.attendee);
  let thisEvent = Event.load(event.params.eventId.toHex());
  if (newRSVP == null && thisEvent != null) {
    newRSVP = new RSVP(id);
    newRSVP.attendee =;
    newRSVP.event =;;
    thisEvent.totalRSVPs = integer.increment(thisEvent.totalRSVPs);;
    account.totalRSVPs = integer.increment(account.totalRSVPs);;

export function handleConfirmedAttendee(event: AttendeeConfirmed): void {
  let id = event.params.eventId.toHex() + event.params.attendee.toHex();
  let newConfirmation = Confirmation.load(id);
  let account = getOrCreateAccount(event.params.attendee);
  let thisEvent = Event.load(event.params.eventId.toHex());
  if (newConfirmation == null && thisEvent != null) {
    newConfirmation = new Confirmation(id);
    newConfirmation.attendee =;
    newConfirmation.event =;;
    thisEvent.totalConfirmedAttendees = integer.increment(
    account.totalAttendedEvents = integer.increment(

export function handleDepositsPaidOut(event: DepositsPaidOut): void {
  let thisEvent = Event.load(event.params.eventId.toHex());
  if (thisEvent) {
    thisEvent.paidOut = true;;

We introduced two new libraries here, so you can install them by running these commands

npm i @graphprotocol/graph-ts
npm i @protofire/subgraph-toolkit

This is all the code we need. So proceed to build and deploy

Run this command

graph build

Your output should look like this

Go back to your subgraph and pick your auth command, without it you won’t be able to deploy. Run the auth command

graph auth --product hosted-service YOUR_KEY

Expect this output

Finally, run the deploy command

graph deploy --product hosted-service amoweolubusayo/rsvp

Your output should look like this

Go back to your subgraph dashboard to see changes

We did it! You did it!


I am glad you made it this far with this tutorial! You were able to create smart contract, deploy and verify for our usecase. You also learnt how to create a subgraph , build and deploy as well! This doesn’t end here as I am sure you are interested in seeing how this works with a UI. In my next tutorial, I will teach you how to build a front-end interface that implements all we have learnt here.


I will be reviewing this.

1 Like

Approved @Kunaldawar

1 Like

Thank you! @Kunaldawar


An amazing content right here , very detailed.

1 Like

Great piece🙌

A nice tutorial I must say.

1 Like

Good work


Nice work, looking forward to this