🔧 Prompt to Fix Existing SaaS App Issues (Vercel v0 / AI Code Tool Compatible)> You are working on an existing full-stack SaaS streaming platform.Fix the following UI and layout issues across the project (frontend in Next.js with TailwindCSS and backend in Node.js with Express):---✅ Fixes to Apply:1. Sidebar IssueRemove duplicate/multiple sidebars showing in the layout.Ensure only one functional sidebar is visible across all routes.Sidebar should auto-collapse on mobile and expand on desktop.2. Responsive LayoutMake Home page and Admin panel fully mobile responsive.Use proper Tailwind responsive classes (md:, lg:, xl:).Make sure charts, tables, and cards wrap or scroll on small screens.3. Login System FixFix login form validation, error handling, and session management.Ensure successful login redirects user to correct dashboard.On login failure, display user-friendly error message (e.g., "Invalid email or password").4. Admin Panel CleanupRevamp the color scheme of admin panel to use a consistent, modern theme (suggested: dark blue + gradient accents).Use modern UI components (card layouts, hover effects, icons from Lucide or HeroIcons).Align headings, buttons, and inputs to look consistent across all pages.5. Layout & StructureUse a unified Layout.tsx or DashboardLayout.tsx component to manage shared UI (header, sidebar, footer).Fix any layout shifts or broken flex/grid positioning.Add spacing (p-4, gap-4, mb-6) to avoid crammed UI.6. Theme and UI EnhancementAdd gradients to buttons and hero sections (Tailwind bg-gradient-to-r, etc.).Use consistent font sizes and colors across all components.Fix overflow issues on small screens.7. Optional ImprovementsAdd loading spinners or skeletons where needed.Add proper mobile menu toggle with smooth animations.---🔁 Ensure all pages (user dashboard, admin dashboard, login, home) share a cohesive layout and are built with:shadcn/ui components or custom modern Tailwind componentsMobile-first designProper accessibility (ARIA roles, labels)Final output should be production-ready, responsive, clean, and aligned with modern SaaS UI design standards.

Absolutely. Here's a full and detailed prompt to rebuild your complete SaaS streaming platform from scratch with full working functionality, admin panel, user dashboard, stream management, and mobile-first responsive UI, ready to be built using Vercel v0, or handed off to an AI dev team or agency.---🎯 Full Prompt: Rebuild My Streaming SaaS Application (Mobile-First, Fully Functional)> Rebuild a complete SaaS web application (mobile-first, responsive) that allows users to buy and manage streaming services like RTMP, SRT, and UDP.The application should include a modern user dashboard, clean admin panel, real-time FFmpeg-based stream handling, and attractive UI/UX for both mobile and desktop.---📱 1. GENERAL REQUIREMENTS:Build with Next.js 14 App Router and Tailwind CSSFull responsiveness: Mobile, Tablet, Desktop friendlyUse shadcn/ui, lucide-react icons, and gradients throughout the UIUse Prisma ORM with PostgreSQL for the databaseNode.js + Express/Fastify for backend APIsDeploy frontend on Vercel, backend on VPS (Docker-based)---🔐 2. AUTHENTICATION & USER MANAGEMENTSecure login, signup, and forgot password flowsUse JWT tokens (access + refresh) with cookie-based sessionsRole-based access control: user, admin, superadminAfter login:Users are redirected to their dashboardAdmins are redirected to the admin panel---🧾 3. PLAN SUBSCRIPTION MODULEUsers can purchase streaming services in different durations:Hourly (e.g., 1 hr, 3 hr)Daily (1 day, 3 days, 7 days)Monthly (1 month, recurring)Each purchase grants:Custom ingest URL (RTMP/SRT/UDP)Expiry time countdownIntegrate Stripe for paymentHandle payment success/failure hooks and auto-expire logic---📡 4. STREAMING & PREVIEW SYSTEM (FFmpeg-based)Each user gets:A secure push URL (e.g., srt://stream.simulcast.tech:9001/uid)Stream is ingested by FFmpeg or Golang/Node wrapperAuto convert to HLS for browser/mobile previewShow HLS preview in user dashboard using hls.jsShow:Stream nameProtocol (RTMP/SRT/UDP)Created At / Expires AtLive/Offline status (poll or socket)Button to stop/restart the streamServer status logs (optional)---🔄 5. RESTREAMING MODULELet users define where their stream is sent:Facebook LiveYouTube LiveCustom RTMP serverUI should include:“Add Restream Target”Form with URL + stream keyAbility to enable/disable targetsBackend triggers FFmpeg push to multiple destinations---🧑‍💼 6. USER DASHBOARD (Mobile-First UI)Gradient header with user's name and quick statsCards for:Active streamsExpired plansPlan usage historyEmbedded HLS preview playerTimeline of stream eventsButton to buy new plans (with modal)Mobile nav bar (tab-based like mobile apps)---👮 7. ADMIN PANELClean dark/light mode switchAnalytics overview:Active usersBandwidth usageRunning streamsTables:Users tableStream sessionsPurchasesToggle for disabling users or streamsAdmin UI should be fully mobile compatibleFilters, search, and pagination---🧱 8. SHARED UI COMPONENTSButtons with gradientsMobile-first collapsible sidebarCard UI for streams/plansCustom alerts/modals (shadcn/dialog)Toast notifications on actions (shadcn/toast)---🐳 9. FFmpeg & Backend IntegrationFFmpeg jobs are launched using:ffmpeg -i srt://:port -c:v libx264 -f hls /var/www/hls/user123/index.m3u8Use Docker/PM2 to manage jobsLog job statusHLS directory served over nginx/static serverProtect ingest and playback with tokens---🧪 10. EXTRASWebhooks on stream start/stopEmail notifications on stream expirationToggle for user to pause streamReusable API for mobile app in future---🔁 Directory Structure Example/apps /frontend (Next.js, Tailwind, shadcn) /backend (Node.js, FFmpeg handling, Prisma)/packages /ui (shared UI components)/docker /ffmpeg-stream-runner---🧠 DeploymentFrontend on VercelBackend and FFmpeg on VPS or Docker-based serverUse Nginx reverse proxy to expose HLS and stream ingest---Let me know if you want the Prisma schema, stream DB models, FFmpeg templates, or Docker config — I can write those for you next.