|
| 1 | +# VORTEX Streaming |
| 2 | + |
| 3 | +A modern, responsive web application for streaming movies and TV shows online. Built with vanilla JavaScript, HTML5, and CSS3, featuring a sleek dark theme and progressive web app capabilities. |
| 4 | + |
| 5 | + |
| 6 | + |
| 7 | + |
| 8 | + |
| 9 | + |
| 10 | + |
| 11 | +## 🌟 Features |
| 12 | + |
| 13 | +- **🎬 Movie & TV Show Streaming**: Browse and watch thousands of movies and TV shows |
| 14 | +- **🔥 Trending Content**: Discover the most popular and trending media |
| 15 | +- **📱 Progressive Web App**: Installable on mobile devices with offline capabilities |
| 16 | +- **🎯 Genre Filtering**: Filter content by genres (Action, Comedy, Drama, Thriller, etc.) |
| 17 | +- **🔍 Smart Search**: Search for movies and TV shows with real-time suggestions |
| 18 | +- **📋 My List**: Save your favorite content for later viewing |
| 19 | +- **🎨 Dark Theme**: Modern dark UI for comfortable viewing |
| 20 | +- **📱 Responsive Design**: Optimized for all screen sizes |
| 21 | +- **⚡ Fast Loading**: Optimized with minified assets and lazy loading |
| 22 | +- **🌐 Multi-language Support**: Google Translate integration |
| 23 | + |
| 24 | +## 🚀 Live Demo |
| 25 | + |
| 26 | +[View Live Demo](https://night677coder.github.io/vortex) |
| 27 | + |
| 28 | +## 📋 Prerequisites |
| 29 | + |
| 30 | +- Modern web browser with JavaScript enabled |
| 31 | +- Internet connection for streaming content |
| 32 | +- Node.js (for development and building) |
| 33 | + |
| 34 | +## 🛠️ Installation |
| 35 | + |
| 36 | +1. **Clone the repository** |
| 37 | + ```bash |
| 38 | + git clone https://github.com/night677coder/vortex.git |
| 39 | + cd vortex |
| 40 | + ``` |
| 41 | + |
| 42 | +2. **Install dependencies** |
| 43 | + ```bash |
| 44 | + npm install |
| 45 | + ``` |
| 46 | + |
| 47 | +3. **Build the project** |
| 48 | + ```bash |
| 49 | + npm run build |
| 50 | + ``` |
| 51 | + |
| 52 | +4. **Serve locally** (optional) |
| 53 | + ```bash |
| 54 | + # Use any static server, for example: |
| 55 | + python -m http.server 8000 |
| 56 | + # or |
| 57 | + npx serve . |
| 58 | + ``` |
| 59 | + |
| 60 | +## 📖 Usage |
| 61 | + |
| 62 | +### For Users |
| 63 | +1. Open the application in your web browser |
| 64 | +2. Browse trending content or use the search bar |
| 65 | +3. Click on any movie/TV show to view details |
| 66 | +4. Click "Watch Now" to start streaming |
| 67 | +5. Add content to your list using the "Add to List" button |
| 68 | + |
| 69 | +### For Developers |
| 70 | +- **Development**: Edit source files (`script.js`, `styles.css`, `index.html`) |
| 71 | +- **Building**: Run `npm run build` to minify and optimize assets |
| 72 | +- **Deployment**: The `dist/` folder contains production-ready files |
| 73 | + |
| 74 | +## 🏗️ Project Structure |
| 75 | + |
| 76 | +``` |
| 77 | +vortex/ |
| 78 | +├── index.html # Main homepage |
| 79 | +├── movies.html # Movies page |
| 80 | +├── tvshows.html # TV Shows page |
| 81 | +├── trending.html # Trending content page |
| 82 | +├── mylist.html # User's saved list |
| 83 | +├── movie-detail.html # Movie/TV show detail page |
| 84 | +├── script.js # Main JavaScript file |
| 85 | +├── script.min.js # Minified JavaScript (generated) |
| 86 | +├── styles.css # Main CSS file |
| 87 | +├── styles.min.css # Minified CSS (generated) |
| 88 | +├── manifest.json # PWA manifest |
| 89 | +├── service-worker.js # Service worker for PWA |
| 90 | +├── build.mjs # Build script |
| 91 | +├── package.json # Project dependencies |
| 92 | +├── .htaccess # Apache configuration |
| 93 | +├── icon.svg # App icon |
| 94 | +└── README.md # This file |
| 95 | +``` |
| 96 | + |
| 97 | +## 🛠️ Technologies Used |
| 98 | + |
| 99 | +- **Frontend**: HTML5, CSS3, JavaScript (ES6+) |
| 100 | +- **APIs**: TMDB API for movie/TV show data |
| 101 | +- **Build Tools**: Node.js, Terser (JS minification), CleanCSS (CSS minification) |
| 102 | +- **PWA**: Service Worker, Web App Manifest |
| 103 | +- **Icons**: Font Awesome, Google Fonts (Inter) |
| 104 | +- **Ads**: Google AdSense integration |
| 105 | + |
| 106 | +## 🎨 Customization |
| 107 | + |
| 108 | +### Changing Colors |
| 109 | +Edit the CSS custom properties in `styles.css`: |
| 110 | + |
| 111 | +```css |
| 112 | +:root { |
| 113 | + --primary-color: #ff6b6b; |
| 114 | + --secondary-color: #4ecdc4; |
| 115 | + --background-color: #101010; |
| 116 | + --text-color: #ffffff; |
| 117 | + /* ... other variables */ |
| 118 | +} |
| 119 | +``` |
| 120 | + |
| 121 | +### Adding New Features |
| 122 | +1. Modify `script.js` for new functionality |
| 123 | +2. Update `styles.css` for styling |
| 124 | +3. Test across different devices and browsers |
| 125 | + |
| 126 | +## 📱 Progressive Web App (PWA) |
| 127 | + |
| 128 | +The app includes PWA features: |
| 129 | +- **Installable**: Can be installed on mobile devices |
| 130 | +- **Offline Support**: Basic offline functionality |
| 131 | +- **Fast Loading**: Cached assets for quick loading |
| 132 | +- **Native Feel**: App-like experience on mobile |
| 133 | + |
| 134 | +## 🔧 Build Process |
| 135 | + |
| 136 | +The build process includes: |
| 137 | +- JavaScript minification and obfuscation |
| 138 | +- CSS minification |
| 139 | +- Asset optimization |
| 140 | +- Service worker generation |
| 141 | + |
| 142 | +Run `npm run build` to generate production files. |
| 143 | + |
| 144 | +## 🤝 Contributing |
| 145 | + |
| 146 | +1. Fork the repository |
| 147 | +2. Create a feature branch (`git checkout -b feature/amazing-feature`) |
| 148 | +3. Commit your changes (`git commit -m 'Add amazing feature'`) |
| 149 | +4. Push to the branch (`git push origin feature/amazing-feature`) |
| 150 | +5. Open a Pull Request |
| 151 | + |
| 152 | +## 📄 License |
| 153 | + |
| 154 | +This project is for educational purposes only. Please respect copyright laws and content ownership. |
| 155 | + |
| 156 | +## ⚠️ Disclaimer |
| 157 | + |
| 158 | +This application is a demonstration of web development skills and uses publicly available APIs. It does not host or distribute copyrighted content. Users are responsible for complying with local laws and regulations regarding media consumption. |
| 159 | + |
| 160 | +## 📞 Support |
| 161 | + |
| 162 | +For questions or support: |
| 163 | +- Open an issue on GitHub |
| 164 | +- Check the documentation in this README |
| 165 | + |
| 166 | +## 🙏 Acknowledgments |
| 167 | + |
| 168 | +- [TMDB](https://www.themoviedb.org/) for providing movie and TV show data |
| 169 | +- [Font Awesome](https://fontawesome.com/) for icons |
| 170 | +- [Google Fonts](https://fonts.google.com/) for typography |
| 171 | +- [Unsplash](https://unsplash.com/) and [Picsum](https://picsum.photos/) for placeholder images |
| 172 | + |
| 173 | +--- |
| 174 | + |
| 175 | +**Made with ❤️ for streaming enthusiasts** |
0 commit comments