Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/reaperdragon/web3-octo
Web 3 Octo is Decentralize blog app Built with Next Js, Hardhat, Solidity, Arweave, Bundlr, The Graph Protocol and All the css magic with Tailwind CSS.
https://github.com/reaperdragon/web3-octo
apollo-client arweave blockchain bundlr chai ethereum etherjs graphql hardhat javascript nextjs openzeppelin-contracts react-hooks react-markdown reactjs solidity tailwindcss thegraphprotocol typescript web3
Last synced: 29 days ago
JSON representation
Web 3 Octo is Decentralize blog app Built with Next Js, Hardhat, Solidity, Arweave, Bundlr, The Graph Protocol and All the css magic with Tailwind CSS.
- Host: GitHub
- URL: https://github.com/reaperdragon/web3-octo
- Owner: reaperdragon
- Created: 2022-09-28T14:08:38.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-02T13:37:50.000Z (about 2 years ago)
- Last Synced: 2024-07-29T20:52:59.886Z (6 months ago)
- Topics: apollo-client, arweave, blockchain, bundlr, chai, ethereum, etherjs, graphql, hardhat, javascript, nextjs, openzeppelin-contracts, react-hooks, react-markdown, reactjs, solidity, tailwindcss, thegraphprotocol, typescript, web3
- Language: JavaScript
- Homepage:
- Size: 1.61 MB
- Stars: 2
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web 3 Octo 🐙
### Functionalities
- [x] Publish Blog
- [x] Update Blog
- [x] Search Blogs
- [x] Related Blogs
### 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 : [Arweave](https://www.arweave.org/)
- Scaling Permenant Storage - [Bundlr](https://bundlr.network/)
- Network : [Polygon](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/)
- Editor: [React SimpleMDE Markdown Editor](https://github.com/RIP21/react-simplemde-editor)
- Markdown Preview - [React Markdown](https://remarkjs.github.io/react-markdown/)
- Icons : [Iconsax React](https://iconsax-react.pages.dev/)
### 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-octo
```
##### Setup
> Install npm dependencies using npm install
```shell
cd web3-octo && 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_RPC_URL="POLYGON_TESTNET_URI"
NEXT_PUBLIC_CONTRACT_ADDRESS="CONTRACT_ADDRESS"
NEXT_PUBLIC_GRAPHQL_URL="GRAPHQL_URL"
```
> 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
