FundMe - Decentralized Funding Platform

🛠 Foundry FundMe Smart Contract | 🌐 Live Demo | 📖 Documentation

FundMe is a modern, decentralized funding platform that empowers creators and innovators to receive funding directly from supporters through blockchain technology. Built on the Base mainnet, it provides a secure, transparent, and user-friendly way to fund projects without intermediaries.

📸 Screenshots

Main Dashboard

Funding Interface

✨ Features

🔗 Wallet Integration: Seamless connection with Ethereum wallets using RainbowKit and WalletConnect
📊 Real-time Analytics: View contract statistics, funding progress, and contributor data
💰 Secure Funding: Fund projects with ETH, tracked on the blockchain
👥 Contributor Tracking: Monitor your funding history and contributions
👑 Owner Dashboard: Project owners can manage funds and view detailed analytics
📱 Responsive Design: Beautiful, mobile-first UI with dark/light mode support
📈 Interactive Charts: Visualize funding data with Chart.js and Recharts
🔒 Smart Contract Integration: Direct interaction with audited smart contracts

🛠 Tech Stack

Frontend

React 18 - Modern UI library with hooks
TypeScript - Type-safe JavaScript
Vite - Fast build tool and dev server
Tailwind CSS - Utility-first CSS framework

Blockchain Integration

wagmi v2 - React hooks for Ethereum
viem - Low-level Ethereum library
RainbowKit v2 - Beautiful wallet connection UI
WalletConnect v2 - Cross-platform wallet connectivity protocol

UI/UX

shadcn/ui - High-quality React components
Framer Motion - Animation library
Chart.js & Recharts - Data visualization

Development Tools

ESLint - Code linting
Prettier - Code formatting
PostCSS - CSS processing

📋 Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v18 or higher) - Download here
pnpm (v8 or higher) - Install guide
Git - Download here
Ethereum Wallet (MetaMask, Coinbase Wallet, etc.)

🚀 Quick Start

Clone the repository

git clone https://github.com/John-Mukhwana/Foundry-FundMe-Reactjs-Typescript.git
cd Foundry-FundMe-Reactjs-Typescript

Install dependencies
```
pnpm install
```

Set up environment variables

cp .env.example .env
# Edit .env with your API keys

Start development server
```
pnpm run dev
```
Open your browser Navigate to http://localhost:5173

📦 Installation

Using pnpm (Recommended)

# Install dependencies
pnpm install

# Start development server
pnpm run dev

# Build for production
pnpm run build

# Preview production build
pnpm run preview

Using npm

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

🔧 Configuration

Environment Variables

Create a .env file in the root directory with the following variables:

# Required: Your Alchemy API key for Base network access
VITE_ALCHEMY_KEY=your_alchemy_api_key_here

# Required: WalletConnect Project ID for wallet connections
VITE_WALLETCONNECT_PROJECT_ID=your_walletconnect_project_id_here

# Required: Base mainnet RPC endpoint
VITE_BASE_RPC_URL=https://mainnet.base.org

Getting API Keys

Alchemy API Key:
- Visit Alchemy
- Create a free account
- Generate an API key for Base network
WalletConnect Project ID:
- Visit WalletConnect Cloud
- Create a new project
- Copy the Project ID

🔗 Wallet Connection Setup

This project uses RainbowKit v2 with WalletConnect v2 for seamless wallet integration. RainbowKit provides a beautiful, responsive wallet connection modal that supports multiple wallet types.

Supported Wallets

RainbowKit automatically detects and supports the following wallets:

MetaMask (Desktop & Mobile)
Coinbase Wallet
WalletConnect (Mobile wallets like Trust Wallet, Rainbow, etc.)
Injected wallets (Brave, Opera, etc.)
Ledger and Trezor hardware wallets

WalletConnect Configuration

The project is configured to use WalletConnect v2 with the following features:

Cross-platform compatibility: Connect mobile wallets to desktop dApps
Secure communication: End-to-end encrypted connections
Multi-chain support: Works with Base and other EVM networks
Session management: Persistent connections across browser sessions

Setting Up Wallet Connectors

The wallet configuration is handled in src/lib/wagmi.ts. Here's how RainbowKit is configured:

import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import { base } from 'wagmi/chains';

// RainbowKit configuration
const config = getDefaultConfig({
  appName: 'FundMe',
  projectId: import.meta.env.VITE_WALLETCONNECT_PROJECT_ID,
  chains: [base],
  ssr: false,
});

Key Configuration Options

appName: Your dApp's name displayed in wallet connection modals
projectId: Your WalletConnect Cloud project ID
chains: Array of supported blockchain networks (Base mainnet)
ssr: Disabled for client-side rendering

Customizing Wallet List

You can customize which wallets appear in the connection modal by modifying the configuration:

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import { metaMaskWallet, coinbaseWallet, walletConnectWallet } from '@rainbow-me/rainbowkit/wallets';

// Custom wallet list
const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [metaMaskWallet, coinbaseWallet],
  },
  {
    groupName: 'Others',
    wallets: [walletConnectWallet],
  },
], {
  appName: 'FundMe',
  projectId: import.meta.env.VITE_WALLETCONNECT_PROJECT_ID,
});

Testing Wallet Connections

To test wallet connections in development:

Start the development server: pnpm run dev
Click the "Connect Wallet" button
Try connecting with different wallet types
Test network switching to Base
Verify transaction signing and sending

Troubleshooting

Common Issues:

"Project ID not found": Ensure VITE_WALLETCONNECT_PROJECT_ID is set correctly
"Unsupported network": Make sure Base network is configured in your wallet
"Connection failed": Check your internet connection and try refreshing the page

Mobile Testing:

Use WalletConnect QR codes to test mobile wallet connections
Ensure your mobile wallet supports WalletConnect v2

📁 Project Structure

fundme-reactjs/
├── public/                 # Static assets
├── src/
│   ├── components/         # Reusable UI components
│   │   ├── ui/            # shadcn/ui components
│   │   └── ...            # Feature components
│   ├── hooks/             # Custom React hooks
│   ├── lib/               # Utility libraries
│   ├── pages/             # Page components
│   ├── utils/             # Helper functions
│   └── ...
├── .env.example           # Environment variables template
├── package.json           # Dependencies and scripts
├── tailwind.config.ts     # Tailwind CSS configuration
├── tsconfig.json          # TypeScript configuration
└── vite.config.ts         # Vite configuration

🏗 Development

Available Scripts

pnpm run dev - Start development server
pnpm run build - Build for production
pnpm run preview - Preview production build
pnpm run lint - Run ESLint

Code Style

This project uses ESLint and Prettier for code quality. Run pnpm run lint to check for issues.

Smart Contract Integration

The frontend interacts with the FundMe smart contract deployed on Base mainnet. Contract details:

Address: 0x5C6B1d462742AA58288F601E4722Df232682442b
Network: Base Mainnet (Chain ID: 8453)
Source: GitHub Repository

🚀 Deployment

Build for Production

# Build the application
pnpm run build

# The build artifacts will be stored in the `dist/` directory

Deploy to Vercel

Connect your GitHub repository to Vercel
Add environment variables in Vercel dashboard
Deploy automatically on push to main branch

Deploy to Netlify

Connect your GitHub repository to Netlify
Set build command: pnpm run build
Set publish directory: dist
Add environment variables
Deploy

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

How to Contribute

Fork the repository
Create a feature branch: git checkout -b feature/your-feature-name
Make your changes and commit: git commit -m 'Add some feature'
Push to the branch: git push origin feature/your-feature-name
Open a Pull Request

Development Guidelines

Follow the existing code style
Write clear, concise commit messages
Add tests for new features
Update documentation as needed
Ensure all tests pass before submitting PR

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙋‍♂️ Support

If you have any questions or need help:

📧 Email: [email protected]
💬 Discord: Join our community
🐛 Issues: GitHub Issues
📖 Documentation: Full Docs

🙏 Acknowledgments

Coinbase Base for the excellent Layer 2 network
RainbowKit for beautiful wallet connection UI
WalletConnect for cross-platform wallet connectivity
shadcn/ui for beautiful UI components
The Ethereum community for inspiration and tools

Built with ❤️ by CypherPulse.base.eth

Fund the future, one block at a time. 🚀

Name		Name	Last commit message	Last commit date
Latest commit History 28 Commits
public		public
src		src
.gitignore		.gitignore
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts

cypherpulse/Foundry-FundMe-Reactjs-Typescript

Folders and files

Latest commit

History

Repository files navigation