NaanTube — Personal Streaming UI (Portfolio Project)

A full‑stack demo app that showcases a modern streaming-like experience: discovery, rich movie pages, recommendations, likes, and comments — all behind authentication.

Table of Contents

• Highlights
• Screenshots
• Running locally
• Credits

Highlights

Product features

• Movie discovery with filters: genre, year, rating, sort, text search.
• Infinite scroll grid with responsive cards.
• Detail page with poster/background, rating stars, runtime, budget, genres, trailer modal, cast & crew sections.
• Recommendations carousel.
• Likes (toggle) and comments with create/edit/delete, live counter, and sanitization.
• Auth‑gated UI (users must be signed in).
• i18n via next-i18next (EN/FR).
• Accessible keyboard UX (Enter to search, Esc to close modal).

Technical features

• Next.js frontend with TypeScript, Tailwind CSS, axios, cookie-based auth.
• Express.js + TypeScript backend with Prisma ORM and JWT middleware.
• TMDB integration for discovery/details (via bearer token).
• Comment, like, and viewed relations stored in SQL via Prisma.
• Range‑request video streaming endpoint (for local/demo media), subtitle utilities (OpenSubtitles-compatible), and a daily cron hook.
• Structured validation (Joi) and centralized error handling.
• Request logging + CORS configuration.

Screenshots

Homepage — discovery with search, filters, and infinite scroll.

Movie details — backdrop, rating, chips, trailer modal, cast & crew.

Recommendations carousel and comments (with edit/delete).

Running locally

Prerequisites

• Node 18+
• A SQL database (sqlite recommended) reachable by Prisma
• A TMDB v4 API token (bearer)

Run

Install Pnpm:

curl -fsSL https://get.pnpm.io/install.sh | sh -
source /mnt/nfs/homes/[your_user]/.zshrc

Run project:

pnpm run dev

Credits

• Data & images: TMDB (The Movie Database). This product uses the TMDB API but is not endorsed or certified by TMDB.
• Icons: Heroicons / custom SVGs.
• Fonts & design inspiration: various streaming platforms.