This project is a web application built using React with Next.js, incorporating Web3 technology to create a decentralized platform for gifting coffee to the developer. Inspired by the concept of popular "buy me a coffee" websites, this application allows users to gift coffee to the developer using cryptocurrencies like Matic (MATIC). Users can input their name, a message, and choose the price of the coffee they want to gift. They need to connect their wallets to the application to complete the transaction.
web3BuymeAcoffee.mp4
- Gift Coffee: Users can input their name, a message, and select the price of the coffee they want to gift to the developer. Upon clicking the "Buy Me A Coffee" button, the transaction is executed through a Web3 contract.
- Dynamic Price Selection: Users can choose from different price options (1, 2, 5, or 10 Matics) for gifting coffee.
- Transaction Status Feedback: The application provides feedback to users on the status of their transactions, displaying messages indicating whether the transaction is being executed or has been confirmed.
- Coffee Gift List: The application displays a list of coffee gifts received by the developer, including the name of the sender, the message accompanying the gift, and the number of coffees gifted.
To run this application locally, follow these steps:
-
Clone this repository to your local machine.
-
Navigate to the project directory.
-
Install dependencies by running
npm install
oryarn install
. -
Start the development server by running
npm run dev
oryarn dev
. -
Open your web browser and go to http://localhost:3000 to view the application
Note in the root folder there is a env file, fill the variable named NEXT_PUBLIC_PROJECT_ID with token got from wallet.connect.com
- React: A JavaScript library for building user interfaces.
- Next.js: A React framework for building server-side rendered (SSR) and statically generated web applications.
- Wagmi: A library for interacting with Web3 contracts and accounts, providing hooks for reading and writing contract data.
Contributions to this project are welcome. You can contribute by submitting bug reports, feature requests, or pull requests. Make sure to follow the project's coding conventions and guidelines