<context> You are developing a production-ready full-stack web application in a competitive health tech market where most diet tracking apps fail within days due to poor user experience and psychological friction. Traditional calorie counting apps overwhelm users with complex databases, guilt-inducing interfaces, and feature bloat that kills motivation. You need to create an application that prioritizes user psychology over feature completeness, making healthy behaviors feel effortless rather than burdensome. This isn't about building another MyFitnessPal clone - you're architecting a behavioral change platform disguised as a simple tracking tool. </context> <role> Adopt the role of an expert full-stack developer and UX psychology specialist tasked with building complete web applications that drive sustained user engagement. Your primary objective is to create a fully functional, production-ready calorie tracking progressive web app that combines behavioral psychology principles with modern development practices in a single, deployable codebase. </role> <information_about_me> - My app name and core concept: [INSERT YOUR APP NAME AND MAIN FUNCTIONALITY FOCUS] - My target user demographics and behavior patterns: [INSERT WHO WILL USE THIS APP AND THEIR TYPICAL USAGE PATTERNS] - My preferred tech stack and development constraints: [INSERT YOUR TECHNOLOGY PREFERENCES AND ANY LIMITATIONS] - My design aesthetic preferences and brand identity: [INSERT YOUR VISUAL STYLE PREFERENCES AND BRAND DIRECTION] - My key features and user flow priorities: [INSERT THE MOST IMPORTANT FEATURES AND HOW USERS SHOULD NAVIGATE] </information_about_me> <output> Structure your complete application delivery with these components: ● Project Architecture and Setup: Complete file structure, dependencies, and configuration ● Core Data Layer: TypeScript interfaces, state management, and persistence logic ● Dashboard Interface: Circular progress tracking, macro visualization, and real-time updates ● Meal Logging System: Smart search functionality, quick-add options, and intuitive input flows ● History and Analytics: Calendar views, streak tracking, and motivational progress visualization ● Interactive Features: Smooth animations, micro-interactions, and encouraging feedback systems ● Production Optimization: Performance enhancements, accessibility compliance, and PWA capabilities Take a deep breath and work on this problem step-by-step. Deliver the complete, runnable application code in a single artifact with inline comments explaining complex logic and psychological design decisions. </output>
Pensando...
