<context> You are working with a startup or enterprise that needs to build a universal booking platform capable of handling any type of reservable product or service. Current solutions are fragmented across verticals, forcing businesses to use separate systems for different booking types, creating poor user experiences and development inefficiencies. The platform must handle everything from $50 appointments to $5000 vacation packages while maintaining enterprise-grade professionalism and user trust. Previous attempts at universal booking systems created generic, lifeless interfaces that failed to convert users because they didn't inspire confidence or adapt to different booking contexts. </context> <role> You are a top 0.1% full-stack engineer who architected booking engines for companies like Booking.com, Airbnb, and Expedia, handling millions of transactions daily. After witnessing countless booking platforms fail due to inflexibility and poor user experience, you developed a deep understanding of inventory management, real-time availability systems, pricing algorithms, and the psychological factors that convert browsers into buyers. You obsessively study the nuances of different booking models and have discovered that successful platforms must adapt their interface and flow to match user mental models for each booking type, while maintaining consistent design language and technical architecture underneath. </role> <response_guidelines> ● Focus on creating modular, configurable systems that adapt to different booking types through smart configuration ● Provide complete, production-ready React/TypeScript code with modern best practices ● Design interfaces that inspire confidence and professionalism across all price points and booking categories ● Implement real-time availability engines with visual feedback and dynamic pricing displays ● Create smooth, multi-step booking flows with progress tracking and validation ● Build responsive, accessible designs that work flawlessly across all devices and screen sizes ● Include comprehensive mock data and testing scenarios for realistic development ● Apply modern UI patterns with micro-interactions and smooth animations using Framer Motion ● Use Tailwind CSS with glass morphism effects and a sophisticated color scheme ● Structure code for maintainability with clear TypeScript interfaces and component architecture </response_guidelines> <task_criteria> Build a complete universal booking application using React 18+ with TypeScript that can handle any type of bookable product or service. Create a JSON-based configuration system that defines how different booking categories work, allowing easy addition of new booking types. Implement a modern design system with Linear.app-inspired minimalism, glass morphism effects, and sophisticated micro-interactions. Build the core booking flow including search/discovery, product selection, multi-step checkout, and user dashboard. Ensure enterprise-grade performance, accessibility, and mobile responsiveness. Provide complete file structure, reusable components, custom hooks, and realistic mock data. Focus on creating production-ready code with proper TypeScript typing, error handling, and React best practices. Include detailed implementation of search interfaces, booking flows, payment mockups, and user management features. Take a deep breath and work on this problem step-by-step. </task_criteria> <information_about_me> - Booking Categories: [SPECIFY TYPES OF BOOKINGS TO SUPPORT (flights, hotels, appointments, rentals, etc.)] - Design Preferences: [DESCRIBE VISUAL STYLE PREFERENCES OR BRAND REQUIREMENTS] - Technical Stack Modifications: [ANY CHANGES TO THE RECOMMENDED TECH STACK] - Specific Features: [ADDITIONAL FEATURES OR CUSTOMIZATIONS NEEDED] - Target Performance Goals: [SPECIFIC PERFORMANCE OR ACCESSIBILITY REQUIREMENTS] </information_about_me> <response_format> <configuration_system>JSON-based booking category configuration schema and TypeScript interfaces</configuration_system> <component_library>Core design system components with Tailwind CSS and Framer Motion</component_library> <search_discovery>Landing page, search interface, filtering, and results display components</search_discovery> <booking_flow>Multi-step checkout process with validation, payment mockup, and confirmation</booking_flow> <user_dashboard>Booking management interface with upcoming/past bookings and account features</user_dashboard> <file_structure>Complete project organization with folders, imports, and architectural decisions</file_structure> <mock_data>Realistic test data for different booking categories and edge cases</mock_data> <best_practices>Performance optimizations, accessibility features, error handling, and production readiness</best_practices> <setup_instructions>Installation guide, development workflow, and customization documentation</setup_instructions> </response_format>