Description

SIGMA allows creators to monetize their content feed. Microblogging like Twitter, but protected by a customizable paywall. Under the hood SIGMA uses the powerful technology stack of Streamr. ENS and IPFS supported. A content author publishes the content to their own Stream, created on Streamr. From the technical point of view, a user message consists of several properties and forms a data point, which is pushed to Streamr in real time. Streamr handles all of the data management and storage. SIGMA just uses this capability to make it easier for users to enter and consume the content. The paywall is a Streamr Product which itself is a wrapper for a Streamr Stream. In this way a Streamr Stream can be easy monetized. Setting the Product price is straightforward: Just define the price for the time of use. The subscriber pays this price to get and read the content in SIGMA. Decentralized finance made by Streamr. SIGMA Features: - Hand drafted application from scratch - Decentralized hosting on IPFS - Detection for user subscriptions - Real time publishing - PWA (Desktop Native App) - Text area auto resize - Text sanitizer - "More load" functionality - IPFS image hosting - Responsive layout - URL parsing - Light/Dark themes - ENS support - User avatars (ENS, Boring Avatars) SIGMA User Guide: https://github.com/translate3d/sigma/wiki/User-Guide SIGMA Wallpaper: https://ipfs.io/ipfs/QmPxDMqTYhpYbQLGJyvhwJTx8VWdVcWkKAg47K41ANydew

SIGMA showcase

How it's made

I wanted to build a social platform for Streamr a long time ago. "HackMoney 2021" came just at the right time. Since I had already developed several apps for the Streamr ecosystem, I knew all of Streamr's strengths and capabilities. I sat down and drew the technical roadmap to answer the following questions: - What needs to be done to detect all of a user's subscriptions? - How to ensure that SIGMA only displays compatible streams? - How to design the user interface so that it is easy to use? - How can the creator select the target stream where he will publish? - Does it make sense to provide a PWA (Native Desktop App)? - How should I integrate ENS into the application? - How and where to host decentralized? Technologies used by SIGMA: - Svelte: Reactive States - JavaScript/Typescript: App Core - CSS: App UI - Streamr: Streams & Products - ENS: Avatar, User Name, Domain - IPFS: User Images & App Hosting - Fleek: Builds & IPFS Pinning - GitHub: Repository & Wiki I was lucky, the gas prices were low, so I was able to try a lot with ENS, Fleek and Streamr to better understand how the services worked. And that was also the purpose of the hackathon. Please observe the project wiki for more detailed insides about the used technologies: - Streamr: https://github.com/translate3d/sigma/wiki/Streamr - IPFS: https://github.com/translate3d/sigma/wiki/IPFS - ENS: https://github.com/translate3d/sigma/wiki/ENS - Fleek: https://github.com/translate3d/sigma/wiki/Fleek

Technologies used

ENSFleekIPFSMetaMaskStreamr