Decentra Blog

elPoeta

Decentralize web 3 blog - solidity - hardahat - next js - typescript - tailwind css - ipfs - blockchain

Download

Decentra Blog

Table of Contents

About The Project
- Built With
Getting Started
Roadmap
License
Contact
Acknowledgments

About The Project

Web3 blog

Built With

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

Enviroment
- node https://nodejs.org/en/download/
Pacakage manager
- npm https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
  or
- yarn https://yarnpkg.com/cli/install
Browser
- Metamask extension https://metamask.io/

Installation

I will use yarn to install dependencies

Clone the repo

git clone https://github.com/elPoeta/decentra-blog.git

Install NPM packages
```
yarn install
```
Clean
```
yarn hardhat clean
```
Compile
```
yarn hardhat compile
```
Start local ethereum network
```
yarn hardhat node
```
Tests
```
yarn hardhat test
```

Steps

Frontend

Next js https://nextjs.org/docs/basic-features/typescript
```
yarn create next-app --typescript .
```

Tailwind css https://tailwindcss.com/docs/guides/nextjs

Install

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure Paths file.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add the Tailwind CSS directives ./styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Backend

Remove README.md
```
sudo rm -f README.md
```

Hardhat dev dependencies https://hardhat.org/hardhat-runner/docs/getting-started#overview

yarn add -D ts-node ethers hardhat hardhat-deploy /
@nomiclabs/hardhat-ethers dotenv typechain /
@typechain/hardhat @typechain/ethers-v5 @types/chai /
@openzeppelin/contracts

Hardhat config file hardhat.config.ts

import "hardhat-deploy";
import "@nomiclabs/hardhat-ethers";
import "@typechain/hardhat";
import { HardhatUserConfig } from "hardhat/config";

const config: HardhatUserConfig = {
  defaultNetwork: "hardhat",
  solidity: "0.8.9",
  networks: {
    hardhat: {
      chainId: 31337,
    },
    localhost: {
      chainId: 31337,
    },
  },
  namedAccounts: {
    deployer: 0,
  },
};

export default config;

Common

Typescript config file tsconfig.json

{
  "compilerOptions": {
    "target": "es2020",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "CommonJS",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"],
  "files": ["./hardhat.config.ts"]
}

Package config file package.json

{
  "name": "decentra-blog",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "deploy:local": "hardhat run --network localhost scripts/deploy.ts",
    "test": "yarn hardhat test",
    "compile": "yarn hardhat compile",
    "start:localNode": "yarn hardhat node",
    "clean": "yarn hardhat clean"
  },
  "dependencies": {
    "next": "12.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@nomiclabs/hardhat-ethers": "npm:hardhat-deploy-ethers@^0.3.0-beta.13",
    "@openzeppelin/contracts": "^4.7.2",
    "@typechain/ethers-v5": "^10.1.0",
    "@typechain/hardhat": "^6.1.2",
    "@types/chai": "^4.3.3",
    "@types/node": "18.6.5",
    "@types/react": "18.0.17",
    "@types/react-dom": "18.0.6",
    "autoprefixer": "^10.4.8",
    "dotenv": "^16.0.1",
    "eslint": "8.21.0",
    "eslint-config-next": "12.2.4",
    "ethers": "^5.6.9",
    "hardhat": "^2.10.1",
    "hardhat-deploy": "^0.11.12",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8",
    "ts-node": "^10.9.1",
    "typechain": "^8.1.0",
    "typescript": "4.7.4"
  }
}

(back to top)