🔥 create-fogo-app

The fastest way to build on Fogo Chain

Scaffold a production-ready Fogo dApp with Sessions SDK in seconds.

Quick Start • Features • Documentation • Examples

🚀 Quick Start

Get started with a single command:

npx create-fogo-app my-fogo-app

Then:

cd my-fogo-app
npm install
npm run dev

Open http://localhost:3000 and start building! 🎉

✨ Features

• ⚡ Zero-Config Setup - Start building immediately with sensible defaults
• 🔑 Fogo Sessions SDK - Gasless transactions pre-configured
• 💳 Wallet Integration - Phantom, Solflare, and all Solana wallets supported
• 🎨 Modern UI - Beautiful components with shadcn/ui + TailwindCSS
• 📝 TypeScript - Full type safety out of the box
• 🎯 Demo Included - Working SPL Memo transaction example
• 🌐 Next.js 14 - App Router, Server Components, and more
• 📱 Responsive - Mobile-first design that works everywhere

📦 What's Included

Your scaffolded project includes:

my-fogo-app/
├── app/
│   ├── layout.tsx          # Root layout with Fogo providers
│   ├── page.tsx            # Home page with demo
│   ├── providers.tsx       # Fogo Sessions + Wallet setup
│   └── globals.css         # Global styles
├── components/
│   ├── ui/                 # shadcn/ui components
│   ├── SessionButton.tsx   # Session management
│   └── MemoDemo.tsx        # SPL Memo demo
├── hooks/
│   └── useFogoSession.ts   # Custom session hook
├── lib/
│   └── utils.ts            # Utilities
├── .env.example            # Environment template
├── next.config.ts          # Next.js config
├── tailwind.config.ts      # Tailwind config
└── package.json

🎯 What You Get

1. Session Management

• One-click wallet connection
• Session key creation with scoped permissions
• Automatic session state management

2. Gasless Transactions

• No gas fees for users
• Paymaster integration ready
• Session keys sign transactions in background

3. Production-Ready Stack

• Next.js 14 with App Router
• TypeScript for type safety
• TailwindCSS for styling
• shadcn/ui for beautiful components
• Solana Web3.js integration

4. Working Demo

• SPL Memo transaction example
• "Say GM" button demonstrates gasless UX
• No wallet popup needed after session established

🛠️ Configuration

After creating your project, update .env with your paymaster details:

# Fogo RPC (Testnet by default)
NEXT_PUBLIC_FOGO_RPC_URL=https://testnet.fogo.io

# Paymaster Configuration
NEXT_PUBLIC_PAYMASTER_URL=https://paymaster.testnet.fogo.io
NEXT_PUBLIC_SPONSOR_PUBLIC_KEY=YourSponsorPublicKeyHere

Note: You need to set up a paymaster sponsor account. Visit Fogo Documentation for instructions.

📚 Documentation

How Fogo Sessions Work

1. User connects wallet (one-time)
2. App requests session with specific limits
3. User approves session creation
4. Session key signs transactions in background
5. Paymaster covers gas fees

Key Concepts

• Session Keys: Temporary keys with scoped permissions
• Paymaster: Covers transaction fees for users
• Gasless UX: No wallet popups or gas fees after session established

Learn More

• Fogo Chain Documentation
• Fogo Sessions SDK
• Next.js Documentation
• Solana Web3.js

🎨 Examples

Basic Usage

# Create a new project
npx create-fogo-app my-dapp

# With custom name
npx create-fogo-app awesome-fogo-project

User Flow in Your App

// 1. Connect wallet
<WalletMultiButton />;

// 2. Establish session
const { establishSession } = useFogoSession();
await establishSession();

// 3. Send gasless transaction
const { sendTransaction } = useFogoSession();
await sendTransaction(transaction); // No wallet popup!

🔧 Requirements

• Node.js 18 or higher
• npm, yarn, or pnpm
• A Solana wallet (Phantom, Solflare, etc.)

🚢 Deployment

Vercel (Recommended)

npx vercel

Make sure to add your environment variables in Vercel project settings.

Other Platforms

The scaffolded app is a standard Next.js application and can be deployed to:

• Netlify
• Railway
• AWS
• Any platform supporting Next.js

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

📄 License

MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Fogo Chain for the amazing Sessions SDK
• Next.js for the incredible framework
• shadcn/ui for beautiful components
• Solana for the underlying technology

� Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Fogo Discord: Join the community

Built with 🔥 by Rokan0-0

npm • GitHub