https://github.com/wintyx57/x402-frontend
React + TypeScript frontend for x402 Bazaar — API marketplace with wallet connect, dark mode, SEO, and real-time monitoring. Deployed on Vercel.
https://github.com/wintyx57/x402-frontend
api-marketplace rainbowkit react tailwindcss typescript vercel vite wagmi web3 x402
Last synced: 4 months ago
JSON representation
React + TypeScript frontend for x402 Bazaar — API marketplace with wallet connect, dark mode, SEO, and real-time monitoring. Deployed on Vercel.
- Host: GitHub
- URL: https://github.com/wintyx57/x402-frontend
- Owner: Wintyx57
- License: mit
- Created: 2026-02-06T20:17:10.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-02-26T21:43:00.000Z (4 months ago)
- Last Synced: 2026-02-27T00:04:28.872Z (4 months ago)
- Topics: api-marketplace, rainbowkit, react, tailwindcss, typescript, vercel, vite, wagmi, web3, x402
- Language: TypeScript
- Homepage: https://x402bazaar.org
- Size: 862 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
x402 Bazaar — Frontend
The web interface for the API marketplace where AI agents pay with USDC, not API keys.
    
---
## What is x402 Bazaar?
x402 Bazaar is an autonomous API marketplace built on the [HTTP 402 Payment Required](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/402) standard. Developers browse services, register their own APIs, and connect their wallets to pay in USDC -- all from a glassmorphism web interface with full bilingual support (English / French).
## Key Features
- **Service Catalog** -- Browse, search, and filter 70+ API services with real-time data from the backend.
- **Register Your API** -- Submit your own API service to the marketplace with an on-chain USDC payment.
- **Wallet Connect** -- MetaMask and Coinbase Wallet via wagmi/viem with automatic Base network detection.
- **MCP Installation Guide** -- Step-by-step setup for Claude Desktop, Cursor, VS Code, and Claude Code.
- **Agent Integration Docs** -- Code examples in JavaScript and Python for building x402 agents.
- **One-Line CLI** -- `npx x402-bazaar init` prominently featured for instant setup.
- **Bilingual (EN/FR)** -- Full i18n with localStorage persistence and toggle in the navbar.
- **Glassmorphism UI** -- Glass cards, glow effects, gradient buttons, animated hero, scroll reveal animations.
- **Responsive** -- Mobile-first design with burger menu and compact wallet display.
- **SEO Optimized** -- Meta tags, Open Graph, Twitter Cards, sitemap.xml, robots.txt, structured data.
## Quick Start
```bash
git clone https://github.com/Wintyx57/x402-frontend.git
cd x402-frontend
npm install
cp .env.example .env # Set VITE_API_URL
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) in your browser.
## Pages
| Route | Page | Description |
|-------|------|-------------|
| `/` | Home | Hero with CLI one-liner, live stats, service categories, how-it-works flow |
| `/services` | Services | Searchable service catalog with glass cards, sorting, x402 Native badges |
| `/services/:id` | Service Detail | Individual service page with full description and reviews |
| `/register` | Register | Service registration form with USDC payment flow |
| `/developers` | Developers | API documentation, protocol reference, code examples |
| `/integrate` | Integrate | Integration guides for MCP, ChatGPT, LangChain, and CLI |
| `/mcp` | MCP | MCP server installation for Claude Desktop, Cursor, VS Code, Claude Code |
| `/playground` | Playground | Interactive API playground to test endpoints live |
| `/compare` | Compare | Side-by-side price comparison across services |
| `/docs` | Docs | Full platform documentation |
| `/status` | Status | Service uptime and health monitoring |
| `/analytics` | Analytics | Public usage analytics and traffic stats |
| `/budget` | Budget | Budget calculator for API cost planning |
| `/faq` | FAQ | Frequently asked questions |
| `/creators` | Creators | Guide and benefits for API creators/providers |
| `/quickstart` | Quickstart | Quick start guide to integrate x402 in minutes |
## Project Structure
```
src/
main.tsx Entry point (WagmiProvider, QueryClient, BrowserRouter, LanguageProvider)
App.tsx Route definitions
config.ts API URL + USDC contract ABI
wagmi.ts Wallet config (Base + Base Sepolia, injected + coinbaseWallet)
index.css Tailwind v4 + custom utilities (glass, glow, gradients, animations)
i18n/
translations.ts EN + FR translation strings (~110 keys per language)
LanguageContext.tsx React Context + useTranslation() hook + localStorage
components/
Navbar.tsx Sticky glass navbar + 3 dropdowns + burger menu mobile + language toggle
ConnectButton.tsx Wallet connect/disconnect + responsive compact mode
ServiceCard.tsx Glass card with glow hover + x402 Native badge
CategoryIcon.tsx Category icon mapper for service cards
LanguageToggle.tsx FR/EN toggle pill
ScrollToTop.tsx Scroll reset on route change
pages/
Home.tsx Hero glow orbs, animated stats, categories, how-it-works
Services.tsx Service grid + glass search input + skeleton loading
Register.tsx Glass form + USDC payment flow + validation
Developers.tsx API docs with scroll reveal + code examples
Integrate.tsx Agent integration guide (JS + Python, use cases)
MCP.tsx MCP server setup guide (CLI + manual accordion)
Playground.tsx Interactive API playground
Compare.tsx Side-by-side price comparison
Docs.tsx Full platform documentation
Status.tsx Service uptime monitoring
Analytics.tsx Public usage analytics
Budget.tsx Budget calculator
FAQ.tsx Frequently asked questions
Creators.tsx Guide for API providers
Quickstart.tsx Quick start guide
hooks/
useReveal.ts IntersectionObserver for scroll animations
```
## Tech Stack
| Layer | Technology |
|-------|-----------|
| Framework | React 19 |
| Build | Vite 7 |
| Styling | Tailwind CSS v4 |
| Wallet | wagmi + viem (Base chain) |
| Routing | React Router v7 |
| State | TanStack React Query |
| i18n | Custom React Context (EN/FR) |
| Deployment | Vercel (auto-deploy on push) |
| Domain | x402bazaar.org (Namecheap + Vercel DNS) |
## Environment Variables
| Variable | Description |
|----------|-------------|
| `VITE_API_URL` | Backend API URL (default: `https://x402-api.onrender.com`) |
| `VITE_NETWORK` | `mainnet` or `testnet` |
## Scripts
```bash
npm run dev # Start dev server (localhost:5173)
npm run build # Production build to dist/
npm run preview # Preview production build locally
npm run lint # Run ESLint
npm run test # Run test suite (Vitest)
```
## Deployment
The frontend auto-deploys to Vercel on every push to `main`.
- **Production URL:** [x402bazaar.org](https://x402bazaar.org)
- **Vercel URL:** [x402-frontend-one.vercel.app](https://x402-frontend-one.vercel.app)
- **DNS:** Namecheap A record -> Vercel, SSL via Let's Encrypt
## Contributing
Contributions are welcome. See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on how to get started, coding standards, and the pull request process.
## Ecosystem
| Repository | Description |
|---|---|
| **[x402-backend](https://github.com/Wintyx57/x402-backend)** | API server, 69 native endpoints, payment middleware, MCP server |
| **[x402-frontend](https://github.com/Wintyx57/x402-frontend)** | React + TypeScript UI (this repo) |
| **[x402-bazaar-cli](https://github.com/Wintyx57/x402-bazaar-cli)** | `npx x402-bazaar` -- CLI with 7 commands |
| **[x402-sdk](https://github.com/Wintyx57/x402-sdk)** | TypeScript SDK for AI agents |
| **[x402-langchain](https://github.com/Wintyx57/x402-langchain)** | Python LangChain tools |
| **[x402-fast-monetization-template](https://github.com/Wintyx57/x402-fast-monetization-template)** | FastAPI template to monetize any Python function |
**Live:** [x402bazaar.org](https://x402bazaar.org) | **API:** [x402-api.onrender.com](https://x402-api.onrender.com) | **CLI:** `npx x402-bazaar init`
## License
MIT