Alien Streaming Platform

Alien is a modern streaming platform built with React, TypeScript, and Vite. It allows users to browse, search, and watch a wide variety of movies and TV shows. The platform fetches metadata from The Movie Database (TMDb) and uses VidSrc for streaming content.

Table of Contents

• Support
• Live Demo
• Features
• Tech Stack
• Setup
• Getting Started
• Available Scripts
• Deployment
• Project Structure
• Contributing

Support

Pleae consider Starring this Repository :)

Live Demo

Link to Live Demo

Features

• Browse Content: Discover trending, popular, and top-rated movies and TV shows.
• Detailed Information: Get comprehensive details for movies and TV series, including cast, crew, trailers, and seasons.
• Search Functionality: Easily find specific movies or TV shows.
• Genre-based Discovery: Explore content categorized by genres.
• Streaming: Watch movies and TV episodes directly within the platform.
• Watchlist: Keep track of content you want to watch. (Implied by WatchlistContext.tsx)
• Responsive Design: User interface built with Tailwind CSS and Radix UI components.

Tech Stack

• Frontend:
  • React
  • TypeScript
  • Vite (Build Tool)
  • Tailwind CSS (Styling)
  • Radix UI (Headless UI Components)
  • React Router DOM (Routing)
• State Management & API:
  • React Context API (for theme, watchlist)
  • Axios (HTTP Client)
• Data Sources:
  • TMDb API (Movie and TV Show metadata)
  • Various streaming APIs (Streaming links)
• Linting:
  • ESLint

Setup

To set up your own instance of Alien, you'll need to configure your environment with API keys for TMDb and Supabase. The following sections provide detailed instructions on how to get these keys and set up your project.

Getting Started

Follow these steps to set up your own instance of Alien.

1. Prerequisites

• Node.js (v18 or higher recommended)
• npm (or yarn/pnpm)

2. Configuration

You'll need to set up API keys for TMDb and Supabase.

a. TMDb API Key

1. Create an account on The Movie Database (TMDb).
2. Go to your account Settings > API and request an API key.
3. Once you have your key, you'll use it for the VITE_TMDB_API_KEY environment variable.

b. Supabase Setup

The watchlist and continue watching features use Supabase for persistence.

1. Create a Supabase Project:

   • Go to the Supabase Dashboard and create a new project.
   • Save your Project URL and Project API Key (anon public).

2. Create Database Tables:

   • In your Supabase project, go to the SQL Editor.
   • Run the following SQL queries to create the necessary tables.

   user_watchlists table:

   -- Create the table for user watchlists
   CREATE TABLE user_watchlists (
       id BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
       user_id UUID REFERENCES auth.users(id) NOT NULL,
       media_id BIGINT NOT NULL,
       media_type TEXT NOT NULL,
       title TEXT NOT NULL,
       poster_path TEXT,
       added_at TIMESTAMPTZ DEFAULT NOW() NOT NULL,
       watched BOOLEAN DEFAULT FALSE,
       watch_later BOOLEAN DEFAULT FALSE,
       rating INT,
       notes TEXT,
       UNIQUE (user_id, media_id)
   );
   
   -- Enable Row Level Security (RLS)
   ALTER TABLE user_watchlists ENABLE ROW LEVEL SECURITY;
   
   -- Create policies for RLS
   CREATE POLICY "Users can view their own watchlist items."
       ON user_watchlists FOR SELECT
       USING (auth.uid() = user_id);
   
   CREATE POLICY "Users can insert their own watchlist items."
       ON user_watchlists FOR INSERT
       WITH CHECK (auth.uid() = user_id);
   
   CREATE POLICY "Users can update their own watchlist items."
       ON user_watchlists FOR UPDATE
       USING (auth.uid() = user_id);
   
   CREATE POLICY "Users can delete their own watchlist items."
       ON user_watchlists FOR DELETE
       USING (auth.uid() = user_id);

   user_continue_watching table:

   -- Create the table for continue watching feature
   CREATE TABLE user_continue_watching (
       id BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
       user_id UUID REFERENCES auth.users(id) NOT NULL,
       media_id BIGINT NOT NULL,
       media_type TEXT NOT NULL,
       title TEXT NOT NULL,
       poster_path TEXT,
       progress REAL,
       last_watched TIMESTAMPTZ DEFAULT NOW() NOT NULL,
       season INT,
       episode INT,
       UNIQUE (user_id, media_id)
   );
   
   -- Enable Row Level Security (RLS)
   ALTER TABLE user_continue_watching ENABLE ROW LEVEL SECURITY;
   
   -- Create policies for RLS
   CREATE POLICY "Users can view their own continue watching items."
       ON user_continue_watching FOR SELECT
       USING (auth.uid() = user_id);
   
   CREATE POLICY "Users can insert their own continue watching items."
       ON user_continue_watching FOR INSERT
       WITH CHECK (auth.uid() = user_id);
   
   CREATE POLICY "Users can update their own continue watching items."
       ON user_continue_watching FOR UPDATE
       USING (auth.uid() = user_id);
   
   CREATE POLICY "Users can delete their own continue watching items."
       ON user_continue_watching FOR DELETE
       USING (auth.uid() = user_id);

3. Installation & Setup

1. Clone the repository:

   git clone https://github.com/imkenough/alien-red
   cd alien-red

2. Install dependencies:

   npm install

3. Set up environment variables:

   • Create a file named .env in the root of the project.
   • Copy the contents of .env.example into it and add your keys:

   VITE_TMDB_API_KEY=your_tmdb_api_key_here
   VITE_SUPABASE_URL="your_supabase_project_url_here"
   VITE_SUPABASE_ANON_KEY="your_supabase_anon_key_here"
   

4. Run the Development Server

npm run dev

The application should now be running on http://localhost:5173.

Available Scripts

• npm run dev: Starts the development server with hot reloading.
• npm run build: Builds the application for production.
• npm run lint: Lints the codebase using ESLint.
• npm run preview: Serves the production build locally for preview.

Deployment

This project is configured for deployment with Vercel.

1. Install Vercel CLI (if you haven't already):

   npm install -g vercel

2. Login to Vercel:

   vercel login

3. Deploy your project:

   vercel

   Follow the prompts to link your project and deploy. Make sure your VITE_TMDB_API_KEY, VITE_SUPABASE_URL, and VITE_SUPABASE_ANON_KEY are set as environment variables in your Vercel project settings.

Project Structure

alien-streaming-platform/
├── public/            # Static assets (e.g., favicon, robots.txt, sitemap.xml)
│   ├── favicon.svg
│   ├── robots.txt
│   └── sitemap.xml
├── src/
│   ├── components/    # Reusable UI components
│   │   ├── layout/    # Layout components (e.g., Header, Footer)
│   │   └── ui/        # Shadcn-ui components
│   ├── contexts/      # React context for global state (Theme, Watchlist)
│   ├── hooks/         # Custom React hooks
│   ├── lib/           # Core logic, API services (api.ts, types.ts, utils.ts)
│   ├── pages/         # Page-level components
│   ├── App.tsx        # Main application component
│   ├── main.tsx       # Entry point of the application
│   └── routes.tsx     # Application routing setup
├── .env.example       # Example environment variables (you should create .env)
├── .gitignore
├── index.html         # Main HTML file
├── package.json
├── postcss.config.js  # PostCSS configuration
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json      # TypeScript compiler options
└── vite.config.ts     # Vite configuration

Contributing

1. Fork the repository.
2. Create a new branch (git checkout -b feature/your-feature-name).
3. Make your changes.
4. Commit your changes (git commit -m 'Add some feature').
5. Push to the branch (git push origin feature/your-feature-name).
6. Open a Pull Request.

Please ensure your code adheres to the project's linting standards (npm run lint).