/engine-cloud-nft-drop

Create your own backend NFT drops with Engine Cloud

Primary LanguageTypeScript

Engine Cloud NFT Drop

A full-stack NFT drop application using Thirdweb's Engine Cloud for automated NFT distribution. This project consists of a Next.js frontend with a beautiful UI for claiming NFTs and an Express.js backend that handles secure NFT distribution through Thirdweb's Engine Cloud.

Features

Frontend

  • Modern Next.js 13+ application with App Router
  • Beautiful UI with Tailwind CSS and responsive design
  • Wallet connection using Thirdweb's React hooks
  • Mobile-friendly QR code wallet connection
  • Real-time claim status updates
  • Blurred background effects and modern UI components

Backend

  • Express.js server with TypeScript
  • Secure NFT claiming through Thirdweb Engine Cloud
  • Server wallet management
  • Environment variable validation
  • Health check endpoint
  • CORS enabled for frontend integration

Prerequisites

  • Node.js (v16 or higher)
  • A Thirdweb account
  • Thirdweb Engine Cloud access
  • Deployed NFT contract on Arbitrum Sepolia testnet
  • Thirdweb Client ID

Environment Variables

Backend (.env)

THIRDWEB_SECRET_KEY=your_secret_key
THIRDWEB_SERVER_WALLET_ADDRESS=your_server_wallet_address
THIRDWEB_VAULT_ACCESS_TOKEN=your_vault_access_token
THIRDWEB_DEPLOYED_CONTRACT_ADDRESS=your_contract_address
PORT=3001

Frontend (.env.local)

NEXT_PUBLIC_TEMPLATE_CLIENT_ID=your_thirdweb_client_id

Installation

  1. Clone the repository:
git clone https://github.com/thirdweb-example/engine-cloud-nft-drop.git
cd engine-cloud-nft-drop
  1. Install backend dependencies:
cd backend
npm install
  1. Install frontend dependencies:
cd ../frontend
npm install

  1. Set up environment variables for both frontend and backend

  2. Start the backend server:

cd backend
npm start
  1. Start the frontend development server:
cd frontend
npm run dev

Project Structure

├── frontend/
│   ├── src/
│   │   ├── app/
│   │   │   ├── page.tsx          # Main NFT claim page
│   │   │   ├── layout.tsx        # Root layout
│   │   │   ├── client.ts         # Thirdweb client configuration
│   │   │   └── globals.css       # Global styles
│   │   └── ...
│   ├── public/                   # Static assets
│   └── package.json
├── backend/
│   ├── server.ts                 # Express server implementation
│   └── package.json
└── README.md

API Endpoints

Claim NFT

POST /claim
Content-Type: application/json

{
    "address": "recipient_wallet_address"
}

Response:

{
    "success": true,
    "transactionId": "transaction_id",
    "message": "NFT claim transaction has been initiated"
}

Health Check

GET /health

Response:

{
    "status": "healthy"
}

Frontend Features

  • Responsive design with mobile-first approach
  • Wallet connection with QR code support for mobile devices
  • Real-time transaction status updates
  • Beautiful UI with blur effects and animations
  • Error handling and user feedback
  • TypeScript for type safety

Backend Features

  • Server wallet management through Engine Cloud
  • Transaction preparation and queuing
  • Error handling and validation
  • Environment variable validation
  • CORS support for frontend integration

Security Considerations

  • All sensitive credentials are stored in environment variables
  • Server wallet is managed through Thirdweb's secure vault
  • Input validation for wallet addresses
  • Error handling for failed transactions
  • CORS configuration for secure frontend-backend communication

Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For support, please open an issue in the GitHub repository or contact Thirdweb support.

Acknowledgments