NFT Ticketing in Solidity / Ethereum / Hardhat

#Solidity 💎 #Ethereum 🔗 #Hardhat ⚒️ #React ⚛️ #NFT 🖼️ #Web3 🌐

NFT Marketplace Event Ticketing on the Ethereum Blockchain

This NFT Ethereum Project is developed by Stephen Damian

Note: I developed the same project with Solana / Anchor

Summary

• Project Overview
• Roadmap
• Prerequisites
• Technologies
• Getting Started (Localnet)
• Transition: Localnet to Testnet
• Code Structure
• Various Documentations
• License

Roadmap

• ✅ MetaMask integration.
• ✅ Homepage.
• ✅ Create event.
• ⬜ Event listing.
• ⬜ Buy a ticket.
• ⬜ Generate NFTs.
• ⬜ Verify NFTs.
• ⬜ Integrate other wallets.
• ⬜ Event organizer dashboard.

Project Overview

NFT Marketplace Event Ticketing - A decentralized application for managing and verifying event tickets as NFTs on the Ethereum blockchain.

Status: Under development 🚧

See more images here: Images

Prerequisites

• Node.js >= 18 (last tested: 20) and npm (for the Front-End) - You can install Node.js and npm here: Node.js.

Technologies

• Back-End: Solidity 0.8.24, Ethereum, Hardhat 2.22.x
• Front-End: Next.js 14, React 18, TypeScript 5, Tailwind CSS
• Blockchain Interaction: Ethers.js
• Wallet Integration: MetaMask

Getting Started (Localnet)

Clone the Repository

git clone https://github.com/s-damian/hardhat-nft-ticketing.git

Go to the Hardhat Directory

cd /<your-path>/hardhat-nft-ticketing

Install Dependencies

For the Hardhat App:

npm install

For the Next.js App:

npm install --prefix ./frontend

Environment Setup

• Create a .env file (for the Hardhat App):

cp .env.example .env

• Create a ./frontend/.env file (for the Next.js App):

cp ./frontend/.env.example ./frontend/.env

Run Hardhat on Local Network

Start a local network with Hardhat:

npx hardhat node

Compile and Deploy

Compile contract(s):

npx hardhat compile

Deploy contract(s) on local network:

npx hardhat run scripts/deploy.ts --network localhost

In the terminal your EventManager Contract Address will be displayed.

Environment Variables - Contract Addresses

• In the ./frontend/.env of the Next.js App, you need to configure the following environment variable:

NEXT_PUBLIC_EVENT_MANAGER_CONTRACT_ADDRESS="<your-event-manager-contract-address>"

MetaMask Wallet

Configure your MetaMask for local development with Hardhat.

See how to configure MetaMask for local development here: MetaMask-for-Localnet.md

Run Front-End (Next.js App)

Go to the Next.js App Directory:

cd /<your-path>/hardhat-nft-ticketing/frontend

Start the development server:

npm run dev

Open your browser and go to:

http://localhost:3000

Transition: Localnet to Testnet

Preparing for Public Deployment: Transition from Localnet to Sepolia Testnet

After successfully running your project Locally, the next step is to deploy it to a public Testnet like Sepolia. This section guides you through the process of configuring your environment, deploying your smart contract(s) to the Testnet, and updating your Front-End to interact with the deployed contract(s) on the Testnet.

To switch from the Localnet to Testnet: Localnet-to-Testnet.md

Code Structure

.
├── contracts
│   └── [Smart contracts]
├── frontend
│   ├── app
│   │   └── [React pages]
│   ├── src
│   │   ├── components
│   │   │   └── [React components]
│   │   ├── handlers
│   │   │   └── [React handlers]
│   │   └── utils
│   │       └── [React utils]
│   ├── .env
│   ├── package.json
│   └── tailwind.config.ts
├── ignition
│   └── [Ignitions]
├── scripts
│   └── [Scripts]
├── tests
│   └── [Tests]
├── hardhat.config.ts
├── package.json
└── README.md

Various Documentations

• See how to configure MetaMask for local development here: MetaMask-for-Localnet.md

• To switch from the Localnet to Testnet (Sepolia): Localnet-to-Testnet.md

• See further technical details here: Notes-tech

License

This project is licensed under the MIT License. See the LICENSE file for more details.