TweetTube

TweetTube is a full-stack video sharing application with:

• an Express + MongoDB backend API
• a React + Vite frontend
• JWT-based authentication
• Cloudinary media uploads
• features for videos, comments, likes, subscriptions, tweets, playlists, dashboard stats, and watch history

This README is focused on setup and deployment.

Tech Stack

Backend

• Node.js
• Express
• MongoDB Atlas with Mongoose
• JWT auth
• Multer
• Cloudinary

Frontend

• React
• React Router
• Axios
• Vite

Project Structure

.
├── src/                # Backend source
├── public/             # Backend public assets
├── frontend/           # React + Vite frontend
├── package.json        # Backend package.json
└── readme.md

Prerequisites

Make sure these are installed before running or deploying:

• Node.js 18+ recommended
• npm 9+ recommended
• MongoDB Atlas database
• Cloudinary account

Environment Variables

Create a .env file in the project root for the backend.

Example:

PORT=8000
MONGODB_URI=your_mongodb_connection_string
ACCESS_TOKEN_SECRET=your_access_token_secret
ACCESS_TOKEN_EXPIRY=1d
REFRESH_TOKEN_SECRET=your_refresh_token_secret
REFRESH_TOKEN_EXPIRY=10d
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
CORS_ORIGIN=http://localhost:5173

Notes:

• the backend database name is appended in code as BACKENDDB
• never commit real secrets to Git
• example files are available at .env.example and frontend/.env.example
• if you deploy the frontend and backend on different domains, set CORS_ORIGIN or FRONTEND_URL for the deployed frontend

Local Development

1. Install backend dependencies

npm install

2. Install frontend dependencies

cd frontend
npm install

3. Start the backend

From the project root:

npm run dev

Backend runs on:

http://localhost:8000

4. Start the frontend

From frontend/:

npm run dev

Frontend runs on:

http://localhost:5173

Health Check

The backend health endpoint is:

GET /api/v1/healthcheck

Example:

http://localhost:8000/api/v1/healthcheck

Frontend Environment Variables

Create a frontend env file when needed, for example frontend/.env.production:

VITE_API_BASE_URL=https://your-backend-domain.com/api/v1
VITE_BASE_PATH=/backend_project/

Notes:

• use VITE_API_BASE_URL to point the frontend at your deployed backend
• use VITE_BASE_PATH when deploying under a subpath such as GitHub Pages project sites
• for local development, VITE_BASE_PATH=/ is correct

Important Frontend Deployment Note

The frontend now reads its API URL from frontend/src/api/api.js using VITE_API_BASE_URL.

Example:

VITE_API_BASE_URL=https://your-backend-domain.com/api/v1

Backend Deployment

You can deploy the backend to platforms like:

• Render
• Railway
• Cyclic
• VPS with PM2 and Nginx

Backend deployment steps

1. Push the project to GitHub.
2. Create a backend service on your hosting platform.
3. Set the root directory to the repository root.
4. Add all backend environment variables from the .env example.
5. Use this install command:

npm install

6. Use this start command:

node src/index.js

Backend production checklist

• add all environment variables
• verify MongoDB Atlas network access allows your host
• verify Cloudinary credentials are correct
• confirm the deployed backend can respond at /api/v1/healthcheck
• update CORS in src/app.js to allow your frontend domain

Frontend Deployment

You can deploy the frontend to platforms like:

• Vercel
• Netlify
• Cloudflare Pages
• Render Static Site

Frontend build steps

From frontend/:

npm install
npm run build

The production build output is generated in:

frontend/dist

Frontend deployment checklist

1. Set your frontend environment variables.

For GitHub Pages project deployment:

VITE_API_BASE_URL=https://your-backend-domain.com/api/v1
VITE_BASE_PATH=/backend_project/

For root-domain static deployment:

VITE_API_BASE_URL=https://your-backend-domain.com/api/v1
VITE_BASE_PATH=/

2. Build the frontend:

cd frontend
npm run build

3. Deploy the frontend/dist folder to your static host.
4. If using GitHub Pages, the included 404.html provides SPA route fallback for refreshes.

GitHub Pages deployment

This repo now includes an automatic GitHub Pages workflow at .github/workflows/deploy-pages.yml.

For this repository, it builds with:

VITE_BASE_PATH=/backend_project/

Before the deployed app can call your backend, set this GitHub repository variable:

VITE_API_BASE_URL

Example value:

https://your-backend-domain.com/api/v1

Then in GitHub:

1. Open the repository.
2. Go to Settings.
3. Go to Pages.
4. Set Source to GitHub Actions.
5. Go to Settings > Secrets and variables > Actions > Variables.
6. Add VITE_API_BASE_URL with your deployed backend URL.
7. Push to main to trigger deployment.

Deploying Backend and Frontend Together

Recommended setup:

• deploy the backend separately as an API service
• deploy the frontend separately as a static site
• point the frontend API base URL to the deployed backend

Example:

• frontend: https://tweettube.vercel.app
• backend: https://tweettube-api.onrender.com

Then set:

VITE_API_BASE_URL=https://tweettube-api.onrender.com/api/v1
VITE_BASE_PATH=/

And allow the frontend origin in backend CORS with CORS_ORIGIN=https://tweettube.vercel.app.

Common Deployment Issues

Frontend loads but API requests fail

Likely causes:

• frontend still points to localhost
• VITE_BASE_PATH does not match the deployed subpath
• backend CORS does not allow the frontend domain
• backend server is down

Login or cookies do not work in production

Likely causes:

• secure cookie settings in production
• frontend and backend are on different domains
• CORS and credentials are not configured correctly

Media upload fails

Likely causes:

• Cloudinary keys are missing or invalid
• upload file size is too large
• temporary file handling fails on the deployment platform

Database connection fails

Likely causes:

• invalid MongoDB URI
• MongoDB Atlas IP/network rules are blocking the host

Useful Commands

Backend

npm run dev
node src/index.js

Frontend

cd frontend
npm run dev
npm run build

Future Improvements

For a cleaner production deployment, consider:

• adding a backend start script in root package.json
• hiding debug console.log output in backend upload/auth code
• adding deployment configs for Render, Railway, or Vercel

Author

Built as a full-stack backend-focused learning project and expanded into the TweetTube UI.

Special credit to Hitesh Choudhary, whose teaching and backend content helped shape the learning journey behind this project.