🎬 Movieon

A modern, free streaming platform for movies and TV shows built with cutting-edge web technologies

Features • Demo • Tech Stack • Screenshots • Getting Started

⭐ Star this repo if you find it useful!

📸 Screenshots

Homepage

Modern homepage with trending movies, categories, and seamless browsing experience

✨ Features

🎬 Content Discovery

Browse Movies & TV Shows: Explore a vast library of movies and TV shows with rich metadata
Trending Content: Discover what's popular and trending in real-time
Category Filtering: Browse by genres, popularity, ratings, and release dates
Search Functionality: Powerful search to find movies, TV shows, actors, and genres
Detailed Information: Comprehensive movie/TV show details with cast, crew, and trailers

📱 User Experience

Responsive Design: Perfect experience on mobile, tablet, and desktop devices
Light & Dark Mode: Seamless theme switching with system preference support
Progressive Web App: Installable PWA with offline capabilities
Smooth Navigation: Fast loading and intuitive user interface
Modern UI: Glassmorphism effects and gradient backgrounds

👤 Personal Features

User Authentication: Secure login/signup with Supabase
Personal Library: Create and manage your watchlist and favorites
Watch History: Track what you've watched and continue where you left off
User Profiles: Personalized experience with account management
Bookmarks: Save movies and shows for later viewing

🎯 Content Management

Rich Metadata: Detailed information from TMDB API
Video Playback: Integrated video player with multiple sources
Image Galleries: High-quality posters, backdrops, and actor photos
Ratings & Reviews: User ratings and community reviews
Social Sharing: Share movies and TV shows with friends

🔧 Technical Features

Type Safety: Full TypeScript support for reliable development
Performance Optimized: Fast loading with code splitting and lazy loading
SEO Friendly: Server-side rendering for better search engine visibility
API Integration: Seamless integration with TMDB and Supabase
Error Handling: Comprehensive error handling and user feedback

🛠️ Tech Stack

Framework: Next.js 15 (App Router)
UI Library: React 19
Styling: Tailwind CSS 4
Components: Hero UI 2.8 + Custom Components
TypeScript: TypeScript 5
State Management: TanStack Query for server state
Database: Supabase for auth and data
API: TMDB API for movie data
Deployment: Vercel for hosting

🌐 Demo

Live Demo: Visit Movieon

Note: Make sure to set up all environment variables for full functionality.

🏗️ Architecture Overview

This application is built with a modern, scalable architecture:

Frontend: Next.js 15 with App Router, React 19 Server Components, TypeScript
Backend: Next.js API Routes (serverless functions)
Database: Supabase with PostgreSQL and real-time subscriptions
Authentication: Supabase Auth with email/password and social login
Content API: TMDB API for movie and TV show data
State Management: React Hooks + TanStack Query
Styling: Tailwind CSS with custom design system
Deployment: Vercel for global CDN and edge functions

🚀 Getting Started

Prerequisites

Make sure you have the following installed:

Node.js 18.x or higher (Download)
npm 10.x or higher (comes with Node.js)
Git (Download)

Installation

Clone the repository

git clone https://github.com/emreyn1/movieon.git
cd movieon

Install dependencies

npm install

Set up environment variables

Create a .env.local file in the root directory:

# TMDB API
TMDB_API_KEY=your_tmdb_api_key

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

# NextAuth (Optional)
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_URL=http://localhost:3000

Set up Supabase

# Install Supabase CLI
npm install -g supabase

# Login to Supabase
supabase login

# Link to your project
supabase link --project-ref your-project-ref

# Push database schema
supabase db push

Run the development server

npm run dev

Open http://localhost:3000 in your browser to view the application.

Environment Variables Setup

For detailed instructions on setting up each service:

🎯 How to Use

Getting Started

Visit the Application: Open the live demo or run locally
Browse Content: Explore movies and TV shows on the homepage
Search: Use the search bar to find specific content
Sign Up: Create an account to access personal features
Create Library: Add movies and shows to your watchlist
Watch Content: Click on any movie/TV show to start watching

Key Features

Browse Categories: Explore trending, popular, top-rated content
Detailed Pages: View comprehensive information about movies and shows
User Dashboard: Manage your watchlist, favorites, and history
Responsive Player: Watch content with an integrated video player
Social Features: Share and discuss content with other users

🚀 Performance

Fast Loading: Optimized bundle size with code splitting
Server Components: React Server Components for better performance
Image Optimization: Next.js Image component for optimized images
Caching: TanStack Query for efficient data caching
SEO: Server-side rendering for better search visibility
PWA: Installable app with offline capabilities

🔒 Security Features

✅ Secure Authentication: Supabase Auth with JWT tokens
✅ Input Validation: Form validation and data sanitization
✅ API Security: Secure API routes with authentication
✅ Type Safety: Full TypeScript support for security
✅ Environment Variables: Secure handling of sensitive data
✅ HTTPS: Secure connections with SSL certificates

📁 Project Structure

movieon/
├── app/                          # Next.js App Router
│   ├── (root)/                   # Main route group
│   │   ├── page.tsx             # Homepage
│   │   ├── movie/               # Movie routes
│   │   │   └── [id]/           # Movie detail page
│   │   ├── tv/                 # TV show routes
│   │   │   └── [id]/           # TV show detail page
│   │   ├── search/             # Search page
│   │   ├── library/            # User library
│   │   └── auth/               # Authentication pages
│   ├── api/                     # API routes
│   │   └── auth/               # Supabase auth routes
│   ├── layout.tsx              # Root layout
│   └── globals.css             # Global styles
├── components/                   # React components
│   ├── ui/                     # Hero UI components
│   ├── sections/               # Page sections
│   │   ├── Home/              # Homepage components
│   │   ├── Movie/             # Movie components
│   │   ├── TV/                # TV show components
│   │   └── Auth/              # Auth components
│   ├── layout/                 # Layout components
│   └── other/                  # Utility components
├── lib/                         # Utility functions
│   ├── actions.ts              # Server actions
│   ├── utils.ts                # Helper functions
│   ├── constants.ts            # App constants
│   └── parsers.ts              # Data parsers
├── hooks/                       # Custom React hooks
│   ├── useSupabaseUser.ts      # User authentication
│   ├── useFetchDiscoverMovies.ts # Movie discovery
│   └── useDeviceVibration.ts    # Device features
├── types/                       # TypeScript types
│   ├── index.ts                # Main types
│   ├── movie.ts                # Movie types
│   └── component.ts            # Component types
├── utils/                       # Utility modules
│   ├── supabase/               # Supabase utilities
│   ├── players.ts              # Video player utilities
│   ├── icons.ts                # Icon utilities
│   └── helpers.ts              # Helper functions
├── public/                      # Static assets
│   ├── screenshots/            # Screenshots
│   └── icons/                  # App icons
├── next.config.ts              # Next.js configuration
├── tailwind.config.ts          # Tailwind CSS configuration
└── tsconfig.json               # TypeScript configuration

🧪 Development

Available Scripts

# Development server
npm run dev

# Production build
npm run build

# Start production server
npm start

# Lint code
npm run lint

# Type checking
npm run type-check

Development Guidelines

Code Style: Follow the existing TypeScript and React patterns
Component Structure: Use functional components with hooks
Styling: Use Tailwind CSS classes and Hero UI components
State Management: Use TanStack Query for server state
Error Handling: Implement proper error boundaries

🚀 Deployment

Deploy to Vercel (Recommended)

The easiest way to deploy this Next.js app is using Vercel:

Push your code to GitHub

git add .
git commit -m "Ready for deployment"
git push origin main

Import to Vercel
- Go to Vercel Dashboard
- Click "Add New Project"
- Import your GitHub repository
- Configure project settings:
  - Framework Preset: Next.js
  - Build Command: npm run build
  - Output Directory: (leave empty)
Add Environment Variables
- Add all environment variables from your .env.local file
- Make sure to add them for all environments (Production, Preview, Development)
Deploy!
- Click "Deploy"
- Wait for the build to complete
- Your app will be live at https://movieon.vercel.app

Environment Variables on Vercel

For detailed Vercel deployment instructions:

📄 Vercel Deployment Guide
🔧 Vercel Environment Variables

📝 Important Notes

TMDB API: You need a TMDB API key for movie data
Supabase Setup: Database schema is included in the supabase folder
Environment Variables: All environment variables must be set for functionality
PWA Features: Service worker is configured for offline capabilities

🔒 Privacy & Security

✅ Secure Authentication: Supabase Auth with secure tokens
✅ No Tracking: No analytics or tracking by default
✅ Data Privacy: User data stored securely in Supabase
✅ API Security: Secure API calls with authentication
✅ Environment Security: Sensitive data stored as environment variables

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

Built with amazing open-source technologies:

Next.js - The React Framework
React - UI Library
Tailwind CSS - Styling Framework
Hero UI - UI Components
Supabase - Backend as a Service
TMDB - Movie Database API
TypeScript - Type Safety

⭐ Like this project? Give it a star!

Star this repo to show your support! ⭐

Built with ❤️ by Emre

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
public		public
src		src
supabase		supabase
.DS_Store		.DS_Store
.env.local		.env.local
.gitignore		.gitignore
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
next-env.d.ts		next-env.d.ts
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

🎬 Movieon - Free Movies & TV Shows Streaming

🎬 Movieon

📸 Screenshots

Homepage

✨ Features

🎬 Content Discovery

📱 User Experience

👤 Personal Features

🎯 Content Management

🔧 Technical Features

🛠️ Tech Stack

🌐 Demo

🏗️ Architecture Overview

🚀 Getting Started

Prerequisites

Installation

Environment Variables Setup

🎯 How to Use

Getting Started

Key Features

🚀 Performance

🔒 Security Features

📁 Project Structure

🧪 Development

Available Scripts

Development Guidelines

🚀 Deployment

Deploy to Vercel (Recommended)

Environment Variables on Vercel

📝 Important Notes

🔒 Privacy & Security

🤝 Contributing

📄 License

🙏 Acknowledgments

⭐ Like this project? Give it a star!

About

Topics

Resources

License

Contributing

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages