NicheHunter — Figma to Next.js by Syed Muhammad AliNicheHunter — Figma to Next.js by Syed Muhammad Ali

NicheHunter — Figma to Next.js

Syed Muhammad Ali

Syed Muhammad Ali

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/
Like this project

Posted Jun 23, 2026

NicheHunter — Figma to Next.js Landing Page Overview NicheHunter is an AI-powered product research platform for dropshippers and e-commerce marketers, scann...