How I Built My End-to-End Web3 dApp?

I’ll breakdown step-by-step how to build a decentralized subscription platform using Solidity, Next.js, Tailwind CSS, and deployed on Arbitrum Sepolia.

---

Idea!

The idea of enabling direct, recurring support for creators — without middlemen — inspired me to build CreatorPay, a decentralized subscription-based platform where users can support their favourite creators using on-chain payments.

This post walks you through how I built the entire stack of CreatorPay, from writing smart contracts in Solidity to deploying a sleek frontend with Next.js and Tailwind CSS. If you're looking to build your first full-stack dApp, this will give you a concrete example, including the tools, patterns, and decisions I made along the way.

---

CreatorPay?

CreatorPay is a decentralized application (dApp) that allows users to subscribe to creators and support them with recurring ETH payments. Everything is on-chain: creator registration, subscriptions, earnings tracking, and platform revenue sharing.

Key Features:

• On-chain subscription system using smart contracts

• Wallet connection with RainbowKit + Wagmi

• ETH-based recurring payments

• Revenue sharing between creator and platform

• UI with Tailwind CSS

• Role support: Creator, User (Subscriber), Admin

---

Tech Stack :)

Here’s what powers CreatorPay under the hood:

---

Building the Smart Contract (Solidity)

I started with a Solidity smart contract that handles creator registration, subscriber payments, and balance tracking. I deployed it on Arbitrum Sepolia testnet using Remix IDE for quick iteration and testing.

Contract Address:

CONTRACT_ADDRESS: 0xe893b73f1339C4F40747F660FC1188aA26976e5c

Roles Defined:

• Creators can register and earn from subscriptions.

• Users can subscribe and make recurring payments (renewal).

• Admin manages platform parameters and fees.

I ensured all state changes (like subscribing or registering) are validated via require checks, and used mappings to efficiently store balances and subscriptions.

---

Frontend: Next.js with App Router

I went with Next.js (App Router) for the frontend. It gave me server-side rendering, API routes, and an overall great developer experience.

The directory structure looks like this:

/app          - Page routes  
/components   - Reusable UI components   
/contracts    - Contract Solidity code
/lib          - ABI + contract address  
/public       - Static files  
/styles       - Tailwind config + globals

I integrated Tailwind CSS for fast, responsive UI development — using utility classes to handle layout, dark mode, spacing, and responsiveness.

---

Wallet Integration: Wagmi + RainbowKit

Wallet connection is a huge part of any dApp, so I used:

• RainbowKit for clean, theme-able wallet UIs

• Wagmi for interacting with the smart contract

const config = getDefaultConfig({
  appName: 'CreatorPay',
  projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
  chains: [arbitrumSepolia],
  ssr: true, 
});

This setup lets users connect MetaMask, Rainbowkit, and more — with automatic chain switching to Arbitrum Sepolia.

⚠️ Don’t forget to set up your .env.local file with your WalletConnect project ID!

---

Subscription Flow

Here’s a high-level overview of how the subscription system works:

1. Creator registers → stored on-chain

2. User connects wallet → chooses a creator → subscribes

3. ETH payment sent → smart contract splits it between platform & creator

4. Balances update → Creators can later withdraw earnings

I handle the platform fee logic inside the smart contract, splitting the ETH on every transaction.

---

Running It Locally

If you want to try it out locally:

git clone https://github.com/MadhuVarshaP/CreatorPay.git
cd CreatorPay
npm install
npm run dev

Open http://localhost:3000 in your browser. Make sure your wallet is connected to Arbitrum Sepolia.

And don’t forget to create a .env.local file with:

NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_walletconnect_project_id

---

Live Deployment and Demo

I deployed the app on Vercel, and it’s live here:
https://creator-pay-subscribe.vercel.app

Want a working demo:
https://youtu.be/wXk1opoHjF0

If you have questions or want to collaborate, feel free to reach out or fork the repo!

Thanks for reading!