Build a DeFi App with API

What You Will Build

A simple DeFi dashboard that displays token prices, allows swaps, and shows yield farming opportunities.

Prerequisites

• Node.js 18+
• API keys from Alchemy and CoinGecko
• MetaMask wallet
• Basic Solidity knowledge

Step-by-Step Guide

1. Set Up Project
   Initialize a React + Vite project:
npm create vite@latest defi-app -- --template react cd defi-app npm install viem @tanstack/react-query
2. Connect Wallet
   Use wagmi for wallet connection:
import { WagmiConfig, createConfig } from 'wagmi' import { mainnet } from 'wagmi/chains' const config = createConfig({ chains: [mainnet], transports: { [mainnet.id]: http() } })
3. Fetch Token Prices
   Use CoinGecko API:
const prices = await fetch( 'https://api.coingecko.com/api/v3/simple/price?ids=ethereum,usdc,usdt&vs_currencies=usd' ).then(r => r.json())
4. Implement Swap
   Integrate with Uniswap router:
// Token swap via Uniswap V3 const router = '0xE592427A0AEce92De3Edee1F18E0157C05861564' const params = { tokenIn: USDC, tokenOut: WETH, fee: 3000, recipient: walletAddress, deadline: Math.floor(Date.now() / 1000) + 60 * 10, amountIn: parseUnits('1000', 6), amountOutMinimum: 0 }
5. Display Portfolio
   Query token balances:
const balance = await client.readContract({ address: tokenAddress, abi: erc20ABI, functionName: 'balanceOf', args: [walletAddress] })

Popular DeFi Protocols

• Uniswap - DEX and swaps
• Aave - Lending and borrowing
• Yearn - Yield farming
• Curve - Stablecoin swaps