🚀 Why CrossFi AppKit?

CrossFi Appkit is a zero-config template for building decentralized applications on the CrossFi Chain. Designed for developers of all levels, it provides:

• Flexible Framework Choice: Start with React or Next.js (App Router)
• Pre-configured Tooling: Hardhat (Ethereum development environment), Ethers.js, and Tailwind CSS
• Africa-Focused: Optimized for cross-border DeFi applications and interoperability
• Production-Ready: Includes CI/CD templates, testing suites, and deployment scripts

✨ Features

• Smart Contract Development

  • Hardhat setup with TypeScript/JavaScript support
  • Sample ERC-20 token contract & tests
  • Preconfigured networks (CrossFi Testnet/Mainnet)

• Frontend Integration

  • Wallet connection templates (MetaMask, Rabby Wallet)
  • React/Next.js hooks for contract interaction
  • Responsive UI components with Tailwind CSS

• Deployment Tools

  • One-click Vercel deployment
  • Hardhat deployment scripts
  • Environment variable management

🛠️ Getting Started

Prerequisites

• Node.js ≥ v20
• npm ≥ v9 or Yarn ≥ v1.22
• Git ≥ v2.38

Installation

1. Create a new project (replace my-dapp with your project name):

   npx create-crossfi-appkit my-dapp

2. Choose your framework:

   ? Select your frontend framework: (Use arrow keys)
   ❯ React (Vite)
     Next.js (App Router)

3. Follow setup instructions:

   cd my-dapp
   npm install

4. Start developing:

   # Start frontend
   npm run dev
   
   # Compile contracts
   npx hardhat compile
   
   # Run tests
   npx hardhat test

📁 Project Structure

my-dapp/
├── contracts/           # Solidity smart contracts
├── scripts/             # Hardhat deployment scripts
├── test/                # Smart contract tests
│
├── frontend/            # React/Next.js frontend
│   ├── src/             # React components (React template)
│   ├── app/             # Next.js App Router (Next.js template)
│   ├── hooks/           # Web3 interaction hooks
│   └── styles/          # Tailwind CSS configuration
│
├── hardhat.config.js    # Hardhat configuration
└── package.json         # Unified dependencies

🔌 Supported Frameworks

| Framework | Features | | ----------- | ----------------------------------------------------------------- | | React | Vite setup, Wallet connection hooks, ERC-20 interaction examples | | Next.js | App Router support, Server Components for Web3, Optimized SSG/SEO |

🗺️ Roadmap

• [ ] Add Vue.js template support
• [ ] CrossFi Chain SDK integration
• [ ] Multi-sig wallet templates
• [ ] Gasless transaction examples

🤝 Contributing

We welcome contributions! Please see our Contribution Guidelines and:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📜 License

Distributed under the MIT License. See LICENSE for more information.

📞 Contact

CrossFi Appkit Team

• GitHub Issues: Report a Bug
• Telegram: Send A DM
• Email: [email protected]