1. Introduction

Features

FE applicants should accomplish the first 3 features

• User registration and login
• Sharing YouTube videos
• Viewing a list of shared videos (no need to display up/down votes)
• Real-time notifications for new video shares: When a user shares a new video, other logged-in users should receive a real-time notification about the newly shared video. This notification can be displayed as a pop-up or a banner in the application, and it should contain the video title and the name of the user who shared it.

Demo

Front-end Back-end

Source code

Front-end Back-end

2. Prerequisites

• Modular architecture width NodeJS, ORM
• Implement the real-time notifications feature using socket.io
• Front-end using NextJS (framework using ReactJS) with tailwindCSS for UI styles component
• Cross platform: run it on Windows, Linux, MacOS
• Support Docker out of the box for easy deployment

Backend

Branch	Express	Typeorm	Postgres
master	v4	v0.2

Frontend

Branch	NextJS	ReactJS	TailwindCss
main	v13.4.10	v18.2.0	v3.3.3

Overview

1. Introduction

• Features
• Demo
• Source code

2. Prerequisites

• Backend
• Frontend

3. Installation & Configuration

• Backend Setup
• Frontend Setup

4. Usage

• 1. User Login or registration
• 2. Share Youtube videos
• 3. Viewing a list of shared videos
• 4. Real-time Notification for new video shared

5. Troubleshooting

• 1. Database Connection issue
• 2. Check & sets the required environments, variables

3. Installation & Configuration

Backend Setup

1. Clone repository and install dependencies

• Clone repository from gitthub

git clone https://github.com/truongcoino1/video-sharing-backend

cd video-sharing-backend

2. Setup and start application

Setup a development with Docker.

• copy .env, docker-compose.yml, dockerfile:

cp .env.example .env && cp docker-compose.dev docker-compose.yml && cp Dockerfile.dev Dockerfile

• build container:

docker-compose build

• install dependencies:

docker-compose run backend yarn install

3. Running the Application

docker-compose up

Server is running at http://localhost:5001

4. Start test

• Install dependencies

  npm run install

  or

  yarn install

• Run tests

  yarn test

Frontend Setup

1. Clone repository and install dependencies

git clone https://github.com/truongcoino1/video-sharing

cd video-sharing

2. Install dependencies

npm run install 

or

yarn install

3. Start application

npm run dev

or

yarn dev

Run the app in the development mode Open http://localhost:3000 to view in the browser.

4. Run test suite

npm run test

or

yarn test

5. Deploy Frontend to Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

4. Usage

1. User Login or registration

1. Go to the page (development: http://localhost:3000 and production: https://video-sharing-orpin.vercel.app/)
2. Enter email and password
3. Click on "Login/Register" button

2. Share Youtube videos

1. Once logged in. Click button "Share a movie"
2. Enter youtube link in Youtube URL input
3. Click on "Share" button

3. Viewing a list of shared videos

1. Go to the page (development: http://localhost:3000 and production: https://video-sharing-orpin.vercel.app/)
2. Video List and load more button appear

4. Real-time Notification for new video shared

1. When a user shares a new video, users will receive real-time notification
2. Video will update real-time in video list on home page
3. Notification will appear

5. Troubleshooting

1. Database Connection issue

1. Ensure that the database running
2. Check the credential username and password to connect the database

2. Check & sets the required environments, variables

1. Frontend: NEXT_PUBLIC_GATEWAY_URL, NEXT_PUBLIC_WEBSOCKET
2. Backend: MYSQL_HOST, MYSQL_PORT,MYSQL_USERNAME, MYSQL_PASSWORD MYSQL_DATABASE, DOMAIN_ORIGIN,
3. When port is already in use, you need to kill this port and restart app.

• Frontend: port 3000
• Backend: port 5001
• Database: port 5432