A production-ready video sharing platform built with modern web technologies. Features secure authentication, cloud-based storage, real-time notifications, and a responsive user interface.
- Features
- Tech Stack
- Project Structure
- Getting Started
- API Endpoints
- Database Schema
- Security
- Contributing
- License
- Contact
- Video Management: Upload, view, and manage videos with automatic thumbnail generation
- User Authentication: Secure JWT-based authentication with NextAuth.js
- Cloud Storage: ImageKit integration for reliable media hosting and optimization
- Real-time Feedback: Toast notifications for user actions and system events
- Responsive Design: Mobile-first interface built with Tailwind CSS
- Database Persistence: MongoDB for scalable data storage with Mongoose ODM
- Docker Support: Pre-configured Docker setup for consistent development and production environments
| Layer | Technology |
|---|---|
| Frontend | Next.js 15, React 19, TypeScript, Tailwind CSS 4 |
| Backend | Node.js, Next.js API Routes, NextAuth.js |
| Database | MongoDB, Mongoose ODM |
| Storage | ImageKit |
| Security | bcryptjs, JWT, Middleware-based protection |
| DevOps | Docker, Docker Compose |
| Tools | ESLint, PostCSS, Turbopack |
.
├── app/
│ ├── api/ # API routes
│ │ └── auth/ # Authentication endpoints
│ │ ├── register/ # User registration endpoint
│ │ ├── [...nextauth]/ # NextAuth configuration
│ │ └── imagekit-auth/ # ImageKit auth parameters
│ ├── components/ # Reusable React components
│ │ ├── Header.tsx # Navigation header
│ │ ├── VideoFeed.tsx # Video grid display
│ │ ├── Video.tsx # Single video component
│ │ ├── VideoUploadForm.tsx # Upload form
│ │ ├── FileUpload.tsx # File upload with progress tracking
│ │ ├── Notification.tsx # Toast notification system
│ │ └── Providers.tsx # Context providers
│ ├── login/ # Login page
│ ├── register/ # Registration page
│ ├── upload/ # Protected upload page
│ ├── layout.tsx # Root layout wrapper
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── lib/
│ ├── auth.ts # NextAuth configuration
│ ├── db.ts # MongoDB connection handler
│ └── api-client.ts # HTTP client utilities
├── models/
│ ├── User.ts # User database schema
│ ├── Video.ts # Video database schema
│ └── types.d.ts # TypeScript type definitions
├── public/ # Static assets
├── middleware.ts # Authentication middleware
├── next.config.ts # Next.js configuration
├── Dockerfile # Production Docker image
├── Dockerfile.dev # Development Docker image
├── docker-compose.yml # Production Docker setup
├── docker-compose.dev.yml # Development Docker setup
└── .env.example # Environment variables template
- Docker Desktop (includes Docker Compose)
Before running Docker containers, you must configure your environment variables:
# Copy the example environment file
cp .env.example .envEdit .env with your actual credentials:
# MongoDB configuration
MONGO_ROOT_USERNAME=admin
MONGO_ROOT_PASSWORD=your-secure-password
MONGO_INITDB_DATABASE=nextjs
# Application configuration
MONGODB_URI=mongodb://admin:your-secure-password@mongodb:27017/nextjs
NEXTAUTH_SECRET=your-generated-secret-key-min-32-characters
NEXTAUTH_URL=http://localhost:3000
# ImageKit configuration
NEXT_PUBLIC_IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/your-id
NEXT_PUBLIC_PUBLIC_KEY=your-public-key
IMAGEKIT_PRIVATE_KEY=your-private-key# Clone the repository
git clone https://github.com/aniketchawardol/NextJS-yt-clone.git
cd nextjs
# Start the development environment with hot-reload
docker-compose -f docker-compose.dev.yml up --buildThe application will be available at http://localhost:3000 with hot-reload enabled for active development. Code changes in app/, lib/, models/, and public/ directories will automatically trigger recompilation.
# Build and start production containers
docker-compose up --build -d
# View application logs
docker-compose logs -f nextjs
# Stop all containers
docker-compose down
# Clean up volumes (be careful - this deletes data!)
docker-compose down -vKey Docker Features:
- Non-root user execution: Application runs as
nodeuser, not root - Multi-stage builds: Production images optimized for minimal size (~200MB vs 1GB+)
- Runtime secret loading: Secrets from
.envfile loaded at container startup, not during build - Internal database port: MongoDB only accessible within Docker network
- Health checks: Automatic container health monitoring and restart policies
- Separate configurations: Development and production setups isolated for different needs
- Node.js v20 or higher
- npm (included with Node.js)
- MongoDB Atlas account or local MongoDB instance
- ImageKit account for media management
-
Clone and install dependencies
git clone https://github.com/aniketchawardol/NextJS-yt-clone.git cd nextjs npm install -
Configure environment variables
cp .env.example .env.local
Edit
.env.localwith your credentials:# MongoDB connection string MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/dbname # NextAuth configuration NEXTAUTH_SECRET=generate-a-random-secret-string-here NEXTAUTH_URL=http://localhost:3000 # ImageKit credentials NEXT_PUBLIC_IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/your-id NEXT_PUBLIC_PUBLIC_KEY=your-public-key IMAGEKIT_PRIVATE_KEY=your-private-key
-
Run the development server
npm run dev
Open http://localhost:3000 in your browser.
npm run dev # Start development server with hot-reload
npm run build # Build application for production
npm start # Start production server
npm run lint # Run ESLint code analysis| Method | Endpoint | Authentication | Description |
|---|---|---|---|
| GET | /api/video |
None | Retrieve all videos |
| POST | /api/video |
Required | Create a new video |
| Method | Endpoint | Purpose |
|---|---|---|
| POST | /api/auth/register |
Register new user account |
| POST | /api/auth/[...nextauth] |
NextAuth endpoints (signin, signout, callback) |
| GET | /api/auth/imagekit-auth |
Retrieve ImageKit authentication parameters |
{
_id: ObjectId,
email: string (unique, required),
password: string (bcrypt hashed, required),
createdAt: Date (auto-generated),
updatedAt: Date (auto-generated)
}{
_id: ObjectId,
title: string (required),
description: string (required),
videoUrl: string (required),
thumbnailUrl: string (required),
uploadedBy: ObjectId (reference to User),
controls: boolean (default: true),
transformation: {
height: number (default: 1920),
width: number (default: 1080),
quality: number (1-100, default: 80)
},
createdAt: Date (auto-generated),
updatedAt: Date (auto-generated)
}| Route | Description | Access Level |
|---|---|---|
/ |
Video feed homepage | Public |
/login |
User authentication page | Public |
/register |
User registration form | Public |
/upload |
Video upload interface | Authenticated only |
- Password Security: Passwords hashed using bcryptjs with configurable salt rounds
- Session Management: JWT-based sessions with 30-day expiration periods
- Route Protection: Middleware-based authentication for protected endpoints
- Environment Security: Sensitive credentials stored in
.env.local(never committed to version control) - Input Validation: Server-side validation on all API endpoints
- Non-root Execution: Docker containers run as non-root user for privilege isolation
- HTTPS: Recommended for production deployments
Contributions are welcome! Please follow this workflow:
- Fork the repository
- Create a feature branch:
git checkout -b feature/your-feature-name - Make your changes and commit:
git commit -m 'Add your feature' - Push to the branch:
git push origin feature/your-feature-name - Open a Pull Request with a clear description of changes
Key npm packages:
next@15.3.3- React framework with built-in optimizationreact@19.0.0- UI librarymongoose@8.15.2- MongoDB ODMnext-auth@4.24.11- Authentication systembcryptjs@3.0.2- Password hashing@imagekit/next@2.1.2- Media management SDK@tailwindcss/postcss@4- Utility-first CSS framework
Author: Aniket Chawardol
- Email: aniketchawardol@gmail.com
- LinkedIn: aniket-chawardol
- Portfolio: chawardolaniket.is-a.dev
- GitHub: github.com/aniketchawardol
For issues, feature requests, or questions, please open an issue on the GitHub repository.