catkin network

Problem Statement

Catkin Network Dashboard is a full-featured Web3 admin panel that enables merchants to manage and sell products online while accepting crypto payments in a seamless, gasless, and cross-chain experience.Built with Next.js 14 and FastAPI, this platform empowers merchants to:🧾 Create, edit, and delete products via a modern UI💵 Set product prices in USD (not in tokens or cents)🔐 Authenticate securely using crypto wallets (WalletConnect + JWT)💱 Let users pay with any token on any supported chain via 1inch Fusion, ensuring MEV protection and zero gas fees for buyersAll product data is synced with a FastAPI backend, and payment details can be extended to support order tracking, delivery logic, or NFTs. The system is designed to be modular, developer-friendly, and customizable for both frontend and backend integrations.This is the merchant portal portion of the Catkin Network ecosystem – optimized for speed, developer ergonomics, and Web3-native commerce.

Solution

The Catkin Network Dashboard is built using a modern full-stack Web3 stack, combining the best of frontend performance, backend robustness, and decentralized infrastructure. Here's how all the pieces come together:🧩 Frontend Framework: Built with Next.js 14 using the App Router, offering server-side rendering and enhanced routing capabilities.UI/UX: Styled with Tailwind CSS and shadcn/ui, giving a clean and flexible design system.Web3 Integration:wagmi v2 + viem for Ethereum wallet interaction.WalletConnect used to trigger a login and sign-in flow.Once signed, a JWT token is stored in localStorage and used for authenticated API requests.Cross-chain Payments: Uses 1inch Fusion API to fetch swap quotes and simulate payments. It supports MEV protection and zero gas for the user.State Management: React’s built-in useState and useEffect handle most local state, with no external state library required.🖥️ Backend FastAPI (Python) powers the backend:Exposes RESTful endpoints like POST /product/product, PUT /product/product/{id}, and GET /product/my-products.JWT authentication is enforced for all product-related endpoints using a Bearer token.Products are stored with price in USD (integer) for backend consistency (e.g. 41 represents $41).Authentication Flow:The user signs a SIWE (Sign-In With Ethereum) message.The backend verifies the signature and issues a JWT token.This token is stored in localStorage and sent on every authorized request.⚙️ Hacky / Interesting Bits 💡 Instead of asking the user to select a token and network manually, we show a preview quote using 1inch Fusion — this makes payments feel smoother and chain-agnostic.🧪 During development, product management was simulated with useState, and later migrated to full FastAPI backend integration.🔒 Authentication leverages localStorage.setItem("token", "...") during development for quick testing.🤝 Partner Technologies 1inch Fusion enabled seamless cross-chain payments, abstracting complexity from the merchant and buyer.WalletConnect allowed for simple and secure Web3 logins.shadcn/ui helped accelerate frontend development with beautifully pre-styled components.