DEV Community

Cover image for Learn and Earn: Learning Rewards Protocol
Block Experts
Block Experts

Posted on

Learn and Earn: Learning Rewards Protocol

This is a submission for the GitHub Copilot Challenge: New Beginnings

What I Built

For this challenge, I have built a Learning Rewards Protocol, which rewards users with a fungible token called Growth upon completing the reading of articles. While this concept can extend to gaming, courses, and other activities, this submission focuses specifically on rewarding users for reading articles.

The project is a full DApp (decentralized application) and includes the following components:

  • DApp: A user interface for reading articles.
  • Backend: Manages users, articles, and token distribution.
  • Token Creation: I used bulksendtokens.xyz to create the Growth token (an Ethereum ERC20 token) for the protocol.

Let's dive in!

  • The user should be connected using a wallet (e.g., MetaMask, Rainbow, Phantom, or any supported wallet).
  • The user reads an article, ensuring they spend the required minimum time on it. Once this time elapses, they can claim their rewards.
  • To claim rewards, the user must sign a challenge using their wallet to verify ownership of the address.
  • An API call is then made to verify the signature and the time spent reading the article.
  • After verification, the rewards are distributed. The user can then view and check their tokens on Ethereum, as demonstrated in the demo below.

Demo

Repo

Learning Rewards Protocol

Welcome to the Learning Rewards Protocol repository! This project is a Next.js-based application designed to serve as a blog where users can read about crypto token growth, engage with educational content, and participate in earning rewards.

Features

  • Educational Content: A rich collection of blogs focused on cryptocurrency and token growth strategies.
  • Token Rewards: Readers can earn rewards in crypto tokens for engaging with and completing specific activities.
  • Interactive UI: Powered by Next.js for fast, scalable, and SEO-friendly performance.
  • Dynamic Content: Easily update and manage blogs and rewards structure.

Getting Started

Follow these steps to set up and run the project locally.

Prerequisites

Ensure you have the following installed:

Installation

  1. Clone the repository:

    git clone https://github.com/your-username/Learning-Rewards-Protocol.git
    Enter fullscreen mode Exit fullscreen mode
  2. Navigate to the project directory:

    cd Learning-Rewards-Protocol
    Enter fullscreen mode Exit fullscreen mode
  3. Install dependencies:

    npm install
    # or
    yarn install
    Enter fullscreen mode Exit fullscreen mode

Environment Variables

Create a .env.local file in the root directory…

Copilot Experience

I used Copilot primarily for small tasks or areas where I lacked expertise. For example, it was my first time working with a Next.js backend API, so I asked Copilot how to set it up. It suggested some excellent options, including making API calls. However, it was slightly outdated in certain cases, especially when working with ethers.js. Copilot frequently recommended ethers.js v5, while I was using ethers.js v6. This meant I had to adapt its suggestions manually to align with the newer version.

Copilot’s ability to explain issues was outstanding. For instance, while integrating an API to call a rewards app for token distribution, I encountered a vague "Internal Server Error." Copilot helped clarify the issue, explaining that I was trying to call an API from a server-side page, which isn't allowed in Next.js. It highlighted that such calls must be made from a client-side component marked with 'use client'.

The chat-based editing experience was also great, though not without flaws. Copilot sometimes inserted code in awkward places, like adding import statements inside functions, which isn't ideal. Nonetheless, it was incredibly helpful overall, particularly for debugging and providing context around issues.

For the model switcher, I found GPT-4o excellent for general tasks and quick responses. For example, it was useful for prototyping or exploring how to structure a project. However, when I needed a deeper understanding of a complex topic, like the signature verification process, I used the o1 model. It provided a much clearer and more detailed explanation, which gave me a solid understanding of the topic and guided me in implementing it correctly.

While the response from o1 was very accurate and thorough, it required significantly more time to generate. This "thinking time" was noticeable, but the quality of the explanation justified the wait, especially for complex tasks where precision and depth are essential.

For instance, when I asked about signature verification, the o1 model broke down the process step by step, explaining how the signature is generated, verified, and what cryptographic concepts are involved. This level of detail helped me avoid common mistakes and ensured my implementation was robust.

Overall, I appreciated having the flexibility to switch between models based on my needs. GPT-4o helped me quickly prototype and tackle general challenges, while o1 excelled in areas requiring detailed reasoning and in-depth problem-solving.

GitHub Models

I used GPT-4o models to help me get started with Next.js. because i'm new to the framework, I turned to GPT-4o for suggestions and guidance on how to structure my Next.js project. The model provided valuable insights on setting up a basic application, including routing, API routes, and server-side rendering.

Models switcher

The model even walked me through configuring API routes and integrating them with frontend components, which helped me quickly understand how to work with both the client-side and server-side logic within the Next.js ecosystem.

Additionally, GPT-4 answered specific questions I had about Next.js, such as how to set up environment variables, how to manage static assets, and how to deploy the app to Vercel. It made the learning process much more efficient by giving me relevant examples and helping me overcome roadblocks.

Conclusion

The use of Copilot is really effective for small, specific, and clean tasks. It guides the developer through building, but it should be used with caution. While it can suggest helpful solutions, not all suggestions are accurate, and it may not always be up to date with the latest libraries. For example, in my experience with ethers.js and wagmi, all the suggestions were outdated. However, it still greatly improved the development process, and I found myself using Google less frequently while building. I recorded my last 24 hours of work and will try to publish it soon! :)

Top comments (2)

Collapse
 
ettaousy profile image
Zouhair

I love the idea to help users read more and more and discover the world of crypto

Collapse
 
steph_john_40744dd profile image
Steph John

Great article!