BuyMeACoffee

screenshot of BuyMeACoffee
nextjs
chakra-ui

DApp that let's you buy me a coffee with crypto

Overview

Buy Me A Coffee DApp is a decentralized application that allows others to send coffee to the user using cryptocurrency. The DApp is built on the Mumbai network and has a verified smart contract. The front-end of the application is built using Chakra UI and Tailwind CSS, which has made the development process faster. The DApp includes features such as a landing page, a send coffee modal, displaying received coffees, and a withdraw funds modal.

Features

  • Landing Page: The DApp includes a landing page that allows users to connect their wallet using Rainbow Kit and showcases the purpose of the application.
  • Send Coffee Modal: Users have the option to send either a regular or large coffee using Chakra UI's Button Component. The form for sending coffee is created using Chakra UI's Modal and Form Components.
  • All Coffees Received: The DApp displays all the memos received using a Chakra UI template. The avatar images for each memo are stored on IPFS using Web3Storage.
  • Withdraw Funds Modal: The owner of the smart contract can withdraw their funds using a Chakra UI Button and Modal Components similar to the Send Coffee Modal. Only the owner has permission to withdraw funds.

Summary

The Buy Me A Coffee DApp is a decentralized application built on the Mumbai network. It allows users to send coffee to the owner using cryptocurrency. The DApp features a landing page, a send coffee modal, display of received coffees, and a withdraw funds modal. The front-end is built using Chakra UI and Tailwind CSS, which has made the development process faster. Future improvements include adding additional functionality, such as sorting received coffees and supporting multiple cryptocurrencies.

nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

chakra-ui
Chakra UI

Chakra UI is a popular open-source React component library that provides a set of accessible and customizable UI components to help developers create modern web applications.