## My Learning Experience This Week at Blockfuse Labs

### *Frontend Integration (Wallet Connection & Smart Contract Interaction)*

This week at **Blockfuse Labs**, I explored how the **frontend connects with the blockchain** a key step in building real Web3 dApps. It was all about *frontend integration*, and I got hands-on experience with tools like **Wagmi**, **RainbowKit**, and **ABIs**.

### What I Learned

* **Connecting Wallets:**
I learned how to integrate wallet connection using **Wagmi** and **RainbowKit**. This allowed users to connect MetaMask or other wallets directly from the website.

* **Understanding ABIs:**
I understood that an **ABI (Application Binary Interface)** is what lets the frontend know how to talk to a smart contract defining the contract’s functions and data structure.

* **Interacting with Smart Contracts:**
Using the ABI, I practiced calling functions to **read and write data** to the blockchain straight from the frontend.

* **Frontend Tools and Frameworks:**
I worked with **Next.js** for the structure and **Tailwind CSS** for styling. Together with Wagmi and RainbowKit, I was able to build a smooth and beautiful Web3 experience.

### Tools I Used

* **Next.js** – Framework for building the frontend
* **Tailwind CSS** – For styling and responsiveness
* **Wagmi** – React hooks for blockchain interaction
* **RainbowKit** – For wallet connection UI
* **Viem** – For managing Ethereum requests under the hood

### My Reflection

This week helped me connect all the dots between smart contracts and the user interface. Seeing a wallet connect, fetching contract data, and sending transactions from the browser felt like pure magic .

### Conclusion

Frontend integration gave me a deep understanding of how **decentralized apps** really work. I’m now more confident in linking Web3 logic with modern frontend frameworks and I can’t wait to explore more advanced features next week!

---