{"id":46009691,"url":"https://github.com/wintyx57/x402-frontend","last_synced_at":"2026-03-01T00:00:48.011Z","repository":{"id":338008210,"uuid":"1151719850","full_name":"Wintyx57/x402-frontend","owner":"Wintyx57","description":"React + TypeScript frontend for x402 Bazaar — API marketplace with wallet connect, dark mode, SEO, and real-time monitoring. Deployed on Vercel.","archived":false,"fork":false,"pushed_at":"2026-02-26T21:43:00.000Z","size":883,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-27T00:04:28.872Z","etag":null,"topics":["api-marketplace","rainbowkit","react","tailwindcss","typescript","vercel","vite","wagmi","web3","x402"],"latest_commit_sha":null,"homepage":"https://x402bazaar.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Wintyx57.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-06T20:17:10.000Z","updated_at":"2026-02-26T21:43:04.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Wintyx57/x402-frontend","commit_stats":null,"previous_names":["wintyx57/x402-frontend"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Wintyx57/x402-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wintyx57%2Fx402-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wintyx57%2Fx402-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wintyx57%2Fx402-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wintyx57%2Fx402-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wintyx57","download_url":"https://codeload.github.com/Wintyx57/x402-frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wintyx57%2Fx402-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29955885,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-28T22:53:01.873Z","status":"ssl_error","status_checked_at":"2026-02-28T22:52:50.699Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api-marketplace","rainbowkit","react","tailwindcss","typescript","vercel","vite","wagmi","web3","x402"],"created_at":"2026-03-01T00:00:38.421Z","updated_at":"2026-03-01T00:00:47.982Z","avatar_url":"https://github.com/Wintyx57.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ch1 align=\"center\"\u003ex402 Bazaar — Frontend\u003c/h1\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cstrong\u003eThe web interface for the API marketplace where AI agents pay with USDC, not API keys.\u003c/strong\u003e\n  \u003c/p\u003e\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://x402bazaar.org\"\u003e\u003cimg src=\"https://img.shields.io/badge/website-x402bazaar.org-blue?style=flat-square\" alt=\"Website\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/x402-bazaar\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/x402-bazaar?style=flat-square\u0026color=green\" alt=\"CLI\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-yellow?style=flat-square\" alt=\"License\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/Wintyx57/x402-frontend\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/Wintyx57/x402-frontend?style=flat-square\" alt=\"Stars\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://basescan.org\"\u003e\u003cimg src=\"https://img.shields.io/badge/chain-Base%20%2B%20SKALE-8b5cf6?style=flat-square\" alt=\"Chain\"\u003e\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg) ![TypeScript](https://img.shields.io/badge/TypeScript-5.9-3178C6) ![React](https://img.shields.io/badge/React-19-61DAFB) ![Vercel](https://img.shields.io/badge/deploy-Vercel-black) ![Website](https://img.shields.io/website?url=https%3A%2F%2Fx402bazaar.org)\n\n---\n\n## What is x402 Bazaar?\n\nx402 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).\n\n## Key Features\n\n- **Service Catalog** -- Browse, search, and filter 70+ API services with real-time data from the backend.\n- **Register Your API** -- Submit your own API service to the marketplace with an on-chain USDC payment.\n- **Wallet Connect** -- MetaMask and Coinbase Wallet via wagmi/viem with automatic Base network detection.\n- **MCP Installation Guide** -- Step-by-step setup for Claude Desktop, Cursor, VS Code, and Claude Code.\n- **Agent Integration Docs** -- Code examples in JavaScript and Python for building x402 agents.\n- **One-Line CLI** -- `npx x402-bazaar init` prominently featured for instant setup.\n- **Bilingual (EN/FR)** -- Full i18n with localStorage persistence and toggle in the navbar.\n- **Glassmorphism UI** -- Glass cards, glow effects, gradient buttons, animated hero, scroll reveal animations.\n- **Responsive** -- Mobile-first design with burger menu and compact wallet display.\n- **SEO Optimized** -- Meta tags, Open Graph, Twitter Cards, sitemap.xml, robots.txt, structured data.\n\n## Quick Start\n\n```bash\ngit clone https://github.com/Wintyx57/x402-frontend.git\ncd x402-frontend\nnpm install\ncp .env.example .env   # Set VITE_API_URL\nnpm run dev\n```\n\nOpen [http://localhost:5173](http://localhost:5173) in your browser.\n\n## Pages\n\n| Route | Page | Description |\n|-------|------|-------------|\n| `/` | Home | Hero with CLI one-liner, live stats, service categories, how-it-works flow |\n| `/services` | Services | Searchable service catalog with glass cards, sorting, x402 Native badges |\n| `/services/:id` | Service Detail | Individual service page with full description and reviews |\n| `/register` | Register | Service registration form with USDC payment flow |\n| `/developers` | Developers | API documentation, protocol reference, code examples |\n| `/integrate` | Integrate | Integration guides for MCP, ChatGPT, LangChain, and CLI |\n| `/mcp` | MCP | MCP server installation for Claude Desktop, Cursor, VS Code, Claude Code |\n| `/playground` | Playground | Interactive API playground to test endpoints live |\n| `/compare` | Compare | Side-by-side price comparison across services |\n| `/docs` | Docs | Full platform documentation |\n| `/status` | Status | Service uptime and health monitoring |\n| `/analytics` | Analytics | Public usage analytics and traffic stats |\n| `/budget` | Budget | Budget calculator for API cost planning |\n| `/faq` | FAQ | Frequently asked questions |\n| `/creators` | Creators | Guide and benefits for API creators/providers |\n| `/quickstart` | Quickstart | Quick start guide to integrate x402 in minutes |\n\n## Project Structure\n\n```\nsrc/\n  main.tsx                 Entry point (WagmiProvider, QueryClient, BrowserRouter, LanguageProvider)\n  App.tsx                  Route definitions\n  config.ts                API URL + USDC contract ABI\n  wagmi.ts                 Wallet config (Base + Base Sepolia, injected + coinbaseWallet)\n  index.css                Tailwind v4 + custom utilities (glass, glow, gradients, animations)\n\n  i18n/\n    translations.ts        EN + FR translation strings (~110 keys per language)\n    LanguageContext.tsx     React Context + useTranslation() hook + localStorage\n\n  components/\n    Navbar.tsx             Sticky glass navbar + 3 dropdowns + burger menu mobile + language toggle\n    ConnectButton.tsx      Wallet connect/disconnect + responsive compact mode\n    ServiceCard.tsx        Glass card with glow hover + x402 Native badge\n    CategoryIcon.tsx       Category icon mapper for service cards\n    LanguageToggle.tsx     FR/EN toggle pill\n    ScrollToTop.tsx        Scroll reset on route change\n\n  pages/\n    Home.tsx               Hero glow orbs, animated stats, categories, how-it-works\n    Services.tsx           Service grid + glass search input + skeleton loading\n    Register.tsx           Glass form + USDC payment flow + validation\n    Developers.tsx         API docs with scroll reveal + code examples\n    Integrate.tsx          Agent integration guide (JS + Python, use cases)\n    MCP.tsx                MCP server setup guide (CLI + manual accordion)\n    Playground.tsx         Interactive API playground\n    Compare.tsx            Side-by-side price comparison\n    Docs.tsx               Full platform documentation\n    Status.tsx             Service uptime monitoring\n    Analytics.tsx          Public usage analytics\n    Budget.tsx             Budget calculator\n    FAQ.tsx                Frequently asked questions\n    Creators.tsx           Guide for API providers\n    Quickstart.tsx         Quick start guide\n\n  hooks/\n    useReveal.ts           IntersectionObserver for scroll animations\n```\n\n## Tech Stack\n\n| Layer | Technology |\n|-------|-----------|\n| Framework | React 19 |\n| Build | Vite 7 |\n| Styling | Tailwind CSS v4 |\n| Wallet | wagmi + viem (Base chain) |\n| Routing | React Router v7 |\n| State | TanStack React Query |\n| i18n | Custom React Context (EN/FR) |\n| Deployment | Vercel (auto-deploy on push) |\n| Domain | x402bazaar.org (Namecheap + Vercel DNS) |\n\n## Environment Variables\n\n| Variable | Description |\n|----------|-------------|\n| `VITE_API_URL` | Backend API URL (default: `https://x402-api.onrender.com`) |\n| `VITE_NETWORK` | `mainnet` or `testnet` |\n\n## Scripts\n\n```bash\nnpm run dev       # Start dev server (localhost:5173)\nnpm run build     # Production build to dist/\nnpm run preview   # Preview production build locally\nnpm run lint      # Run ESLint\nnpm run test      # Run test suite (Vitest)\n```\n\n## Deployment\n\nThe frontend auto-deploys to Vercel on every push to `main`.\n\n- **Production URL:** [x402bazaar.org](https://x402bazaar.org)\n- **Vercel URL:** [x402-frontend-one.vercel.app](https://x402-frontend-one.vercel.app)\n- **DNS:** Namecheap A record -\u003e Vercel, SSL via Let's Encrypt\n\n## Contributing\n\nContributions are welcome. See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on how to get started, coding standards, and the pull request process.\n\n## Ecosystem\n\n| Repository | Description |\n|---|---|\n| **[x402-backend](https://github.com/Wintyx57/x402-backend)** | API server, 69 native endpoints, payment middleware, MCP server |\n| **[x402-frontend](https://github.com/Wintyx57/x402-frontend)** | React + TypeScript UI (this repo) |\n| **[x402-bazaar-cli](https://github.com/Wintyx57/x402-bazaar-cli)** | `npx x402-bazaar` -- CLI with 7 commands |\n| **[x402-sdk](https://github.com/Wintyx57/x402-sdk)** | TypeScript SDK for AI agents |\n| **[x402-langchain](https://github.com/Wintyx57/x402-langchain)** | Python LangChain tools |\n| **[x402-fast-monetization-template](https://github.com/Wintyx57/x402-fast-monetization-template)** | FastAPI template to monetize any Python function |\n\n**Live:** [x402bazaar.org](https://x402bazaar.org) | **API:** [x402-api.onrender.com](https://x402-api.onrender.com) | **CLI:** `npx x402-bazaar init`\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwintyx57%2Fx402-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwintyx57%2Fx402-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwintyx57%2Fx402-frontend/lists"}