https://github.com/ravnop/jiostream-jiocinema-clone

JioStream is an open-source streaming platform demo that showcases how modern streaming services work. Built with Next.js, it uses TMDB API for content data and Supabase for authentication and user management.
https://github.com/ravnop/jiostream-jiocinema-clone

clone-website hotstar jiocinema jiocinemaclone jiohotstar streaming-services

Last synced: 22 days ago
JSON representation

JioStream is an open-source streaming platform demo that showcases how modern streaming services work. Built with Next.js, it uses TMDB API for content data and Supabase for authentication and user management.

• Host: GitHub
• URL: https://github.com/ravnop/jiostream-jiocinema-clone
• Owner: RavnOP
• Created: 2025-03-23T09:54:44.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2025-04-24T10:25:06.000Z (about 1 month ago)
• Last Synced: 2025-04-24T10:28:28.866Z (about 1 month ago)
• Topics: clone-website, hotstar, jiocinema, jiocinemaclone, jiohotstar, streaming-services
• Language: TypeScript
• Homepage: https://jiostream.netlify.app
• Size: 3.6 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🎬 Moviesnation - Open Source Streaming Platform

![Screenshot_23-3-2025_164830_jiostream netlify app](https://github.com/user-attachments/assets/fb3ec91d-8f18-43ef-8bed-6a7af77ed73f)



[![Next.js](https://img.shields.io/badge/Next.js-13.0-blueviolet?style=for-the-badge&logo=next.js)](https://nextjs.org/)

[![Supabase](https://img.shields.io/badge/Supabase-Database-green?style=for-the-badge&logo=supabase)](https://supabase.io/)

[![TMDB](https://img.shields.io/badge/TMDB-API-blue?style=for-the-badge&logo=themoviedatabase)](https://www.themoviedb.org/)

[![MIT License](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](LICENSE)



## 🌟 Overview

Moviesnation is an open-source streaming platform demo that showcases how modern streaming services work. Built with Next.js, it uses TMDB API for content data and Supabase for authentication and user management.

🔴 [Live Demo](https://Moviesnation.netlify.app/) | 🐛 [Report Bug](https://github.com/RavnOP/Jio-Cinema-Clone-Webapp-Using-TMDB-API-and-Supabase-Database/issues)

## ✨ Features

- 🎯 Browse Movies & TV Shows with TMDB API integration

- 🔐 User authentication with Supabase

- 📱 Responsive design for all devices

- 🎬 Third-party embedded streaming URLs

- 💾 Watchlist & Continue Watching features

- 🔍 Advanced search and filtering

- 🎨 Modern UI with Tailwind CSS

- 🌙 Dark mode support

## 🛠️ Tech Stack

- **Frontend:** Next.js 13, React, TypeScript

- **Styling:** Tailwind CSS, Shadcn UI

- **Database:** Supabase

- **Authentication:** Supabase Auth

- **API:** TMDB API

- **Deployment:** Vercel

- **State Management:** React Context + Hooks

## 📥 Installation

1. Clone the repository:

```bash

git clone https://github.com/RavnOP/Jio-Cinema-Clone-Webapp-Using-TMDB-API-and-Supabase-Database.git

```

2. Install dependencies:

```bash

npm install

# or

yarn install

```

3. Set up environment variables:

```env

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url

NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_key

NEXT_PUBLIC_TMDB_API_KEY=your_tmdb_api_key

```

4. Run the development server:

```bash

npm run dev

# or

yarn dev

```

## 🌐 Environment Variables

Create a `.env.local` file in the root directory with the following variables:

```env

NEXT_PUBLIC_SUPABASE_URL=

NEXT_PUBLIC_SUPABASE_ANON_KEY=

NEXT_PUBLIC_TMDB_API_KEY=

```

## 📚 Project Structure

```

Moviesnation/

├── app/                   # Next.js 13 app directory

├── components/           # Reusable components

├── lib/                 # Utility functions and hooks

├── public/             # Static assets

├── styles/            # Global styles

└── types/            # TypeScript types

```

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first.

1. Fork the repository

2. Create your feature branch (`git checkout -b feature/AmazingFeature`)

3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)

4. Push to the branch (`git push origin feature/AmazingFeature`)

5. Open a Pull Request

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## ⚠️ Disclaimer

This is an educational project and is not intended for commercial use. All movie and TV show data is sourced from TMDB API. Streaming URLs are embedded from third-party sources for demonstration purposes only.

## 👤 Author

**Abhishek Singh**

- GitHub: [RavnOP](https://github.com/RavnOP)

## 🙏 Acknowledgments

- [TMDB API](https://www.themoviedb.org/documentation/api) for providing movie and TV show data

- [Supabase](https://supabase.io/) for authentication and database services

- [Vercel](https://netlify.com/) for hosting

- [Shadcn UI](https://ui.shadcn.com/) for UI components

---

## Demo Images 📷📸🎥

![Moviesnation Landing Page](https://github.com/user-attachments/assets/39f00c85-2191-405a-a655-620290f85ef8)

![Moviesnation Home Page](https://github.com/user-attachments/assets/bd526a42-817a-4344-b55f-8a91d2973ef5)

![Moviesnation Detail Page](https://github.com/user-attachments/assets/a6853a88-7776-4c2f-9552-537980291641)



⭐️ If you found this project helpful, please give it a star!


Made with ❤️ by [Abhishek Singh](https://github.com/RavnOP)