Token Launchpad Web UI (Next.js)
A multi-chain token launchpad
Overview
The v2 web front-end for a multi-chain token launchpad, built with Next.js and TypeScript. It combines a polished marketing site with the interactive launchpad product surfaces, backed by a reusable component library and animation system.
The Challenge
A launchpad must present complex token sales, project listings and on-chain interactions in a way that feels fast, trustworthy and visually distinctive, while staying maintainable as projects and features evolve.
What We Built
A Next.js application organized under src/ into sections/ (homepage, layout, project, “stardust”), a shared component library (Tabs, Buttons, Switches, Carousel, Image, Text), Layout, pages, and utils/ with React context and custom hooks. The UI is composed with the Mantine component framework plus Tailwind CSS for styling, Framer Motion and react-fast-marquee for motion, react-countup for live stats, and TanStack React Query for data fetching and caching. SVGs are pipelined through @svgr/webpack.
Technologies & Approach
Next.js + TypeScript for a typed, SSR-capable app; Mantine and Tailwind for a consistent, themeable design system; Framer Motion for animation; React Query to manage server state cleanly. The clear section/component/utility separation keeps the codebase scalable.
Outcome / Impact
Delivered the customer-facing v2 launchpad experience, the primary surface users interact with for project discovery and participation, with a cohesive, animated, component-driven UI.
Capabilities Demonstrated
- Building production Web3 product UIs with Next.js and TypeScript
- Component-driven design systems using Mantine + Tailwind
- Rich motion and data-driven interfaces (Framer Motion, React Query)
- Structured, scalable front-end architecture (sections / components / hooks / context)