Fixes #52 Convert to mobile-first PWA with offline functionality

[PriyankaGowda2005]

📌 Pull Request Summary

Converted the Foodie app to a mobile-first Progressive Web App (PWA) with comprehensive offline functionality and enhanced mobile experience.

Changes Made:

🔧 PWA Setup:

• ✅ Installed and configured vite-plugin-pwa
• ✅ Created comprehensive manifest.json with app details
• ✅ Implemented service worker with intelligent caching strategies
• ✅ Added PWA meta tags and proper viewport settings

📱 Mobile-First Design:

• ✅ Enhanced responsive design with mobile-first approach
• ✅ Added touch-friendly interactions and proper button sizing
• ✅ Implemented safe area support for devices with notches
• ✅ Added iOS-specific optimizations and viewport fixes
• ✅ Prevented horizontal scroll and zoom issues on mobile

🔄 Offline Functionality:

• ✅ Created OfflineFallback component for poor network conditions
• ✅ Implemented runtime caching for API calls and images
• ✅ Added network detection and offline state management
• ✅ Cached essential pages (home, menu, cart) for offline viewing

📲 PWA Install Experience:

• ✅ Created PWAInstallPrompt component for app installation
• ✅ Added install prompt with smart dismissal logic
• ✅ Implemented native app-like experience when installed
• ✅ Added proper app icons and splash screen support

⚡ Performance Optimizations:

• ✅ Implemented service worker caching for faster loading
• ✅ Added image caching with 30-day expiration
• ✅ API caching with 24-hour expiration
• ✅ Optimized bundle size and loading performance

Features:

• 📱 Mobile-First: Responsive design optimized for mobile devices
• 🔄 Offline Support: Works without internet connection
• 📲 Installable: Can be installed as a native app
• 🎨 Touch-Friendly: Optimized for touch interactions
• ⚡ Fast Loading: Cached content for instant access
• 🔧 Cross-Platform: Works on iOS, Android, and desktop

Technical Implementation:

• Uses vite-plugin-pwa for PWA functionality
• Service worker with Workbox for caching
• Manifest.json for app installation
• Offline fallback with retry functionality
• Mobile-first CSS with proper viewport handling
• Touch-friendly UI with 44px minimum touch targets

🛠️ Type of Change

• ✨ New feature
• 🎨 Design enhancement
• 📱 Mobile responsiveness
• ⚡ Performance improvement
• 🔧 Infrastructure change

🔗 Related Issue

Closes #52

✅ Checklist

• I have tested my changes locally
• I have run npm run dev to check code style
• My code follows the project's coding conventions
• I have performed a self-review of my own code
• My changes generate no new warnings or errors
• I have commented my code, especially in hard-to-understand areas
• I have linked the related issue

📸 Screenshots (if applicable)

The PWA conversion includes:

• Mobile-first responsive design
• Offline fallback screen with retry functionality
• PWA install prompt for better user engagement
• Touch-friendly UI with proper sizing
• Native app-like experience when installed

🧠 Additional Notes

This implementation addresses all requirements from the issue:

• ✅ Convert to PWA with vite-plugin-pwa
• ✅ Add manifest.json with app details and icons
• ✅ Implement offline functionality with caching
• ✅ Mobile-first responsive design improvements
• ✅ Native app-like experience when installed
• ✅ Performance optimizations with service worker

The app now provides a native mobile app experience while maintaining web accessibility and cross-platform compatibility.

[vercel]

@PriyankaGowda2005 is attempting to deploy a commit to the Abhi's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Abhishek2634]

resolve conflicts

[PriyankaGowda2005]

resolved @Abhishek2634

[PriyankaGowda2005]

@Abhishek2634 could u pls merge this or any changes required lemme know