Yutube

A fusion of YouTube and Twitter — a platform where users upload and manage videos, publish tweets, create playlists, subscribe to channels, and engage through likes and comments. The backend handles user auth, video processing, tweet CRUD, subscriptions, and channel analytics.

I wanted to build a complete full-stack application that covers the full spectrum of backend and frontend concerns — authentication, file upload, real-time interaction, search, pagination, and responsive UI. The YouTube + Twitter fusion was a deliberate choice: it naturally requires video management, social features, and complex data relationships.

The backend (yutube) is a Node.js + Express.js REST API with MongoDB persistence:

• User Management — registration, login, profile management with avatars and cover images, watch history tracking
• Video Management — upload, publish, search with sorting/pagination, edit, delete, visibility controls
• Tweet Management — create, view, update, delete tweets integrated into the social feed
• Subscription System — channel subscriptions, subscriber list views
• Playlist Management — create, update, delete playlists, add/remove videos
• Engagement — like/unlike videos, comments, and tweets; comment management
• Dashboard — channel statistics (views, subscribers, videos, likes), uploaded videos summary
• Health Check — dedicated endpoint for monitoring

1// Modular route organization2routes/3├── user.routes.js       # Auth, profile, avatar4├── video.routes.js      # CRUD, search, publish5├── tweet.routes.js      # CRUD, timeline6├── subscription.routes.js7├── playlist.routes.js8├── like.routes.js9├── comment.routes.js10└── dashboard.routes.js  # Channel stats

The frontend (yutube-frontend) is a Nuxt 3 application:

• File-based routing matching the backend API structure
• Server-side rendering for SEO and initial page load performance
• Composition API for state management and data fetching
• Responsive layout with Tailwind CSS
• Real-time updates using WebSocket connections for social interactions

• Full-stack architecture at scale. Splitting the backend and frontend into separate repositories taught me about API contract management, CORS configuration, and deployment coordination.
• MongoDB schema design for social features. Modeling subscriptions, likes, and follows in a document database requires different thinking than SQL — embedding vs referencing, denormalization for read performance, and index strategies for social graph queries.
• File upload with Cloudinary. Integrating a third-party media service taught me about signed uploads, transformation URLs, and fallback handling for failed uploads.
• JWT auth across repos. Managing token generation on the backend and token verification on the frontend requires shared secrets, proper expiry handling, and refresh token flows.
• Nuxt 3 SSR. The server-side rendering improved initial load times significantly for video content pages, but required careful handling of browser-only APIs and hydration mismatches.

Building a YouTube + Twitter fusion taught me that social features add significant complexity to what seems like a simple CRUD application. Subscription feeds, like notifications, and engagement metrics require careful data modeling and query optimization. The project reinforced my belief in starting with a well-designed data layer — everything else follows from there.

Built to explore full-stack development patterns. View backend · View frontend · Live demo