Buy Me A Coffee

Buy Me A Coffee

I built a Web 3.0 app on Ethereum where users can make crypto donations via Metamask on Goerli.

--- views
-

During the lockdown, the crypto world experienced a boom. As a tech enthusiast, I dedicated my time to learning about the technologies surrounding crypto. Along the way, I discovered Web 3.0.

Web 3.0 represents a decentralized version of the web, where data is not stored in a database on a central server but on a public network, also known as the blockchain. Ethereum is currently the most widely used Web 3.0 blockchain. To connect to the Web 3.0 Ethereum blockchain, a blockchain wallet connected to a browser is required. Metamask is a commonly used blockchain wallet for this purpose.

I developed a Web 3.0 application inspired by the "Buy Me A Coffee" concept. In this application, users can make donations using cryptocurrencies, primarily on the Ethereum blockchain. Before using such applications, users need to have Metamask installed, which allows them to connect to the blockchain network.

Homepage

templates

To use the web application, users are required to log in with their Metamask account on the Goerli network, where the application is currently hosted for testing purposes. Click on "Connect" in the top right corner to initiate the connection. Metamask will prompt users to enter their password.

On the homepage, users can view the most recent campaigns. Campaigns represent individuals or artists to whom users can donate Ethereum. Notably, the payment and images are hosted on the blockchain itself, utilizing the concept of Non-Fungible Tokens (NFTs). The images are hosted on the blockchain through a service called Pinata.

Campaign Creation

templates

To create a new campaign, click on the "Create" button in the top right corner. This leads to the create campaign page, where users can add a profile photo and banner photo, both hosted as NFTs on Pinata. Users can also create items (icons) representing donation options, such as coffee or breakfast items, each associated with a specific amount of Ethereum. The user can set the Ethereum amount, and the icons add a playful element. After adding details, click "Create Campaign" to complete the process.

Campaign Detail Page

templates

The campaign detail page displays information about a specific user's campaign. If you are the owner, an "Edit" button on the top left corner allows you to enter edit mode and apply changes.

On this page, users can choose to donate to the campaign by selecting items on the left, with the corresponding Ethereum and dollar amounts on the right. These conversion rates are fetched in real-time from an API. After selecting items, users can enter their name and a message before making a donation.

templates

To view donations and comments left by supporters, users can navigate to the "Supporters" tab in the top navigation. Campaign owners have the ability to reply to donations.

templates

Owners can extract the donated Ethereum by entering edit mode and using the "Extract" option at the bottom of the edit campaign page.

Despite its seemingly simple interface, the application involved complex programming logic, especially since the entire backend operates on the blockchain.

If you're interested in a more in-depth explanation of Web 3.0 or NFTs, let me know, and I can consider creating separate articles on those topics.