A decentralized application where users can buy coffee with cryptocurrency. Built with TypeScript, Viem, and Wagmi for seamless Ethereum integration.
Live URL: https://html-ts-coffee.vercel.app/
- ☕ Buy Coffee: Send ETH to purchase coffee from your favorite coffee shops
- 📊 Check Your Contribution: View how much you've spent on coffee
- 👤 View Your Balance: Check your current ETH balance
- 🔐 Owner-Only Withdrawals: Only the contract deployer can withdraw funds
- 📈 Real-time Updates: Live updates of total sales and user contributions
- 🌐 Multi-Wallet Support: Connect with MetaMask, Coinbase Wallet, WalletConnect, etc.
- 🎨 Modern UI: Clean, coffee-themed interface with smooth animations
- 📱 Responsive Design: Works on desktop and mobile devices
- 🔍 Transaction History: View your past coffee purchases
- ⚡ Fast Transactions: Optimized for quick blockchain interactions
- 🔔 Transaction Notifications: Real-time feedback on purchases
- TypeScript - Type-safe JavaScript
- Vite - Fast build tool and dev server
- Viem - Lightweight Ethereum interface
- Wagmi - React hooks for Ethereum
- RainbowKit - Wallet connection management
- Tailwind CSS - Utility-first styling
- Solidity - Smart contract language
- Vercel - Frontend hosting
HTML-TS-COFFEE/ ├── src/ │ ├── App.tsx # Main application component │ ├── main.tsx # Application entry point │ ├── App.css # Global styles │ └── index.css # Additional styles ├── public/ │ └── index.html # HTML template ├── package.json ├── tsconfig.json ├── vite.config.ts ├── tailwind.config.js └── README.md # This file
- Node.js 18+
- npm or yarn
- MetaMask or another Web3 wallet
# Clone the repository
git clone https://github.com/AkotaGreat/HTML-TS-COFFEE.git
cd HTML-TS-COFFEE
# Install dependencies
pnpm install
# Start development server
pnpm run dev
🔧 How to Use
Connect Your Wallet
Click "Connect Wallet" button
Choose your preferred wallet (MetaMask recommended)
Connect to the desired network
Buy Coffee
Enter the amount of ETH you want to spend
Click "Buy Coffee"
Confirm the transaction in your wallet
Check Your Stats
View your total coffee purchases
Check your ETH balance
Monitor recent transactions
📦 Deployment
The application is automatically deployed to Vercel when changes are pushed to the main branch.
Manual Deployment
Build the project:
bash
npm run build
Deploy the dist folder to your preferred hosting service.
🧪 Testing
Connect to a test network
Get test ETH from a faucet
Test the purchase functionality
Verify balance updates correctly
🔒 Security Notes
Only the contract owner can withdraw funds
All transactions are recorded on the blockchain
Never share your private keys
Always verify transactions before confirming
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request
📄 License
This project is licensed under the MIT License.
👤 Author
AkotaGreat
GitHub: @AkotaGreat
Live Demo: https://html-ts-coffee.vercel.app/
🙏 Acknowledgments
Viem and Wagmi teams for excellent Ethereum tooling
RainbowKit for seamless wallet connections
Vite for fast development experience
All coffee lovers who inspired this project!
Built with ❤️ and ☕ by AkotaGreat