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

2. Install backend dependencies:

cd backend
npm install

3. Install frontend dependencies:

cd ../frontend
npm install

4. Set up environment variables for both frontend and backend

5. Start the backend server:

cd backend
npm start

6. 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

• Thirdweb for providing the Engine Cloud infrastructure
• Next.js for the frontend framework
• Express.js for the backend framework
• Tailwind CSS for styling
• TypeScript for type safety