NewTube: Building a Video Platform

The Problem Space

Before developing NewTube, I identified several limitations with existing open-source video platforms:

• Poor Video Infrastructure: Most clones rely on basic HTML5 video without adaptive bitrate streaming, CDN delivery, or thumbnail generation.
• No Creator Tools: Existing platforms lack intelligent metadata generation, forcing creators to manually craft titles, descriptions, and tags.
• Type Unsafe APIs: REST-based architectures introduce runtime errors at the boundary between client and server, especially in complex apps.
• Rigid Architectures: Monolithic codebases make it hard to iterate on individual features without breaking the entire application.

System Architecture

I designed NewTube with a module-based architecture using Next.js 15 App Router. Each major feature — video player, creator studio, playlists, comments — is an isolated module with its own tRPC router, schema, and UI components.

1. Mux Video Pipeline: Professional video infrastructure with adaptive bitrate streaming, automatic thumbnail generation, and global CDN delivery.
2. tRPC API Layer: End-to-end type safety between client and server with zero runtime type errors. Every procedure is fully typed from input validation to response.
3. AI Content Engine: Integrated AI-powered title and description generation that analyzes video content and suggests optimized metadata for creators.
4. Drizzle ORM: Type-safe database layer with automatic migrations and query building, connected to PostgreSQL.

Technical Implementation

The project is built on Next.js 15 with the App Router, using tRPC for the API layer and Drizzle ORM for database access. Here's how the core video upload pipeline works:

// tRPC Video Upload Procedure
export const videoRouter = createTRPCRouter({
  create: protectedProcedure
    .input(z.object({
      title: z.string().min(1).max(200),
      description: z.string().optional(),
      categoryId: z.string().optional(),
    }))
    .mutation(async ({ ctx, input }) => {
      // 1. Create Mux upload URL
      const upload = await mux.video.uploads.create({
        cors_origin: process.env.NEXT_PUBLIC_URL,
        new_asset_settings: {
          playback_policy: ["public"],
          encoding_tier: "smart",
        },
      });

      // 2. Create video record in database
      const [video] = await ctx.db.insert(videos).values({
        userId: ctx.user.id,
        title: input.title,
        description: input.description,
        muxUploadId: upload.id,
        muxStatus: "waiting",
      }).returning();

      return { video, uploadUrl: upload.url };
    }),
});

Key Features

• Advanced Mux Video Player with quality controls and adaptive bitrate streaming.
• AI-Powered Title & Description Generation that analyzes video content for optimized metadata.
• Creator Studio with detailed performance metrics, view counts, and engagement analytics.
• Custom Playlist Management with drag-and-drop reordering and public/private visibility.
• Threaded Comment System with nested replies and real-time updates.
• Real-time Subscriptions and like tracking with optimistic UI updates.

Impact & Results

• Achieved professional-level video delivery via global CDN integration.
• Simplified the creator workflow through automated AI metadata generation.
• Built a robust, type-safe API layer that ensures 0 runtime errors between client and server.
• Delivered a fully responsive, tactile interface for all device types.