Syed Muhammad Ali's Work | ContraWork by Syed Muhammad AliSyed Muhammad Ali
I specialize in SaaS dashboards and marketing websites
Pulse — Talking SaaS Analytics Dashboard English Companion — Real-Time Voice AI for Speaking Practice 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/ NoizInvest — Figma-to-Code Redesign & Rebuild
Overview
NoizInvest is a platform that lets everyday investors build and manage automated crypto portfolios by securely connecting their exchange accounts. My task was to replace the platform's existing design with a brand-new Figma design and rebuild the entire front end from scratch — fully responsive across all devices.
My Role & Contributions
✅ Converted high-fidelity Figma designs into a pixel-perfect, fully responsive Next.js application
✅ Built smooth scroll-based animations and transitions using Framer Motion to bring the design to life (hero sections, step-by-step "How It Works" flow, feature reveals)
✅ Implemented an interactive carousel with React-Slick for showcasing reviews
✅ Integrated Chart.js to display portfolio analytics and performance data in a clean, readable format
✅ Set up Nodemailer to handle contact/interest form submissions and email delivery
✅ Styled the entire UI with Tailwind CSS, ensuring consistent spacing, typography, and responsiveness across breakpoints
✅ Structured reusable components for sections like security features, testimonials, supported exchanges, and pricing
Tech Stack
Next.js · Tailwind CSS · Framer Motion · Chart.js · React-Slick · Nodemailer
Outcome
A fully redesigned, production-ready marketing site with smooth animations, interactive data visualizations, and a responsive layout that works seamlessly across desktop and mobile — replacing the old design with a modern, conversion-focused experience.
Live Preview https://noizinvest.com/