Full-Featured NFT Marketplace UI on Kadena
Overview
A comprehensive NFT marketplace web application built with Next.js and TypeScript, integrating the Kadena blockchain via pact-lang-api and WalletConnect. Across ~480 commits it grew into a full product surface, explore, launch, create, profile, activity, and settings, backed by Algolia search, GetStream activity feeds, Firebase, and Sentry.
The Challenge
A marketplace needs far more than a mint button: discovery and search, collection and launch pages, user profiles, real-time activity feeds, wallet connection, image cropping/upload, and dependable production monitoring, all wired to an on-chain Kadena/Pact backend.
What We Built
A Next.js (pages-router) app organised by feature area under src/pages (explore, create, launch, nft, user, activity, settings) with matching component groups (_HomePageComponents, _ExplorePageComponents, _NftPageComponents, etc.). It uses Mantine for the component system, React Hook Form + Zod for forms, Algolia (react-instantsearch-hooks) for search, GetStream (react-activity-feed) for activity, Firebase/firebase-admin for data and auth, WalletConnect (@walletconnect/sign-client, @web3modal/standalone) plus pact-lang-api for Kadena interaction, and Sentry across client/server/edge for observability.
Technologies & Approach
TypeScript + Next.js front to back, with Mantine and Tailwind for UI, Framer Motion and Rive for motion, and a rich integration layer (Algolia, GetStream, Firebase). Kadena’s Pact API and WalletConnect provide the on-chain bridge. Sentry and Vercel Analytics deliver production-grade monitoring.
Outcome / Impact
A mature, multi-year marketplace front end demonstrating the studio’s ability to ship a complete consumer Web3 product on Kadena, discovery, creation, social/activity, and wallet flows, with the search, observability, and UX polish expected of a live product.
Capabilities Demonstrated
- End-to-end NFT marketplace UX (explore, create, launch, profile, activity)
- Kadena/Pact on-chain integration via
pact-lang-api - WalletConnect / Web3Modal wallet flows
- Algolia search and GetStream social/activity feeds
- Production observability with Sentry and Vercel Analytics