DevToken - The Developer Currency

A web3 platform to be deployed on Polygon, where developers can earn coins based on their GitHub contributions. DevTokens can be used to unlock profile badges to traded with fellow developers, adding a fun and interactive layer to the coding experience.

Table of Contents

1. About The Project
   • Tech Stack
   • System Design Patterns and Implementations
2. Getting Started
   • Prerequisites
   • Installation
3. Contact
4. Acknowledgments

About The Project

(This project is still a WIP). Inspired by: GitHub Insights and BlockXism

Inspired by platforms that reward people for working productively (pomodoro like apps), I wanted to make a similar application for rewarding developer workflows.

DevToken is an application that tracks your contributions (commits, PRs, issues, comments) across different repositories and rewards you DevTokens based on your contributions. You can send DevTokens to other developers and buy profile items from the marketplace.

Users login using their GitHub profile via OAuth on the DevToken GitHub App. Users must also have the Metamask Wallet installed and connect to the application using Metamask.

(back to top)

Tech Stack

Frontend

• Codegen by The Guild

Backend

• Hardhat

Misc

System Design Patterns & Implementations

1. Classes and Dependency Injection with TypeGraphQL

• TypeGraphQL allowed me to use Object-Oriented Programming (OOP) principles, such as classes and decorators, to define GraphQL resolvers and object models without using GraphQL SDL.
• Services were created to abstract the business logic away from the resolver classes. These services were instantiated as singletons and injected into the corresponding resolver classes using Dependency Injection (DI).

2. Typescript Type Synchronization via Codegen

• GraphQL Codegen by The Guild was used to automatically synchronize Typescript types between the backend and frontend, ensuring consistent API return types. This eliminated manual type definition and reduced the risk of type mismatches between client and server.
• Apollo Client (frontend) and Apollo Server (backend) were used to handle data fetching and serving.

3. Prisma Object Relational Mapping (ORM) for PostgreSQL DB Interaction

• Prisma was used to define object models for the database (schema.prisma) and to perform database migrations.
• prisma generate updates the generated code with changes if your database schema changes - it will update node_modules/.prisma/client.

(back to top)

Getting Started

Prerequisites

This is a list of items that you need to have to run this project

• Node.js 20.16.0
• Docker

Installation

1. Install node packages on both the frontend and backend

   npm install

2. Create a .env file on the root directories of /backend and /frontend.

• Frontend:

  NEXT_PUBLIC_CONTRACT_ADDRESS="0x5FbDB2315678afecb367f032d93F642f64180aa3" 
  NEXT_PUBLIC_GITHUB_CLIENT_ID="<CLIENT ID HERE>"
  NEXT_PUBLIC_REDIRECT_URI="http://localhost:3000/redirect"
  NEXT_PUBLIC_BACKEND_URI="http://localhost:5000/"

• Backend:

  GITHUB_CLIENT_ID="<CLIENT ID HERE>"
  GITHUB_CLIENT_SECRET="<CLIENT SECRET HERE>"
  INFURA_PROJECT_KEY="<INFURA PROJECT KEY HERE>"
  WALLET_PRIVATE_KEY="<YOUR WALLET PRIVATE KEY HERE>"
  DATABASE_URL="postgresql://developer:backendPostgreSQL@localhost:5432/devtoken"

3. Run

   npm run dev
   docker compose up
   npm run hardhat-local
   npm run hardhat-deploy-local

   for the backend. Run npm run dev for the frontend and visit localhost:3000 for the frontend, and localhost:5000 for the backend Apollo explorer.

(back to top)

Contact

Feng Zhang - [email protected]

(back to top)