Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/reaperdragon/decentragram
Decentragram is Decentralized Instagram, The Social Media You Deserve.📸
https://github.com/reaperdragon/decentragram
context-api dapps-development decentralized-social-networks ethereum ethereum-dapp hardhat instagram-clone nextjs smart-contracts social-media solidity tailwind tailwindcss thegraphprotocol typescript web3
Last synced: about 2 months ago
JSON representation
Decentragram is Decentralized Instagram, The Social Media You Deserve.📸
- Host: GitHub
- URL: https://github.com/reaperdragon/decentragram
- Owner: reaperdragon
- Created: 2023-02-13T05:31:39.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-13T14:01:05.000Z (almost 2 years ago)
- Last Synced: 2024-07-29T20:52:54.476Z (6 months ago)
- Topics: context-api, dapps-development, decentralized-social-networks, ethereum, ethereum-dapp, hardhat, instagram-clone, nextjs, smart-contracts, social-media, solidity, tailwind, tailwindcss, thegraphprotocol, typescript, web3
- Language: TypeScript
- Homepage:
- Size: 565 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Decentragram 
### Functionalities
- [x] Upload Posts
- [x] Search Post
- [x] Send Comments
- [x] Profile Posts
### Stack
- Language : [TypeScript](https://www.typescriptlang.org/)
- Frontend : [Next Js](https://nextjs.org/)
- Smart Contract Lang : [Solidity](https://docs.soliditylang.org/en/v0.8.17/)
- Indexing : [The Graph](https://thegraph.com/en/)
- Dev Environment for ETH Software: [Hardhat](https://hardhat.org/)
- Testing: [Chaijs](https://www.chaijs.com/)
- File Storage : [Arweave](https://www.arweave.org/)
- Scaling Permenant Storage - [Bundlr](https://bundlr.network/)
- Network : [Polygon Mumbai](https://polygon.technology/)
- Style : [Tailwind CSS](https://tailwindcss.com/)
- State management : [GraphQL Apollo Client](https://www.apollographql.com/)
- Toast: [React Toastify](https://fkhadra.github.io/react-toastify/introduction/)
- Fonts - [Google Fonts](https://fonts.google.com/)
- Icons : [Iconsax React](https://iconsax-react.pages.dev/)
- Design : [Figma](https://www.figma.com/)
### Installation
#### Fork The Repo
Click on the Right Side of the Top Bar to After the Watch button. 
Now It will be available in GitHub Account.
#### OR
#### Clone
- Clone this repo with url
```shell
git clone https://github.com/Aakrut/decentragram
```
##### Setup
> Install npm dependencies using npm install
```shell
cd decentragram && npm install
```
> Create a .env file in the root directory.
> Set up required environment variables.
```
URL="POLYGON_TESTNET_URI"
PRIVATE_KEY="METAMASK_PRIVATE_KEY"
```
> In the Root Directory First Compile Your Smart Contract with This Following Command.
```shell
npx hardhat compile
```
> After Deploy Smart Contract to the Polygon Mumbai Testnet with this command.
```shell
npx hardhat run scripts/deploy.js --network mumbai
```
> After move into client
```shell
cd client && npm install
```
> Create a .env file in the root directory.
> Set up required environment variables.
```
NEXT_PUBLIC_RPC_URL="POLYGON_TESTNET_URI"
NEXT_PUBLIC_CONTRACT_ADDRESS="CONTRACT_ADDRESS"
NEXT_PUBLIC_GRAPHQL_URI="GRAPHQL_URL"
```
> Copy Smart Contract Address and replace it in with your "CONTRACT_ADDRESS"
```
NEXT_PUBLIC_CONTRACT_ADDRESS="CONTRACT_ADDRESS"
```
## For Setting up Graph Protocol - [The Graph](https://thegraph.com/en/)
now replace the graph url with
```
NEXT_PUBLIC_GRAPHQL_URI="GRAPHQL_URL"
```
Let's Run this command for dev
```shell
# use npm if you prefer
$ npm run dev
# or yarn
$ yarn dev
```
### Screenshots
