Build a full Dapp: Learning Rewards Protocol(Learn and Earn)

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 [Provide a link to your app here] Repo dawar2151 / Learning-Rewards-Protocol 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: Node.js (v16 or higher) npm or Yarn Installation Clone the repository: git clone https://github.com/your-username/Learning-Rewards-Protocol.git Navigate to the project directory: cd Learning-Rewards-Protocol Install dependencies: npm install # or yarn install Environment Variables Create a .env.local file in the root directory… View on GitHub 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. GitHub Models I used GPT-4o models to help me get started with Next.js. When I was 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. It also recommended best practices, such as using getStaticProps and getServerSideProps for data fetching, and outlined how to handle dynamic pages with Next.js. 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. Conclusio

Jan 18, 2025 - 19:41

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

[Provide a link to your app here]

Repo

dawar2151 / Learning-Rewards-Protocol

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:

Node.js (v16 or higher)
npm or Yarn

Installation

Clone the repository:

git clone https://github.com/your-username/Learning-Rewards-Protocol.git

Navigate to the project directory:
```
cd Learning-Rewards-Protocol
```
Install dependencies:
```
npm install
# or
yarn install
```

Environment Variables

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

View on GitHub

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.

GitHub Models

I used GPT-4o models to help me get started with Next.js. When I was 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.

It also recommended best practices, such as using getStaticProps and getServerSideProps for data fetching, and outlined how to handle dynamic pages with Next.js. 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! :)