Decentragram

Welcome to Decentragram, a short post sharing platform like Instagram and Twitter. With Decentragram, you'll be able to stay up-to-date on the latest tech trends, news, and articles in a concise and easy-to-digest format.

One of the key benefits of Decentragram is its integration with the push protocol and subgraph, ensuring that you never miss a beat. Unlike traditional web2 apps, where you may not always be notified of new content(we saw that often with youtube) or where notifications can end up in your spam folder, Decentragram makes sure you always know when a new post has been published. No more manual newsletters to sift through, and no more missed updates.

In addition to its seamless notification system, Decentragram also comes with a built-in push chat for customer support. Whether you have a question, need assistance, or just want to say hello, dedicated support team will be there to help you out.

Features:

• New Post Notifications using Push Protocol(Real-time)
• Persisted Notifications using Push Protocol(Fetching from Push API)
• Subgraph for indexing and notifications delivery
• Customer Support Chat using Push Chat

Workflow Architecture:

Tech Stack

• Frontend: React.js, Antd
• Web3 Client: ethers.js
• Smartcontracts: Solidity, Hardhat
• Storage: IPFS, Pinata
• Notifications: Push Protocol
• Blockchain Network: Goerli
• Indexer: The Graph

Prerequisites

There are some optional prerequisites that you can skip and use my deployed resources instead.

1. Node.js Nodejs version 14.17.0 or higher.
2. Private key of an Ethereum account with some ETH/Matic in it. (Optional)
3. RPC endpoint of an Ethereum node of your choice. (Optional)
4. Metamask extension installed in your browser.
5. Pinata API keys.
6. The Graph Account. (Optional)

Deployed Resources:

• Decentragram App
• Decentragram Subgraph
• Decentragram Smartcontract
• Decentragram Push Channel(Staging) Address: 0xc2009D705d37A9341d6cD21439CF6B4780eaF2d7

Deploying Contract (Optional)

yarn install

yarn hardhat compile

yarn hardhat deploy --network testnet

# copy contract address deployed and paste it in client's .env file

Deploying Subgraph (Optional)

Note: Update the src/subgraph.yaml file with the contract address deployed in the previous step. Update deploy script with your own subgraph name. Note: Update subgraphID In src/mapping.ts file with your subgraph slug to deliver notifications to your channel.

cd indexer
yarn install
yarn codegen
yarn deploy

# copy subgraph url and paste it in client's .env file

Adding Subgraph details to the Push Channel

Create a new channel in the push protocol by following the instructions here. Add the subgraph details to the channel by following the instructions here.

### Running the client

> Copy the `.env.example` file to `.env` and fill in the required values.

```bash
cd client
yarn install
yarn dev

Demo

decentragramxpush01.mp4

Safety

This is experimental software and is provided on an "as is" and "as available" basis.

Decentragram is a proof of concept and is not ready for production use. It is not audited and has not been tested for security. Use at your own risk. I do not give any warranties and will not be liable for any loss incurred through any use of this codebase.