Convert Figma to Next.js: Launch a Stunning NicheHunter PageConvert Figma to Next.js: Launch a Stunning NicheHunter Page
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
NicheHunter — Figma to Next.js Landing Page
Overview NicheHunter is an AI-powered product research platform for dropshippers and e-commerce marketers, scanning 500K+ Facebook and TikTok ads daily to surface winning products before they saturate the market. My task was to convert the Figma design into a fully functional Next.js landing page, building the front end from scratch.
My Role & Contributions ✅ Built a brand-new Next.js application from the ground up based on the provided Figma design ✅ Used ShadCN UI to implement clean, accessible, and consistent UI components (pricing cards, feature sections, FAQ accordion, etc.) ✅ Implemented an interactive testimonials carousel using React-Slick ✅ Set up authentication flow with NextAuth for user sign-up/login/reset ✅ Handled form validation using Zod and React Hook Form for the trial sign-up and lead capture flows ✅ Built out key sections: hero with product dashboard preview, feature highlights, social proof/testimonials, pricing tiers (Starter, Professional, Enterprise), and FAQ ✅ Ensured responsive design and smooth UX across all sections
Tech Stack Next.js · ShadCN UI · NextAuth · Zod · React Hook Form · React-Slick
Outcome A polished, conversion-focused landing page with a complete sign-up and authentication flow — translating the original design 1:1 into a fast, responsive, production-ready Next.js build. Live Preview: https://niche-hunter.vercel.app/
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started