A real-time Web3 trading dashboard powered by the Bags.fm API on Solana.

• 🔴 Live Token Feed — Real-time token launches from Bags.fm, auto-refreshing every 15 seconds
• 📊 Trade Quotes — Instant swap quotes with price impact, slippage control, and route plans
• 🔍 Token Analytics — Lifetime fees, creator breakdown, claim stats per token
• 🌐 Swarm Visualization — Animated particle network background
• 🔑 API Key Manager — Secure browser-side key storage with live validation
• 📱 Responsive — Works on mobile, tablet, and desktop

• Next.js 14 (Pages Router)
• TypeScript
• Tailwind CSS
• Recharts (charts)
• Lucide React (icons)
• Bags.fm REST API

git clone https://github.com/YOUR_USERNAME/bags-swarm-model.git
cd bags-swarm-model

npm install

cp .env.example .env.local

Edit .env.local and add your Bags API key (optional — users can also enter it in the UI):

BAGS_API_KEY=your_bags_api_key_here

Get your API key at dev.bags.fm

npm run dev

Open http://localhost:3000 in your browser.

1. Go to github.com/new
2. Name it bags-swarm-model
3. Set it to Public (required for free Vercel hobby plan)
4. Do NOT initialize with README (your local repo already has one)
5. Click Create repository

In your project directory, run:

git init
git add .
git commit -m "feat: initial Bags Swarm Model dashboard"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/bags-swarm-model.git
git push -u origin main

Replace YOUR_USERNAME with your actual GitHub username.

1. Go to vercel.com and sign in (use GitHub OAuth)
2. Click "Add New → Project"
3. Click "Import" next to your bags-swarm-model repository
4. Vercel will auto-detect it as a Next.js project
5. Under Environment Variables, optionally add:
   • BAGS_API_KEY → your Bags API key
6. Click "Deploy"
7. Wait ~60 seconds — your app is live! 🎉

Your URL will be: https://bags-swarm-model.vercel.app

# Install Vercel CLI
npm i -g vercel

# Login
vercel login

# Deploy (from your project directory)
vercel

# Follow the prompts:
# - Set up and deploy? Y
# - Which scope? (your account)
# - Link to existing project? N
# - Project name: bags-swarm-model
# - In which directory is your code? ./
# - Override settings? N

# For production deploy:
vercel --prod

bags-swarm-model/
├── src/
│   ├── components/
│   │   ├── ApiKeyModal.tsx      # API key connect modal
│   │   ├── StatsBar.tsx         # Live stats overview cards
│   │   ├── SwarmBackground.tsx  # Animated particle canvas
│   │   ├── TokenCard.tsx        # Token feed card
│   │   ├── TokenDetailPanel.tsx # Token analytics panel
│   │   └── TradePanel.tsx       # Buy/Sell quote panel
│   ├── hooks/
│   │   └── useBags.ts           # React hooks for Bags API
│   ├── lib/
│   │   └── bags-api.ts          # Bags API client & types
│   ├── pages/
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   └── index.tsx            # Main dashboard page
│   └── styles/
│       └── globals.css
├── public/
│   └── favicon.svg
├── .env.example
├── .gitignore
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── tsconfig.json
└── vercel.json

Full API docs: docs.bags.fm

To enable actual on-chain trading, integrate a Solana wallet adapter:

npm install @solana/wallet-adapter-react @solana/wallet-adapter-wallets @solana/web3.js

Then call POST /trade/swap with the quote requestId and your wallet's public key to get a transaction, sign it with the wallet adapter, and submit via POST /solana/send-transaction.

MIT — build freely, trade responsibly.

Built with ❤️ using Bags.fm API · Powered by Solana