🎬 watchNXT

Discover. Track. Organize.

A modern entertainment discovery and personal tracking platform for Movies, TV Shows, and Anime built with TanStack Start, React 19, Supabase, TMDB, and AniList.

🌐 Live Website

---

Overview

watchNXT is a full-stack entertainment platform that helps users discover, organize, and track their favorite Movies, TV Shows, and Anime in one unified application.

Instead of switching between multiple services, watchNXT provides a single modern interface to discover trending content, search across multiple media types, maintain a personal watchlist, track watched titles, write journal entries, and receive recommendations powered by TMDB and AniList.

The application is built with a server-first architecture using TanStack Start, ensuring excellent performance, type safety, and scalability.

---

Screenshots

🏠 Home

---

🔍 Search

---

🎬 Movie Details

---

📺 TV Show Details

---

🎌 Anime Details

---

🎲 Discovery Wheel

---

📚 Watchlist

---

📝 Journal

---

👤 Profile

---

Features

Entertainment Discovery

• Trending Movies
• Trending TV Shows
• Trending Anime
• Popular Titles
• Genre-based Discovery
• Recommendation Engine
• Discovery Wheel
• Telugu Movie Discovery
• Search Across Multiple Categories

---

Content Details

Every title includes rich metadata including:

• Overview
• Ratings
• Genres
• Runtime
• Release Information
• Cast
• Crew
• Recommendations
• Similar Titles
• Posters
• Backdrops
• Streaming Providers (where available)

---

Personal Library

Manage your entertainment in one place.

Features include:

• Watchlist
• Watched Collection
• Not Interested List
• Personal Ratings
• Viewing History
• Personal Journal
• Progress Tracking

---

Authentication

Secure authentication powered by Supabase.

Supports:

• Email & Password
• Google OAuth
• Persistent Sessions
• Protected Routes
• Secure Authentication Guards

---

Performance

watchNXT is designed with performance as a priority.

Features include:

• Server Side Rendering (SSR)
• Route-based Data Loading
• Optimized API Requests
• Lazy Loading
• Efficient Query Caching
• Type-safe Server Functions

---

Technology Stack

Frontend

• React 19
• TanStack Start
• TanStack Router
• TanStack Query
• TypeScript
• Tailwind CSS v4
• Radix UI
• Sonner
• Lucide Icons

---

Backend

• Supabase
• PostgreSQL
• Row Level Security (RLS)
• Supabase Authentication
• Server Functions

---

External APIs

TMDB

Used for:

• Movies
• TV Shows
• Images
• Recommendations
• Cast
• Crew
• Watch Providers

https://www.themoviedb.org/

---

AniList

Used for:

• Anime
• Characters
• Recommendations
• Search

https://anilist.co/

---

Project Architecture

watchNXT
│
├── docs/
│   ├── demo/
│   │   └── watchnxt-demo.webp
│   │
│   └── screenshots/
│       ├── anime-detail.png
│       ├── discovery-wheel.png
│       ├── home.png
│       ├── journal.png
│       ├── movie-detail.png
│       ├── profile.png
│       ├── search.png
│       ├── tv-detail.png
│       └── watchlist.png
│
├── public/
│
├── src/
│   ├── components/
│   ├── hooks/
│   ├── integrations/
│   ├── lib/
│   ├── routes/
│   ├── services/
│   ├── styles/
│   └── utils/
│
├── supabase/
│
├── package.json
└── README.md

---

Installation

Clone the repository.

git clone https://github.com/nithingoud78/watchNXT.git

cd watchNXT

Install dependencies.

npm install

---

Environment Variables

Copy the example environment file.

cp .env.example .env

Required variables.

VITE_SUPABASE_URL=

VITE_SUPABASE_PUBLISHABLE_KEY=

SUPABASE_SERVICE_ROLE_KEY=

TMDB_API_KEY=

---

Running Locally

Development server

npm run dev

Production build

npm run build

Preview production build

npm run start

---

Deployment

watchNXT can be deployed to platforms supporting modern Node.js applications.

Recommended providers:

• Vercel
• Railway
• Render
• Self-hosted Node.js

Ensure all environment variables are configured before deployment.

Live Website

https://watchnxt-hub.vercel.app/

---

Security

The project follows modern security practices.

• Server-side API keys
• Supabase Row Level Security (RLS)
• Protected Authentication
• Secure Session Management
• Environment Variable Isolation

---

Documentation

Additional documentation can be found in the /docs directory.

• Architecture
• Development Guide
• Deployment Guide
• Environment Setup

---

Roadmap

Future improvements may include:

• Native Mobile Applications
• Notifications
• Advanced Recommendation Algorithms
• Streaming Availability Filters
• Social Features
• Multi-language Support
• Statistics Dashboard
• AI-powered Recommendations

---

Contributing

Contributions are currently not being accepted.

If you discover a bug or security issue, please open an Issue.

---

License

This project is licensed under the watchNXT Proprietary License.

The source code is publicly viewable for educational and evaluation purposes only.

Commercial use, redistribution, modification, reverse engineering for redistribution, or creation of derivative works is prohibited without prior written permission.

See the LICENSE file for complete terms.

---

Author

K Nithin Kumar Goud

GitHub

https://github.com/nithingoud78

Repository

https://github.com/nithingoud78/watchNXT

Live Website

https://watchnxt-hub.vercel.app/

Email

k.nithingoud78@gmail.com

---

⭐ If you like the project, consider starring the repository.

Made with ❤️ using React, TanStack Start and Supabase.