🎬 ALLFLIX - Streaming Platform

Full-stack streaming interface built with Next.js, TypeScript, PostgreSQL, Better Auth, and the TMDB API

Features • What You Get • Quick Start • Tech Stack • Configuration • License

Languages: 🇧🇷 Português • 🇪🇸 Español

⚠️ Portfolio Project Disclaimer

This is a demonstration/portfolio project only. ALLFLIX does NOT stream actual video content and is not a functional streaming service.

This project represents an idealized concept - imagine a scenario where a super-producer acquired rights to all entertainment content and made it available on a single unified platform. It's a "dream scenario" for educational and portfolio purposes.

🎯 Overview

ALLFLIX implements a streaming catalog interface with Next.js and TypeScript, PostgreSQL persistence, Better Auth email OTP, TMDB metadata, subscription plans, favorites, search, and filtering.

Key capabilities:

Responsive catalog interface for movies and TV shows
Email OTP authentication with server-side session management
Integration with TMDB API for 500,000+ movies and TV shows
Search with genre, year, rating, and media-type filters
User profile management and watchlist features
Next.js 16 App Router with server-rendered routes
Route protection, plan validation, and rate-limit integration points

✨ Key Features

User Interface & Experience

Landing Page: Hero section with animated transitions and calls to action
Responsive Navigation: Mobile-first navbar with search, notifications, and profile menu
Content Browsing: Netflix-style horizontal scrolling rows organized by categories
Media Details Pages: Movie and TV pages with cast, trailers, and similar titles
Search and Filters: Real-time search by genre, year, rating, and media type
Dark Mode: Dark color scheme with animated theme transitions
Skeleton Loading: Placeholder states while media data loads

Authentication & User Management

Passwordless authentication via Email OTP (one-time code)
Session management with Better Auth
Protected routes and API endpoints
User profile management with avatar upload
Email change functionality
Account settings and preferences

Content Management

TMDB Integration: Access to 500,000+ movies and TV shows metadata
Dynamic Catalog: Browse by trending, popular, top-rated, upcoming
My List: Personal watchlist with add/remove functionality
Watch History: Track viewing progress with resume capability
Continue Watching: Quick access to recently watched content
Categories: Movies, TV Shows, by genre, by decade

Rendering, Types, and Error Handling

Server-Side Rendering: Initial page rendering through Next.js SSR
Image Optimization: Automatic WebP/AVIF conversion with Next.js Image
Type Safety: Full TypeScript coverage with strict mode
Error Handling: Error boundaries and dedicated error pages
API Rate Limiting: Protection against abuse
SEO Metadata: Meta tags, Open Graph, and structured data
Modular Streaming: Backend-agnostic video player with secure proxy layer
Modular Payments: Gateway-agnostic payment system (Stripe, Mercado Pago, etc.)

📦 What You Get

1. Web Application

Next.js 16 application with App Router architecture
20+ pages including landing, browse, media details, profile
30+ React components shared across pages
Full authentication flow (OTP login via email)
Responsive design working on desktop, tablet, and mobile

2. Database Schema (PostgreSQL)

User: User accounts
Session: Secure session management
Plan: Subscription plans (1, 2, 4 screens)
Watchlist: User's saved content
WatchHistory: Viewing history with progress tracking
WatchProgress: Resume capability for each title

3. API Integration Layer

TMDB API client with error handling and retry logic
Authentication endpoints (OTP send, OTP verify, session)
Content endpoints (browse, search, details)
User endpoints (profile, watchlist, history)
Streaming endpoints (prepared structure)

4. Documentation

Documentation folder with setup guides and references
API documentation and guidelines
Development guidelines and coding standards
Project summary and architecture overview
Setup and configuration guides

5. Modular Streaming System 🎬

Backend-agnostic streaming architecture: Connect any video source
API proxy layer: Secure validation before accessing videos
Ready for integration: S3/CloudFront, Cloudflare R2, custom CDN, or any backend
Security controls: Authentication, plan validation, and rate-limiting support
Mock mode: Test with sample videos without configuring backend
Integration examples: Python, Node.js, and Go

See: docs/STREAMING_API_IMPLEMENTATION.md for details

6. Modular Payment Integration 💳

Gateway-agnostic payment system: Works with any payment provider
Environment configuration: Select the payment backend through environment variables
External backend support: Stripe, Mercado Pago, PayPal, or custom
Secure webhooks: HMAC-SHA256 signature validation, idempotency
Development mode: Built-in checkout example for testing
Payment controls: Rate limiting, transaction logging, and automatic plan updates
Provider system: Select a payment provider through configuration
Implementation guide: Setup steps and code examples

See: docs/PAYMENT_INTEGRATION.md for setup and integration details

🛠️ Technology Stack

Frontend (Next.js)

Technology	Version	Purpose
	16.1+	React framework with App Router
	5.0+	Type-safe development
	19.2+	UI library with Server Components
	4.0+	Utility-first CSS framework
Radix UI	Latest	Unstyled accessible components
Framer Motion	12.0+	Animation library for smooth transitions
Lucide React	Latest	SVG icon library
React Query	5.0+	Data fetching, caching, and synchronization
React Player	3.4+	Video player component
Sonner	2.0+	Toast notifications

Backend (Node.js)

Technology	Version	Purpose
	20+	JavaScript runtime environment
	7.3+	Next-generation ORM with type safety
	15+	Relational database
Better Auth	1.4+	Email OTP authentication and session management
Axios	1.7+	HTTP client with interceptors

External APIs

Service	Purpose
TMDB API	Movie and TV show metadata (titles, posters, cast, trailers)

Development Tools & Infrastructure

Tool	Purpose
	Code linting and formatting
Jest	Unit testing framework
Testing Library	Component testing utilities
TypeScript	Static type checking
Prisma Studio	Database GUI

🚀 Quick Start

Prerequisites

Before you begin, ensure you have:

Node.js 20+ installed (Download)
PostgreSQL database (local or cloud provider like Neon, Supabase, Railway)
TMDB API key (free at https://www.themoviedb.org/settings/api)

Option 1: Local Development (Recommended)

# 1. Clone the repository
git clone https://github.com/TechBeme/allflix.git
cd allflix

# 2. Install dependencies
npm install

# 3. Set up environment variables
cp .env.example .env.local
# Edit .env.local with your credentials (see Configuration section)

# 4. Set up database
npm run db:generate    # Generate Prisma client
npm run db:push        # Push schema to database
npm run db:seed        # (Optional) Seed with sample data

# 5. Run development server
npm run dev

Open http://localhost:3000 to see the application.

Option 2: Production Build

# Build for production
npm run build

# Start production server
npm run start

Option 3: Database Management

# Open Prisma Studio (Database GUI)
npm run db:studio

# Create a new migration
npm run db:migrate

# View database in browser at http://localhost:5555

⚙️ Configuration

Environment Variables

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

# Database (PostgreSQL)
# Example for Neon: postgresql://user:password@ep-xxx.us-east-2.aws.neon.tech/allflix?sslmode=require
# Example for local: postgresql://postgres:password@localhost:5432/allflix
DATABASE_URL="postgresql://user:password@host:5432/allflix"

# TMDB API (get free key at https://www.themoviedb.org/settings/api)
TMDB_API_KEY="your_tmdb_api_key_here"
TMDB_API_BASE_URL="https://api.themoviedb.org/3"

# Authentication (generate random secure strings)
BETTER_AUTH_SECRET="your-secret-key-minimum-32-characters"
BETTER_AUTH_URL="http://localhost:3000"

# Next.js
NEXT_PUBLIC_APP_URL="http://localhost:3000"
NODE_ENV="development"

Database Options

The project supports multiple PostgreSQL providers:

Provider	Type	Best For
Neon	Serverless	Auto-scaling, generous free tier
Supabase	Managed	PostgreSQL + extras (auth, storage)
Railway	Managed	Simple deployment, fair pricing
Vercel Postgres	Serverless	Integrated with Vercel hosting
Local PostgreSQL	Self-hosted	Full control, zero costs

Available Commands

# Development
npm run dev              # Start development server (http://localhost:3000)
npm run build            # Build for production
npm run start            # Start production server
npm run lint             # Run ESLint
npm run lint:fix         # Fix linting errors automatically
npm run type-check       # Run TypeScript type checking

# Database
npm run db:generate      # Generate Prisma Client
npm run db:push          # Push schema changes to database
npm run db:migrate       # Create and apply migrations
npm run db:seed          # Seed database with sample data
npm run db:studio        # Open Prisma Studio (database GUI)

# Testing
npm run test             # Run all tests
npm run test:watch       # Run tests in watch mode

# Analysis
npm run analyze          # Analyze bundle size

📝 License

❌ Restrictions

No commercial use without explicit written permission
No modifications or derivative works
No distribution, sublicensing, or public hosting
No reverse engineering or decompilation
No removal of copyright notices or attributions

✅ Permitted Use

View source code for educational and learning purposes
Run locally for personal, non-commercial study
Fork for private, personal learning (not public repositories)
Reference in portfolio, resume, or personal website

📧 Commercial Licensing

For commercial use, custom development, white-label solutions, or licensing inquiries:

Contact: contact@techbe.me

⚠️ Disclaimer

This project is a portfolio demonstration and is NOT a functional streaming service. It does NOT:

Stream actual video content
Provide access to copyrighted material
Function as a real streaming platform
Violate any content distribution rights
Encourage piracy or illegal content access

This is an educational project that demonstrates:

Full-stack development with Next.js, TypeScript, and PostgreSQL
Full-stack application architecture
API integration techniques
UI/UX design capabilities

TMDB Attribution: This product uses the TMDB API but is not endorsed or certified by TMDB. All movie and TV show metadata is sourced from The Movie Database (TMDB) under their API terms of service.

Users are solely responsible for compliance with all applicable laws and regulations in their jurisdiction.

Developed by Rafael Vieira

Name		Name	Last commit message	Last commit date
app		app
components		components
hooks		hooks
i18n		i18n
lib		lib
messages		messages
prisma		prisma
public		public
scripts		scripts
types		types
wiki		wiki
.env.example		.env.example
.gitignore		.gitignore
.vercelignore		.vercelignore
LICENSE		LICENSE
README.es.md		README.es.md
README.md		README.md
README.pt-BR.md		README.pt-BR.md
eslint.config.mjs		eslint.config.mjs
jest.config.js		jest.config.js
logo.png		logo.png
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
prisma.config.ts		prisma.config.ts
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
vercel.json		vercel.json

Latest commit

History

Folders and files

Repository files navigation