catkin network

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 buyers

All 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.

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.