Next JS OTT Platform using Mongo DB , Tailwind CSS , Ant D

Explore authentication and authorization for a Next.js OTT app using Clerk, a comprehensive user management library with sign in, sign up components, and data integration with MongoDB.

Integrate Clerk with Next.js by installing Clerk, configuring environment variables, and updating middleware to protect routes; wrap the app with the Clerk provider to enable sign in and sign up.

Master the end-to-end authentication flow in a Next.js app with clerk components, including signup with email verification, sign-in, sign-out, and displaying user details.

Style authentication pages in a next-js app with a black‑and‑white two-color theme, a two-part grid sign-in page, centered form, lucid react icons, and clerk login configurations including disabling Google.

Install mongoose and configure a MongoDB connection using a database URL from dot env, then connect to MongoDB in a Next.js app and verify the connection.

Learn how to build a MongoDB user model for a Next.js OTT platform, linking users to movies, web series, and payments while preserving data across authentication providers like Clerk.

Store and fetch the current clerk user in a MongoDB users collection with Next.js server actions, creating a new user using clerk user ID and profile picture when absent.

Implement dynamic username click handling in the layout: admins open the sidebar while normal users navigate to their profile, using next router, uppercase usernames, and cursor pointers.

Build the admin layout for a Next.js ott platform with a toggleable admin sidebar, an entity drawer, and dynamic menu items (home, users, shows, subscriptions, reports) showing active state.

Construct the show model for a next js ott platform, defining title, type, release dates, duration, cast and crew, promotional content, media content, episodes, and an active flag default true.

Implement server actions in shows.ts to perform crud on the show model—create, edit by id, delete by id, get all, and get by id—using the layout provider for MongoDB.

Build the shows CRUD UI in a Next.js app by creating a reusable page title component, a client navigation button, and server‑client boundaries, enabling admin navigation and active menu highlighting.

Design and implement a show form workflow in a Next.js OTT platform, guiding users through basic details, cast and crew, and media content with step navigation and client state.

Render the show form’s basic step by wrapping fields in the entity form component with a vertical layout, capturing title, type, genre, and on finish printing values.

Implement the cast and crew step in the show form by adding, editing, validating, and deleting cast entries while managing form data and step navigation.

Build the media step for web series by managing episodes with add, edit, delete, and video uploads, while enabling dynamic titles and validation.

Fixes a bug in the media step by creating preview URLs for main image and other files using URL.createObjectURL, ensuring previews render and data persists across steps.

Integrate Firebase with Next.js to handle media uploads by configuring Firebase, creating a web app, and securing keys with environment variables using the NEXT_PUBLIC_ prefix.

Implement the show form onFinish logic, manage loading, upload images and videos to firebase, handle movie and web series content and episodes, then create the show and navigate to admin/shows.

Build a shows display table with Next.js and MongoDB, enabling edit and delete via server actions, client rendering, and date formatting with dejs, with revalidate path on changes.

Learn the edit show flow in a Next.js OTT platform by navigating to admin/show/edit/[id], fetching show details with get show by ID, and populating the form with initial values.

Handle media in edit shows by normalizing file or url data with getFilesListArray for main image, trailer, and banner, enabling previews. Save by id or add and navigate on cancel.

Delete show by id in the shows table, manage loading and errors, and revalidate admin/shows after a successful response.

Fix a service workers error while uploading movies and episodes by wrapping the map logic in await Promise.all, ensuring episodes resolve to concrete values instead of promises.

Build a responsive single show page with a banner or main image, title, release dates, description, and cast, plus watch trailer and subscribe now actions, and a bottom video player.

Show info page part 2 renders three action buttons—play now, watch trailer, and subscribe now—beneath the banner, with subscription-driven visibility and a trailer modal with a dynamic title.

integrate the width stack video player into a Next.js ott platform to play trailers and movies, configure imports, modal playback, and conditional access based on user subscription.