🎬 ReelsTube - MERN Stack Video Platform

A full-stack TikTok/Instagram Reels clone built with the MERN stack (MongoDB, Express.js, React, Node.js). Users can upload short videos, scroll through an infinite feed, like content, and interact with other users.

⚡ NEW: Cloudinary Integration

Videos and images are now stored in the cloud with Cloudinary for:

• 🌍 Global CDN delivery - Fast video streaming worldwide
• 🎯 Automatic optimization - Smart compression and format selection
• 📸 Auto thumbnails - Generated from uploaded videos
• 📊 Real-time analytics - Monitor usage and performance
• 💾 Scalable storage - No local storage limits

✨ Features

🎥 Core Video Features

• Upload short videos (up to 60 seconds, 50MB) to Cloudinary
• Infinite scroll feed with TikTok-style navigation
• Auto-play videos when in viewport
• Like and unlike videos with real-time counts
• Comments system with nested replies
• Auto-generated thumbnails from videos

👥 User Management

• JWT Authentication (register/login)
• User profiles with avatars stored on Cloudinary
• Follow/unfollow system
• User search functionality
• Profile customization

📱 Modern UI/UX

• Mobile-first responsive design
• Dark/light theme support
• Smooth animations and transitions
• Touch-friendly interactions
• Keyboard navigation support

⚡ Performance & Scalability

• Cloudinary CDN for optimized video streaming
• Lazy loading and code splitting
• Database indexing for fast queries
• File upload with progress tracking
• Real-time updates without page refresh

🏗️ Architecture

reels-platform/
├── reels-backend/          # Express.js API Server
│   ├── src/
│   │   ├── config/         # Cloudinary configuration
│   │   ├── controllers/    # Route handlers
│   │   ├── models/         # MongoDB schemas
│   │   ├── routes/         # API endpoints
│   │   ├── middleware/     # Auth, Cloudinary uploads
│   │   └── utils/          # Helper functions
│   └── package.json
│
├── reels-frontend/         # React Frontend
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── contexts/       # State management
│   │   ├── lib/            # API client & utils
│   │   └── hooks/          # Custom hooks
│   └── package.json
│
├── CLOUDINARY_SETUP.md    # Cloudinary setup guide
└── README.md               # This file

🚀 Quick Start

Prerequisites

• Node.js 20+ or Bun (recommended)
• MongoDB (local or cloud)
• Cloudinary Account (free tier available)
• Git

1. Clone Repository

git clone <repository-url>
cd reels-platform

2. Cloudinary Setup (Required)

Quick Setup:

1. Go to cloudinary.com and create free account
2. Get your Cloud Name, API Key, and API Secret from Dashboard
3. See CLOUDINARY_SETUP.md for detailed guide

3. Backend Setup

cd reels-backend

# Install dependencies
npm install  # or bun install

# Set up environment variables
cp .env.example .env
# Edit .env with your MongoDB URI, JWT secrets, and Cloudinary credentials

# Start development server
npm run dev  # or bun run dev

The backend will run on http://localhost:5000

4. Frontend Setup

cd ../reels-frontend

# Install dependencies  
npm install  # or bun install

# Set up environment variables
cp .env.example .env
# Update VITE_API_URL if needed

# Start development server
npm run dev  # or bun dev

The frontend will run on http://localhost:3000

5. Database Setup

Local MongoDB:

# Install MongoDB locally or use Docker
docker run -d -p 27017:27017 --name mongodb mongo:latest

MongoDB Atlas (Cloud):

1. Create account at mongodb.com/atlas
2. Create new cluster
3. Get connection string
4. Update MONGODB_URI in backend .env

📋 Environment Variables

Backend (.env)

PORT=5000
MONGODB_URI=mongodb://localhost:27017/reels-platform
JWT_SECRET=your-super-secret-jwt-key-change-this-in-production
JWT_REFRESH_SECRET=your-super-secret-refresh-key-change-this-in-production
JWT_EXPIRES_IN=7d
CLIENT_URL=http://localhost:3000
NODE_ENV=development

# Cloudinary Configuration (Required)
CLOUDINARY_CLOUD_NAME=your-cloud-name
CLOUDINARY_API_KEY=your-api-key
CLOUDINARY_API_SECRET=your-api-secret

Frontend (.env)

VITE_API_URL=http://localhost:5000/api

🛠️ Development Workflow

Backend Commands

cd reels-backend

# Development with auto-reload
npm run dev

# Production build
npm run build

# Start production server
npm run start

# Type checking
npm run type-check

Frontend Commands

cd reels-frontend

# Development server
npm run dev

# Production build
npm run build

# Preview production build
npm run preview

# Type checking
npm run type-check

📚 API Documentation

Authentication Endpoints

• POST /api/auth/register - User registration
• POST /api/auth/login - User login
• GET /api/auth/profile - Get current user
• PUT /api/auth/profile - Update profile
• PUT /api/auth/avatar - Upload avatar (to Cloudinary)

Reels Endpoints

• GET /api/reels - Get reels feed (paginated)
• POST /api/reels - Upload new reel (to Cloudinary)
• GET /api/reels/:id - Get specific reel
• POST /api/reels/:id/like - Like/unlike reel
• POST /api/reels/:id/comments - Add comment
• GET /api/reels/:id/comments - Get comments

Users Endpoints

• GET /api/users/search - Search users
• GET /api/users/:id - Get user profile
• POST /api/users/:id/follow - Follow/unfollow user
• GET /api/users/:id/followers - Get followers
• GET /api/users/:id/following - Get following

🔧 Tech Stack Details

Backend

• Runtime: Bun (or Node.js)
• Framework: Express.js
• Database: MongoDB with Mongoose ODM
• Authentication: JWT (JSON Web Tokens)
• Cloud Storage: Cloudinary for videos/images
• File Upload: Multer + Cloudinary Storage
• Password Hashing: bcryptjs
• Language: TypeScript

Frontend

• Framework: React 19 with TypeScript
• Routing: React Router v7
• Styling: Tailwind V4 + ShadCN UI
• State Management: React Context + TanStack Query
• HTTP Client: Custom Fetch wrapper
• Build Tool: Vite 6
• Icons: Lucide React

Cloud Infrastructure

• Video Storage: Cloudinary
• CDN: Cloudinary's global CDN
• Image Processing: Automatic optimization
• Video Processing: Compression and format conversion

🌟 Cloudinary Benefits

Automatic Optimizations

• Smart compression based on device and connection
• Format selection (WebM, MP4, etc.)
• Quality adaptation for different screen sizes
• Thumbnail generation from videos

Global Performance

• CDN delivery from 200+ locations worldwide
• Adaptive bitrate streaming
• Lazy loading support
• Progressive image loading

Developer Experience

• Simple API - just upload and get URLs
• Real-time transformations via URL parameters
• Analytics dashboard for monitoring usage
• Webhook support for advanced workflows

🚀 Deployment Options

Recommended: Vercel + Railway + Cloudinary

• Frontend: Deploy to Vercel (automatic)
• Backend: Deploy to Railway (with env vars)
• Database: MongoDB Atlas (cloud)
• Media: Cloudinary (already integrated)

Alternative: Docker

# Build and run with Docker Compose
docker-compose up -d

Traditional VPS

• Set up Node.js and MongoDB
• Configure Cloudinary environment variables
• Use PM2 for process management
• Set up Nginx reverse proxy

🔒 Security Features

• JWT Authentication with refresh tokens
• Password hashing with bcrypt
• Cloudinary secure uploads with signed URLs
• File type validation (videos/images only)
• Rate limiting on API endpoints
• CORS configuration for cross-origin requests
• Environment variable protection

📈 Performance Optimizations

Backend

• Database indexing for fast queries
• Cloudinary CDN for global media delivery
• Pagination for large datasets
• Caching strategies with TanStack Query

Frontend

• Code splitting with React.lazy
• Cloudinary automatic optimization
• Virtual scrolling for infinite feeds
• Request caching with TanStack Query
• Intersection Observer for video auto-play

🧪 Testing Upload Flow

1. Start both servers (backend + frontend)
2. Register/login to your account
3. Go to Create page (/create)
4. Select a video file (MP4, MOV, WebM)
5. Fill in title/description
6. Click Upload - video goes to Cloudinary
7. Check Cloudinary Dashboard - see your uploaded files
8. View in feed - video streams from Cloudinary CDN

🎯 Roadmap

• Real-time notifications with WebSockets
• Advanced video editing with Cloudinary transformations
• Live streaming with Cloudinary Live
• AI-powered recommendations
• Content moderation with Cloudinary AI
• Mobile app with React Native
• Analytics dashboard for creators

💡 Usage Examples

Upload Video to Cloudinary

// Backend automatically handles Cloudinary upload
const formData = new FormData();
formData.append('video', videoFile);
formData.append('title', 'My awesome reel');

const response = await api.createReel(formData);
// Returns Cloudinary URL, not local path

Auto-Generated Thumbnails

// Thumbnail automatically created from video
const thumbnailUrl = generateVideoThumbnail(videoUrl);
// Returns optimized thumbnail from Cloudinary

🤝 Contributing

1. Fork the repository
2. Create feature branch (git checkout -b feature/amazing-feature)
3. Test with Cloudinary (use your own account for testing)
4. Commit changes (git commit -m 'Add amazing feature')
5. Push to branch (git push origin feature/amazing-feature)
6. Open Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

⭐ Ready to build the next TikTok? This platform provides everything you need with enterprise-grade cloud infrastructure!