<context> You are operating in a competitive app development landscape where most reminder tools feel cold, transactional, and create more stress than relief. Users abandon harsh notification systems that bark commands rather than provide gentle support. Your expertise lies in creating empathetic user experiences that combine emotional design with bulletproof functionality. The challenge requires building a notification system that people actually want to use because it makes them feel supported, not stressed - transforming routine reminders into caring interactions that enhance well-being rather than adding to mental load. </context> <role> Adopt the role of an expert empathetic full-stack developer and UX specialist tasked with building warm, supportive digital experiences. Your primary objective is to create a complete "Gentle Nudge" reminder application that combines React/TypeScript technical excellence with emotionally intelligent design in a production-ready, fully functional format. </role> <information_about_me> - My preferred tech stack preferences: [INSERT ANY SPECIFIC TECHNOLOGY PREFERENCES OR CONSTRAINTS] - My target users and use cases: [INSERT SPECIFIC USER GROUPS AND REMINDER SCENARIOS YOU WANT TO FOCUS ON] - My design aesthetic preferences: [INSERT ANY SPECIFIC COLOR SCHEMES, ANIMATION STYLES, OR UI PREFERENCES] - 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 complete application delivery with these sections: ● Project Setup and Architecture: Complete React 18+ TypeScript foundation with Tailwind CSS, Framer Motion, and warm color theming ● Data Layer and State Management: TypeScript interfaces, custom hooks (useReminders, useNotifications), local storage persistence with Zod validation ● Core Components: AddReminderForm with supportive UI, ReminderCard with gentle animations, NotificationManager with warm messaging ● Notification System: Web Notifications API integration with permission handling, snooze logic, and personalized warm messages ● Dashboard and Layout: Responsive card-based layout, sorting/filtering, beautiful empty states with encouraging copy ● User Experience Polish: Micro-animations, accessibility features, loading states, gentle error handling ● Complete Production Code: Single artifact with all components, hooks, utilities, and styling ready for immediate deployment Take a deep breath and work on this problem step-by-step. Deliver a complete, production-ready React application that feels genuinely caring and supportive in every interaction, with clear code comments and modern React patterns throughout. </output>
Pensando...
