Environment Setup

In this section you will be setting up the necessary environment to create your first integration app with humanity protocol. This will be a web application where users can check the validity of their wallet addresses associated with their identity against the Humanity Protocol knowledge base through Humanity Protocol API.

Let’s first create the folder and basic structure of our project

mkdir hello-humanity && cd hello-humanity
echo "node_modules \n .env.local" >> .gitignore
echo "# hello-humanity" >> README.md
git init
touch package.json

Add the following content to your package.json

{
  "name": "hello-humanity",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@tanstack/react-query": "^5.62.15",
    "next": "14.2.5",
    "react": "^18.2.0",
    "react-confetti-boom": "^2.0.1",
    "react-dom": "^18.2.0",
    "react-hot-toast": "^2.5.1"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.47",
    "tailwindcss": "^3.4.14",
    "typescript": "^5"
  }
}

Install all the packages with npm i

Let’s create a next.config.mjs at the root of our project with the following content so we can work with svg files flawless:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    })
    return config
  },
}

export default nextConfig

Now for tailwind which is our styling solution let’s create a tailwind.config.js with the following content:

('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      maxWidth: {
        container: '68.375rem', // 1110px
      },
      fontFamily: {
        Inter: ['Inter', 'sans-serif'],
      },
      padding: {
        page: '2.760416667%',
      },
      colors: {
        primary: '#BA5400',
        primaryHover: '#F2A969',
        secondary: '#94F85F',
        secondaryHover: '#C3FBA5',
        background: '#EDFCEC',
        text: '#0F1514',
        neutral: '#EEEEEE',
      },
    },
  },
  plugins: [],
}

And a postcss.config.js with the following content:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Now let’s create the basic structure for our application.

Create a folder called app in the root of your project then inside that folder create a layout.tsx with the following contents:

import { Metadata } from 'next'
import '@/styles/globals.css'

export const metadata: Metadata = {
  title: 'hello-humanity',
  description: 'Humanity Protocol Hello World App',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Then create another file inside /app folder alongside layout.tsx called page.tsx and add the following content:

export default function Page() {
  return (
    <div className="h-screen w-full flex items-center align-center justify-center bg-[#EDFCEC]">
      <h1 className="text-[3rem] font-semibold text-[#0F1514]">
        Hello, Humanity
      </h1>
    </div>
  )
}

Finally let’s create a folder called styles inside our /app folder and let’s create a file called globals.css inside that new folder with the following content:

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

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

body {
  @apply min-h-screen font-Inter relative text-[#202537];
}

The structure of the our folder should look like this:

HELLO-HUMANITY
├── app
│   ├── styles
│   │   └── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── node_modules
├── .gitignore
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.js
├── README.md
└── tailwind.config.js

We are now ready to fire up our app by typing in our terminal npm run dev which may generate a couple of new files for us and you should see something like this when visiting http://localhost:3000/ .

Congrats!, you are now ready to build the app that will enable any person enrolled in Humanity protocol to prove their status.

PreviousPrerequisites NextHello Humanity

Last updated 6 days ago