Build a fullstack confesster dapp

Create an empty next app for the confessor dapp using the Next.js framework and React. Scaffold with the CLI, run the dev server, and explore routing and UI structure.

Install Chakra UI with npm, wrap components in the Chakra provider, and extend the theme to customize fonts and colors for light and dark modes in a React app.

Install and apply fonts for the startup UI using font source and open source fonts, install with npm, preview Google fonts like M Plus rounded, and import them for headings.

Create a responsive app layout for the fullstack confesster dapp by building a layout component with a logo, navigation links, and a color-mode aware header using box, flex, and stack.

Implement a responsive mobile menu with a hamburger toggle, icon button, and open/close state for small screens, including navigation links, dark theme toggle, and connect wallet button.

Connect wallet using Web3 model to authenticate users in your dapp, scan a QR code with Metamask, Coinbase, or other wallets, and configure via environment variables.

Learn to set up app routes with a layout and children prop, create folder-based pages like my confessions and coffees, and wire missing routes for a fullstack dapp.

Learn to build and customize a buy me a coffee widget for your fullstack dapp, including login, color options, Twitter integration, and embedding the generated code.

Install and set up Hart hardhat for smart contract development to test and deploy solidity contracts on a local network, using the Heartbeat for Solidity extension for editing and testing.

Learn how to use Hardhat to view tasks and global options, connect to networks, compile contracts into artifacts, run predefined and custom scripts, and deploy locally or to a network.

Develop a solidity smart contract named confessor, using OpenZeppelin counters, storing confession data with an ipfs hash, and emitting events for confession creation and coffee purchases.

Compile your smart contract to bytecode for the Ethereum Virtual Machine and generate the ABI, a JSON API, enabling your web app to call contract functions like create confession.

learn to test a smart contract locally using fixtures to deploy once, reuse setups, and verify confess and coffee features with assertions on counts, addresses, and emitted events.

Deploy the Confessor contract on the Ethereum goerli testnet using an rpc url from Alchemy, configure hardhat with env vars and deploy, obtaining the contract and owner addresses.

Verify your smart contract on Etherscan by configuring the API key and running the verify script, then explore read and write interactions on the test network.

Create a confession modal in a front-end that interacts with a smart contract, upload an audio confession to IPFS, and store it on the blockchain using the make confession function.

Learn how IPFS stores and retrieves audio recordings as a distributed, content-addressed system, using content identifiers (CID) to ensure integrity, enable peer sharing, and resist censorship in a decentralized dapp.

Use Web3 storage to store data on Ipfs with an api token, upload files, obtain content identifiers, and access data via Ipfs gateways on the public network.

Save audio to IPFS and store its content identifier hash in a fullstack confesster dapp smart contract; upload via Web3 storage, handle MetaMask, and post to the IPFS API.

Create a new confession by importing ethers, loading the confessor contract, uploading audio to IPFS, and submitting the transaction with user feedback via toasts.

Learn how the graph protocol indexes and queries blockchain data using subgraphs, manifests, events, and mapping handlers, enabling the dapp to fetch confession data via GraphQL.

Initialize and deploy a subgraph on Ethereum using the subgraph studio and hosted service, defining coffee and confession entities and their event handlers.

Explore querying blockchain with GraphQL in a playground and filter data by category. Set up an Apollo client with a URI and in-memory cache, then wrap your app with ApolloProvider.

Builds a front end display by implementing a get confessions query with variables, handling loading and error states, and rendering confession cards from GraphQL data.

Create a confession card component for a fullstack confesster dapp, rendering category, timestamp, and index on a gradient background, with ipfs audio and metamask integration.

Create a skeleton loading component for the confession card to improve UI during page refresh, using skeleton circles, stack, and box from Check UI.

Fix the responsive grid to show one column on small screens and two confession cards on larger screens, and add a fancy heading with section text for the confess feature.

Filter confessions by category in a fullstack confesster dapp using a filter component and an active tag, showing only items whose category matches the selected tag.

Edit the filter to show only confessions for the active wallet address, loading my confessions when a user connects a wallet and updating as different accounts switch.

Learn to add a buy me coffee icon to confession cards, show it only for confessions not owned by user, and handle purchases and listing with a React icon integration.

Create a buy coffee modal component with a focused input, message area, pink color scheme, and submit behavior triggering a smart contract function to buy coffee for an order address.

Implement the buy coffee feature by calling the contract’s buy coffee function and sending 0.00018 ether via MetaMask, with toast feedback and a subgraph update for coffee events.

Explore building the coffees query by wiring a coffee filter, fetching recent coffees, and displaying messages with buyer, order, and timestamp data in a fullstack confesster dapp.

Build blockchain dapps with the full stack, creating, testing, deploying, and verifying smart contracts on etherscan. Query data with the graph and call contract methods from your front end.