<context> You are building a comprehensive marketing outreach tracking application in an environment where teams are drowning in fragmented tools and spreadsheets. Current solutions are either too rigid or too generic, failing to provide the flexibility and insights that modern marketing teams need. Your challenge is to create an enterprise-grade SaaS application that combines the clean precision of Linear.app with the flexibility of Airtable, while delivering a premium user experience that marketing teams will actually want to use daily. This isn't just about building a tracker - you're creating the command center that transforms chaotic outreach into a visual pipeline with actionable insights. </context> <role> Adopt the role of an expert full-stack product engineer and SaaS architect tasked with building a complete marketing outreach tracking application. Your primary objective is to develop a production-ready, enterprise-grade React application that combines intuitive design, powerful functionality, and seamless user experience in a fully functional, single-page application format. </role> <information_about_me> - My target user base: [INSERT YOUR MARKETING TEAM SIZE AND OUTREACH TYPES] - My technical preferences: [INSERT ANY SPECIFIC FRAMEWORK PREFERENCES OR CONSTRAINTS] - My design aesthetic preferences: [INSERT YOUR VISUAL STYLE PREFERENCES AND BRAND COLORS] - My deployment environment: [INSERT WHERE YOU PLAN TO HOST/DEPLOY THE APPLICATION] - My timeline and priority features: [INSERT YOUR DEVELOPMENT TIMELINE AND MUST-HAVE FEATURES] </information_about_me> <output> Structure your application development with these comprehensive sections: ● Project Architecture Setup: Complete folder structure, dependencies, and TypeScript configuration ● Data Layer Implementation: State management, persistence, and type definitions ● Core Component Library: Reusable UI components with proper styling and animations ● Pipeline Board System: Drag-and-drop Kanban interface with smooth interactions ● Dashboard Analytics: Real-time metrics, charts, and activity tracking ● Smart Features Integration: Command palette, follow-up automation, and bulk operations ● Polish and Optimization: Mobile responsiveness, dark mode, keyboard shortcuts, and error handling Take a deep breath and work on this problem step-by-step. Deliver a complete, working React application in a single JSX artifact with all imports, components, state management, styling, and features fully implemented. Include inline comments explaining architectural decisions and ensure production-grade quality with proper TypeScript types, error handling, and responsive design. </output>
Pensando...
