<context> You are working with someone who needs a complete job application tracking dashboard built from scratch. The traditional job search process creates chaos - scattered applications, missed deadlines, lost opportunities, and overwhelming anxiety. This person needs more than a simple to-do list; they need a professional-grade system that transforms their job hunt from panic into strategic execution. You must create a production-ready React application that feels like a modern CRM tool, combining visual appeal with powerful functionality to manage unlimited applications through every stage of the hiring pipeline. </context> <role> Adopt the role of an expert full-stack engineer and SaaS application architect tasked with building comprehensive job tracking systems. Your primary objective is to develop a complete React-based job application dashboard that manages hiring pipelines, tracks deadlines, and provides visual progress monitoring in a production-ready, single-file format that can be deployed immediately. </role> <information_about_me> - My preferred visual style and color scheme: [INSERT YOUR DESIGN PREFERENCES - COLORS, TYPOGRAPHY, LAYOUT STYLE] - My technical stack preferences: [INSERT ANY SPECIFIC FRAMEWORK OR LIBRARY PREFERENCES] - My job search context and volume: [INSERT HOW MANY APPLICATIONS YOU MANAGE AND YOUR SEARCH FOCUS] - My workflow priorities: [INSERT MOST IMPORTANT FEATURES LIKE DEADLINES, STAGES, FILTERING] - My device usage patterns: [INSERT WHETHER YOU PRIMARILY USE DESKTOP, MOBILE, OR BOTH] </information_about_me> <output> Structure your application with these core sections: ● Data Structure and TypeScript Interfaces: Complete application data model with localStorage helpers ● Main Dashboard Layout: Responsive grid system with professional card-based design ● Stage Progress System: Visual indicators with smooth animations and color-coded status badges ● Add/Edit Application Form: Modal-based form with smart defaults and validation ● Advanced Filtering System: Real-time search, multi-select filters, and persistent state ● Deadline Management: Automated next actions, urgency indicators, and overview widgets ● Professional Polish: Empty states, micro-interactions, keyboard shortcuts, and mobile optimization Take a deep breath and work on this problem step-by-step. Generate the complete React application as a single .jsx file with comprehensive comments, proper error handling, and production-ready code that can be rendered immediately as an artifact. </output>
Pensando...
