NowShowing - Movie & TV Show Streaming Platform

A modern, responsive web application for streaming movies and TV shows with a beautiful UI and comprehensive features.

🎬 Features

• Multi-Source Streaming: Access content from multiple video sources
• Search & Discovery: Search movies and TV shows with real-time results
• Watchlist Management: Save and organize your favorite content
• Continue Watching: Resume where you left off
• News Integration: Latest entertainment news and updates
• Responsive Design: Optimized for desktop, tablet, and mobile
• Dark/Light Theme: Toggle between themes
• PWA Support: Install as a progressive web app
• Offline Capability: Service worker for offline functionality

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn
• Vercel account (for deployment)

Local Development

1. Clone the repository

   git clone <repository-url>
   cd NowShowing

2. Install dependencies

   npm install

3. Set up environment variables Create a .env file in the root directory:

   OMDB_API_KEY=your_omdb_api_key_here
   GNEWS_API_KEY=your_gnews_api_key_here
   NODE_ENV=development

4. Start development server

   npm run dev

   The app will be available at http://localhost:3001

Production Build

1. Build the project

   npm run build

2. Start production server

   npm start

🛠️ API Keys Setup

OMDb API Key

1. Visit OMDb API
2. Request a free API key
3. Add to environment variables

GNews API Key

1. Visit GNews
2. Sign up for a free account
3. Get your API key
4. Add to environment variables

📱 PWA Features

• Installable: Add to home screen on mobile devices
• Offline Support: Cache essential resources
• Background Sync: Sync data when online
• Push Notifications: Stay updated with new content

🎨 Customization

Adding Custom Video Sources

Add custom streaming sources via localStorage:

const customSources = [
  {
    name: "Custom Source",
    url: "https://custom-source.com/movie/",
    tvUrl: "https://custom-source.com/tv/"
  }
];
localStorage.setItem('ns_custom_sources', JSON.stringify(customSources));

Theme Customization

Modify style.css to customize colors, fonts, and layout:

:root {
  --primary-color: #your-color;
  --secondary-color: #your-color;
  --background-color: #your-color;
}

🚀 Deployment

Vercel Deployment (Recommended)

1. Install Vercel CLI

   npm i -g vercel

2. Deploy to Vercel

   vercel

3. Set environment variables in Vercel dashboard

   • OMDB_API_KEY
   • GNEWS_API_KEY
   • NODE_ENV=production

Manual Deployment

1. Build the project

   npm run build

2. Upload files to your hosting provider

   • Upload all files except node_modules
   • Ensure .env file is configured

🔧 Configuration

Vercel Configuration (vercel.json)

• Static site deployment
• API function configuration
• Security headers
• Caching strategies

Service Worker (service-worker.js)

• Offline caching
• Background sync
• Push notifications

🐛 Troubleshooting

Common Issues

Images not loading

• Check network connectivity
• Use the refresh images button
• Clear browser cache

Video not playing

• Try different video sources
• Check if content is available
• Ensure JavaScript is enabled

API errors

• Verify API keys are set correctly
• Check API rate limits
• Ensure environment variables are configured

Debug Mode

Enable debug logging in browser console:

localStorage.setItem('debug', 'true');

📊 Performance

Optimizations Implemented

• Image Optimization: Lazy loading and fallback handling
• Caching: Strategic cache headers and service worker
• Code Splitting: Efficient resource loading
• Memory Management: Cleanup of timeouts and event listeners
• Responsive Design: Optimized for all screen sizes

Performance Monitoring

• Memory usage tracking
• Image loading statistics
• Error monitoring and reporting

🔒 Security

Security Features

• CSP Headers: Content Security Policy implementation
• CORS Configuration: Cross-origin resource sharing
• Input Validation: Sanitized user inputs
• API Key Protection: Server-side proxy for API calls

Security Headers

• Content-Security-Policy
• X-Frame-Options
• X-Content-Type-Options
• Referrer-Policy

📈 Analytics & Monitoring

Built-in Monitoring

• Error tracking and reporting
• Performance metrics
• User interaction analytics

External Integration

• Google Analytics (configurable)
• Error reporting services
• Performance monitoring tools

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

Development Guidelines

• Follow existing code style
• Add comments for complex logic
• Update documentation
• Test on multiple devices

📄 License

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

🙏 Acknowledgments

• OMDb API for movie and TV show data
• GNews API for entertainment news
• Font Awesome for icons
• Vercel for hosting and deployment

📞 Support

For support and questions:

• Create an issue on GitHub
• Check the troubleshooting section
• Review the documentation

🔄 Changelog

Version 2.0.0

• Complete UI redesign
• Enhanced video player
• Improved performance
• Better error handling
• PWA enhancements

Version 1.0.0

• Initial release
• Basic streaming functionality
• Search and discovery
• Watchlist management

---

Built with ❤️ for movie and TV show enthusiasts