VoidStream

A Netflix-inspired streaming platform with a sleek, dark, anime/cyberpunk aesthetic. Built with Next.js 14, Tailwind CSS, and TypeScript. Uses TMDB for content and GitHub as a serverless JSON database.

Features

• Sleek UI: "Void" aesthetic with dark gradients, glassmorphism, and smooth animations.
• TMDB Integration: Fetches trending, popular, and top-rated movies/shows.
• User Accounts: Email/password signup and login.
• GitHub Database: Stores user data (profiles, lists, history) in a private GitHub repository.
• My List: Save content to watch later.
• Watch History: Tracks what you've watched.
• Continue Watching: Resumes playback from where you left off.
• Recommendations: Personalized suggestions based on watch history.
• Multiple Profiles: Create and manage multiple profiles per account.

Setup

1. Clone the repository.

2. Install dependencies:

   npm install

3. Configure Environment Variables:

   • Copy env.example to .env.local.
   • Fill in the required values:
     • NEXT_PUBLIC_TMDB_API_KEY: Get from TMDB.
     • GITHUB_TOKEN: Generate a Personal Access Token (PAT) on GitHub with repo scope.
     • GITHUB_OWNER: Your GitHub username.
     • GITHUB_REPO: Create a new private repository (e.g., voidstream-db) and enter its name here.
     • JWT_SECRET: Generate a random string for session security.

4. Initialize Database:

   • Ensure your GITHUB_REPO exists. The app will automatically create/update JSON files in it.

5. Run Locally:

   npm run dev

   Open http://localhost:3000.

Deployment

Deploy to Vercel:

1. Push your code to a GitHub repository.
2. Import the project in Vercel.
3. Add the Environment Variables in Vercel project settings.
4. Deploy!

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Icons: Lucide React
• Auth: JWT + bcrypt
• Database: GitHub JSON (via API)