Code Monkey home page Code Monkey logo

clipit's Introduction

Clipit logo

Clipit is a platform for Twitch Streamers to earn additional revenue by rewarding their supporters with Clip NFTs.

Clipit started off as a project for me to play around and get some experience with Ethereum, Smart Contracts and Go, but with time we tried making it into a product and approached most of top 1000 English streamers to see if they'd be interested in something like this. TLDR: They were not.

Architecture

Clipit high level architecture

Smart Contracts

There are three main contracts:

  • Clipit.sol extension of ERC721 responsible for verifying sender signature (ownership of the Clip and Ethereum address) and minting the Clip NFTs
  • Market.sol responsible for Bids/Asks on Clip NFTs
  • AuctionHouse.sol responsible for running Auctions for Clip NFTs

Contracts were build on top of Zora Protocol with Hardhat.

Contracts documentation.

Indexer

The Indexer is an off chain storage and indexing of Ethereum Smart Contract Events/Logs. The Indexer is deployed as a Subgraph on TheGraph protocol and accessible via GraphQL API.

Backend service

Clipit backend API is build in Go deployed via Google Cloud. It consumes couple of third party APIs:

  • Twitch OAuth - to authenticate users calling the Clipit API
  • Twitch API to verify users ownership of the Clip and to download the Clip
  • IPFS via Pinata - to upload the Clip & generated Metadata

The Clipit API also generates cryptographic ECDSA signature which is used by the Clipit.sol to verify users Clip ownership and ETH address.

Servers documentation.

Clients

There are 3 frontend client modes:

All of the clients were build with React and deployed via Firebase.

1. App

App is the main frontend client, where users are able to:
  • Login with Twitch
  • Display their Twitch Clips
  • Mint Twitch Clip into NFT
  • Display owned Clip NFTs and their statis
  • Create Auctions for the Clip NFTs

Interaction with Ethereum is done via integration with Metamask Wallet. The App also reads contract data via GraphQL from the Indexer or directly from the Smart contracts, calls Twitch OAuth and APIs and reads Clips metadata via Pinata from IPFS.

App Marketplace

2. Demo Page

Demo Page is a basic "landing page" style client to collect interest about the platform. It could have been build as a static site, but it was not worth it to introduce another stack/app just for the existing purpose.

Demo page

3. Twitch Extension

Twitch Extension was build to allow one click generation of Clips into NFTs via Streamers "Stream Manager".

Clients documentation.

clipit_extension.mp4

Things to improve

There is a very long list of things that could be improved - from smarter build/deployment tooling on server, automation of ABI updates, through optimazing Contracts gas cost, better test coverage, metrics & tracing in server, broken/inconsistent desings/CSS, to better documentation and TODOs within the codebase there's certainly a lot of stuff that could be better.

Acknowledgements

A lot of open source work has been used in this project. Some notable mentions include Zora Protocol and Ardan Labs Starter code for web services.

Disclaimer

No Twitch Clips created by Twitch streamers were turned into NFTs on Ethereum mainnet.

clipit's People

Contributors

pav0l avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.