Demo and Architecture

I would love to publically host the demo for this project. But this is the internet, and someone is inevitably going to upload p*rn, or something even worse. And I would rather not deal with any legal issues =)

Demo

1. List videos
2. Watch a video
3. Sign in/out
4. Upload a video
5. Watch the transcoded video

Tech Stack

1. TypeScript
2. Next.js
3. Express.js
4. Docker
5. FFmpeg
6. Firebase Auth
7. Firebase Functions
8. Firebase Firestore
9. Google Cloud Storage
10. Google Cloud Pub/Sub
11. Google Cloud Run

Architecture

There are a lot of nuanced details that I left out of this diagram, but this is the general idea. To learn more you can checkout this short design doc.

1. Cloud Storage will store the raw and processed videos uploaded by users.
2. Pub/Sub will send messages to the video processing service.
3. Cloud Run will host a non-public video processing service. After it transcodes videos, they will be uploaded to Cloud Storage.
4. Cloud Firestore will store the metadata for the videos.
5. Cloud Run will host a Next.js app, which will serve as the Youtube web client.
6. The Next.js app will make API calls to Firebase Functions.
7. Firebase Functions will fetch videos from Cloud Firestore and return them.

Useful Links:

1. TypeScript Official Website
2. Next.js Documentation
3. Express.js Official Website
4. Docker Official Website
5. FFmpeg Official Website
6. Firebase Authentication
7. Firebase Functions
8. Firebase Firestore
9. Google Cloud Storage
10. Google Cloud Pub/Sub
11. Google Cloud Run
12. Next.js API Routes
13. YouTube Data API