🚀 dApp Learning Platform

A comprehensive learning platform for university students to interact with smart contracts on the Polygon Amoy testnet. This project demonstrates real-world dApp development using modern Web3 technologies.

🌟 Features

• 🔗 Wallet Connection: Connect your MetaMask or other Web3 wallets
• 🌐 Network Management: Automatic detection and switching to Polygon Amoy testnet
• 📋 Contract Interaction: Read and write functions for smart contract testing
• 💰 Native Token Support: Send MATIC to smart contracts
• 📱 Responsive UI: Beautiful, modern interface built with Tailwind CSS
• 🎯 Student-Friendly: Clear explanations and learning resources

🛠️ Technologies Used

• Frontend: React 18, Tailwind CSS
• Web3: Wagmi, RainbowKit, Ethers.js
• Blockchain: Polygon Amoy Testnet
• Styling: Tailwind CSS with custom components

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher)
• npm or yarn
• MetaMask or another Web3 wallet
• Test MATIC tokens from the Polygon Faucet

🚀 Quick Start

1. Clone the Repository

git clone <repository-url>
cd Deploy-your-first-dApp-on-polygon

2. Install Dependencies

npm install

3. Environment Setup

Create a .env file in the root directory:

REACT_APP_ALCHEMY_ID=your_alchemy_api_key_here
REACT_APP_WALLETCONNECT_PROJECT_ID=your_walletconnect_project_id_here

Note: These are optional for development. The app will work with public providers.

4. Start the Development Server

npm start

The application will open in your browser at http://localhost:3000

🔧 Configuration

Network Configuration

The app is configured to work with:

• Polygon Mainnet (Chain ID: 137)
• Polygon Amoy Testnet (Chain ID: 80002) - Recommended for learning

Smart Contract

The default contract address is: 0xCa47923720D80da060a622e2C15DB3a1172f5dC4

You can change this in the UI to test with different contracts.

📚 How to Use

1. Connect Your Wallet

• Click the "Connect Wallet" button
• Choose your preferred wallet (MetaMask recommended)
• Approve the connection

2. Switch to Polygon Amoy Testnet

• The app will automatically detect your current network
• If you're not on Polygon Amoy, click "Switch to Amoy"
• Ensure you have test MATIC tokens

3. Test Smart Contract Functions

🔄 Change Contract Name

• Enter a new name in the input field
• Click "Change Name"
• Confirm the transaction in your wallet
• Watch the contract name update in real-time

💰 Send MATIC to Contract

• Enter the amount of MATIC to send
• Click "Send MATIC"
• Confirm the transaction
• Check the contract balance update

🔍 Get Public Data

• Enter an input parameter
• Click "Get Data"
• View the returned data

4. Monitor Transactions

• All transactions are displayed in real-time
• Use PolygonScan to view detailed transaction information
• Check your wallet for transaction confirmations

🎓 Learning Objectives

This platform helps you understand:

1. Web3 Wallet Integration: How to connect and interact with blockchain wallets
2. Smart Contract Interaction: Reading and writing to smart contracts
3. Network Management: Switching between different blockchain networks
4. Transaction Handling: Sending and monitoring their status
5. dApp Architecture: Building user-friendly interfaces for blockchain applications

🔍 Troubleshooting

Common Issues

"Network not supported"

• Ensure you're connected to Polygon Amoy testnet
• Use the "Switch to Amoy" button if needed

"Insufficient funds"

• Get test MATIC from the Polygon Faucet
• Wait for the tokens to arrive (usually instant)

"Contract not found"

• Verify the contract address is correct
• Ensure the contract is deployed on Polygon Amoy testnet

"Transaction failed"

• Check if you have enough MATIC for gas fees
• Verify the contract function parameters
• Check the transaction error on PolygonScan

Getting Help

• Check the browser console for error messages
• Use the learning resources section for additional help
• Refer to Polygon Documentation

🚀 Advanced Features

Custom Contract Integration

To test with your own smart contract:

1. Deploy your contract to Polygon Amoy testnet
2. Update the contract address in the UI
3. Ensure your contract has the same ABI structure or update the ABI.json file

Environment Variables

For production use, consider setting up:

• REACT_APP_ALCHEMY_ID: Your Alchemy API key for better performance
• REACT_APP_WALLETCONNECT_PROJECT_ID: Your WalletConnect project ID

📖 Additional Resources

• Polygon Documentation
• Wagmi Documentation
• RainbowKit Documentation
• Ethers.js Documentation
• React Documentation

🤝 Contributing

This is a learning platform. Feel free to:

• Report bugs
• Suggest improvements
• Add new features
• Improve the documentation

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Polygon team for the amazing blockchain infrastructure
• Wagmi and RainbowKit teams for the excellent Web3 tools
• The React and Tailwind CSS communities
• All contributors and students who use this platform

---

Happy Learning! 🎉

If you find this platform helpful, consider giving it a star ⭐ and sharing it with fellow students!