Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/reaperdragon/web3-twitter-clone
Built with Next Js, Hardhat, Solidity, IPFS, The Graph Protocol and Tailwind CSS.
https://github.com/reaperdragon/web3-twitter-clone
apolloclient dapps ethersjs gql graphql hardhat ipfs ipfs-client javascript metamask-wallet nextjs openzeppelin-contracts polygon react-icons reacthooks reactjs solidity tailwindcss thegraphprotocol typescript
Last synced: about 1 month ago
JSON representation
Built with Next Js, Hardhat, Solidity, IPFS, The Graph Protocol and Tailwind CSS.
- Host: GitHub
- URL: https://github.com/reaperdragon/web3-twitter-clone
- Owner: reaperdragon
- Created: 2022-09-16T04:33:17.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-10-11T13:44:45.000Z (over 2 years ago)
- Last Synced: 2024-08-20T15:01:23.753Z (5 months ago)
- Topics: apolloclient, dapps, ethersjs, gql, graphql, hardhat, ipfs, ipfs-client, javascript, metamask-wallet, nextjs, openzeppelin-contracts, polygon, react-icons, reacthooks, reactjs, solidity, tailwindcss, thegraphprotocol, typescript
- Language: JavaScript
- Homepage:
- Size: 521 KB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web 3 Twitter Clone
### Built with Next Js, Hardhat, Solidity, IPFS, The Graph Protocol and Tailwind CSS.
### Stack
- 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: [Chai](https://www.chaijs.com/)
- File Storage : [IPFS](https://ipfs.tech/)
- Network : [Polygon](https://polygon.technology/)
- Style : [Tailwind CSS](https://tailwindcss.com/)
- State management : [GraphQL Apollo Client](https://www.apollographql.com/)
- Icons : [React Icons](https://react-icons.github.io/react-icons/)
### 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/web3-twitter-clone
```
##### Setup
> Install npm dependencies using npm install
```shell
$ npm install && cd web3-twitter-clone && npm install
```
> Set up environment Variables I already Provided .env.example file.
> Create a .env file in the root directory.
> Set up required environment variables.
```
URL="POLYGON_TESTNET_URI"
PRIVATE_KEY="METAMASK_PRIVATE_KEY"
NEXT_PUBLIC_PROJECT_ID="PROJECT_ID"
NEXT_PUBLIC_PROJECT_SECRET="PROJECT_SECRET"
NEXT_PUBLIC_CONTRACT_ADDRESS="CONTRACT_ADDRESS"
NEXT_PUBLIC_GRAPHQL_URI="GRAPHQL_URI"
```
> 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
```
> 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_URL="GRAPHQL_URL"
```
Let's Run this command for dev
```shell
npm run dev
--or--
yarn dev
```
### Screenshots
#### Web
#### Responsive
