Syed Muhammad Ali
I specialize in SaaS dashboards and marketing websites
New to Contra
Syed Muhammad is ready for their next project!
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/
0
8
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/
0
32
GVD Renovations — HTML to React Conversion
Overview
GVD Renovations is a kitchen remodeling business based in Sacramento, specializing in quality materials and expert installation. I was brought in to convert their existing static HTML landing page into a fully componentized React application — improving code structure and maintainability without changing the original design.
My Role & Contributions
✅ Broke down the static HTML markup into clean, reusable React components (Header, Hero, Services, Testimonials, Footer, etc.)
✅ Preserved the original design and styling exactly while restructuring the codebase for scalability
✅ Replaced static markup with component-driven architecture, making future content updates and edits far easier to manage
✅ Ensured cross-browser consistency and responsive behavior was maintained post-conversion
✅ Delivered clean, organized code following React best practices
Tech Stack
React · JavaScript · HTML5 · Tailwind CSS · Netlify (Deployment)
Outcome
A faster, more maintainable codebase that keeps the original look and feel of the site while making it easy for the client to scale, update, or extend the landing page going forward.
Live Preview https://gvdrenovations.netlify.app/
0
15
RepurposeAI — AI-Powered Content Repurposing SaaS
Overview
RepurposeAI is a fully functional SaaS application that uses AI to instantly transform a single blog post into three ready-to-publish formats: a Twitter/X thread, a LinkedIn post, and an email newsletter — saving content creators hours of manual rewriting every week.
This was a complete 0→1 build, where I designed and developed every layer of the product, from front-end to backend to deployment.
What I Built
Frontend: Responsive, intuitive UI built with Next.js 16 and Tailwind CSS, including real-time loading states and platform-specific output cards with copy-to-clipboard functionality
AI Integration: Connected the app to the OpenAI API to generate platform-tailored content from a single blog post input
Authentication: Implemented secure user sign-up/login using Supabase Auth
Payments: Integrated Stripe for premium plan subscriptions, including checkout flow and subscription management
Database: Designed and managed the data layer using Supabase (PostgreSQL) to store user data, content history, and subscription status
Deployment: Hosted and continuously deployed on Vercel
Tech Stack
Next.js 16 · TypeScript · OpenAI API · Supabase (Auth + PostgreSQL) · Stripe · Tailwind CSS · Vercel
Outcome
A production-ready SaaS product with a complete user journey — sign-up, content generation, and premium subscription upgrade — built and shipped end-to-end by me.
0
159