cooking-game-pwa

🍳 Cooking Game PWA

An addictive endless cooking game Progressive Web App (PWA) optimized for mobile devices. Prepare delicious dishes, serve customers, and climb the leaderboard in this fast-paced culinary challenge!

✨ Features

• 🎮 Endless Gameplay: Continuous cooking action with increasing difficulty
• 📱 Mobile-First Design: Optimized touch controls and responsive layout
• 🔄 Offline Support: Play anywhere with PWA offline capabilities
• 🏆 Leaderboard: Compete with global players
• 🎯 Multiple Recipes: Unlock new dishes as you progress
• ⚡ Performance Monitoring: Built-in performance tracking for smooth gameplay
• 🎨 Modern UI: Beautiful animations and intuitive interface
• 💾 Local Storage: Save progress and high scores

🚀 Live Demo

Play the game online: https://devjfac1.github.io/cooking-game-pwa/

🛠️ Tech Stack

• Frontend: React 18 with Hooks
• State Management: Redux Toolkit
• Styling: CSS Modules with custom properties
• Animations: Framer Motion
• PWA Features: Service Worker (Workbox)
• Build Tool: Create React App
• Deployment: GitHub Pages

📋 Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Modern web browser with PWA support

🔧 Installation

1. Clone the repository

   git clone https://github.com/devjfac1/cooking-game-pwa.git
   cd cooking-game-pwa
   

2. Install dependencies

   npm install
   

3. Start development server

   npm start
   

4. Open your browser Navigate to http://localhost:3000

🎯 Usage

Local Development

# Start development server
npm start

# Build for production
npm run build

# Serve production build locally
npm run pwa-install

Game Controls

• Touch/Mouse: Drag ingredients to cooking stations
• Tap: Serve completed dishes to customers
• Swipe: Navigate through recipes and menus

PWA Installation

1. Open the app in a supported browser (Chrome, Edge, Safari)
2. Click “Add to Home Screen” or “Install App”
3. Launch from your home screen for full-screen experience

🚀 Deployment

GitHub Pages (Automated)

# Deploy to GitHub Pages
npm run deploy

Manual Deployment

1. Build the project: npm run build
2. Copy build/* to your hosting platform
3. Ensure all asset paths are relative

Environment Setup

• Set homepage in package.json to "./" for relative paths
• Configure your hosting platform for SPA routing (serve index.html for all routes)

📁 Project Structure

cooking-game-pwa/
├── public/                 # Static assets
│   ├── index.html         # Main HTML template
│   ├── manifest.json      # PWA manifest
│   └── sw.js             # Service worker
├── src/
│   ├── components/        # React components
│   │   ├── common/       # Shared components
│   │   └── game/         # Game-specific components
│   ├── redux/            # State management
│   │   ├── store.js      # Redux store configuration
│   │   └── reducers/     # State reducers
│   ├── styles/           # Global styles
│   ├── App.js            # Main app component
│   └── index.js          # App entry point
├── docs/                 # Documentation
└── package.json          # Project configuration

🎨 Customization

Themes and Styling

• Modify CSS custom properties in src/styles/index.css
• Update color scheme and animations in component styles
• Customize PWA icons in public/ directory

Game Mechanics

• Adjust difficulty curves in Redux reducers
• Modify recipes and ingredients in game components
• Update scoring system in ScoreBoard.js

PWA Configuration

• Edit public/manifest.json for app metadata
• Modify service worker in public/sw.js for caching strategies
• Update install prompts in src/index.js

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

Development Guidelines

• Follow React best practices and hooks patterns
• Use Redux Toolkit for state management
• Maintain mobile-first responsive design
• Test PWA features across devices
• Ensure accessibility compliance

📊 Performance

• Lighthouse Score: 95+ (Performance, Accessibility, Best Practices, SEO)
• Bundle Size: ~100KB gzipped
• First Paint: <1.5s
• Time to Interactive: <3s

🐛 Troubleshooting

Common Issues

404 on GitHub Pages

• Ensure Pages is configured for master branch /docs folder
• Wait 2-5 minutes after deployment for rebuild
• Clear browser cache

PWA Not Installing

• Check browser compatibility (Chrome 70+, Safari 12.2+)
• Ensure HTTPS connection
• Verify manifest.json is accessible

Performance Issues

• Check browser console for performance warnings
• Ensure images are optimized
• Verify service worker is caching correctly

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Icons and assets from various free resources
• Inspired by classic cooking games
• Built with modern web technologies

📞 Support

• Create an issue for bugs or feature requests
• Check documentation in docs/ folder
• Join discussions in GitHub Discussions

---

Enjoy cooking! 🍽️ Made with ❤️ using React and modern web technologies.