hypertars/greloupis-frontend

Greloupis - An online video sharing platform

• Tech Stack & Compatibility

  https://img.shields.io/badge/npm-6.14.8-blue](https://blog.npmjs.org/post/626732790304686080/release-6148) https://img.shields.io/badge/Node.js-14.15.0-blue](https://nodejs.org/dist/latest-v14.x/docs/api/) https://img.shields.io/badge/React-17.0.1-blue](https://reactjs.org/versions) https://img.shields.io/badge/Nginx-14.15-blue]([] https://img.shields.io/badge/Ant_Design-4.8.5-blue]([] https://img.shields.io/badge/Material_UI-4.11.0-blue]([***] https://img.shields.io/badge/React_JW_Player-1.9.1-blue](https://www.npmjs.com/package/react-jw-player) https://img.shields.io/badge/AWS_SDK-2.797.0-blue](https://www.npmjs.com/package/aws-sdk)

• CI / CD

  https://github.com/HyperTars/Greloupis/workflows/CI/CD/badge.svg](https://github.com/HyperTars/Greloupis/actions?query=workflow%3ACI%2FCD) https://img.shields.io/docker/cloud/build/hypertars/greloupis-frontend](https://hub.docker.com/r/hypertars/greloupis-frontend) https://img.shields.io/docker/image-size/hypertars/greloupis-frontend](https://hub.docker.com/r/hypertars/greloupis-frontend/tags) https://img.shields.io/docker/cloud/automated/hypertars/greloupis-frontend](https://hub.docker.com/r/hypertars/greloupis-frontend/builds) https://pyheroku-badge.herokuapp.com/?app=greloupis-frontend&style=flat](https://greloupis-frontend.herokuapp.com/)

• Websites and Metrics Monitors
  • https://greloupis-frontend.herokuapp.com/
  • Heroku Frontend Metrics Monitor
  • https://hub.docker.com/r/hypertars/greloupis-frontend/tags

Table of Content

• Greloupis - An online video sharing platform
  • Table of Content
  • Designs
    • Homepage Design
    • Search Design
    • Player Design
    • Dashboard Design
    • Uploading Design
    • Error Page Design
    • Web Server Design
    • Coding Style
  • Setup Guide
    • Environment Requirement
    • Install Dependencies
    • Run Test
    • Run
    • Dockerize
    • Deploy
  • Contributors

Designs

Login & Register

• Login !login

• Register !register

Homepage Design

• We list Top 10 Hit Videos in our homepage.
• Private videos are hidden (not listed here). !home

Search Design

• We support multi attribute search, including
  • User: user name, user email, user state/country/zip, user street address, user phont number, etc.
  • Video: video title, video channel, video tag, video category, video description, etc.
• Private videos & pending videos(videos being transcoded and not ready for streaming) are hidden to all users except the video's author. !search

Player Design

• We support multi resolution video playback, you can select quality when you play video, including
  • FHD 1080p
  • HD 720p
  • SD 540p
• We support rewind, full screen, and keyboard control, including
  • ←: back 5 seconds
  • →: forward 5 seconds
  • ↑: volume up
  • ↓: volume down
  • num 0-9: redirect to position in percentage (0%, 10%, 20%, 30%, ... 90%)
• If logged in, we remember your last playback position, you will be redirect to the position the next time you open the video.
• You can like, dislike, star, and comment on videos.
• Private & pending videos are not allowed to be accessed unless logged in with author's account. !player

Dashboard Design

• You can manage your user profile

• You can see all videos you uploaded and their status (pending, private, public), and you can manage them (update video information or delete video)

• You can see your playback history with playback date

• You can see all the videos you starred, liked, commented.

• Private users' detail information and their private videos are hidden unless logged in by themselves.

• Self dashboard !dashboard

• Private user profile !private

Uploading Design

• You can upload your video first, after you successfully uploaded your video, you can edit video information while it is transcoding

• We will generate a thumbnail automatically, but you can upload it by yourself if you like.

• Video upload !upload

• Video update !video-update

Error Page Design

• We design three error pages
  • 403 Forbidden
  • 404 Not Found
  • 500 Internal Server Error
• You can try to access them directly
  • https://greloupis-frontend.herokuapp.com/403
  • https://greloupis-frontend.herokuapp.com/404
  • https://greloupis-frontend.herokuapp.com/500

Web Server Design

• We use nginx as our frontend webserver. See how it is configured in Dockerfile

Coding Style

• React: https://reactjs.org/docs/introducing-jsx.html

Setup Guide

Environment Requirement

• Please make sure the following dependencies are installed and configured before running

  • npm (6.14.8)
  • node.js (14.15.0)

• AWS Setup Guide

  • You should create S3 buckets for storing images and videos, set URL Endpoints and add auth keypair to Environment Variable

Install Dependencies

• To install dependencies, run

bash
make dev_env

Run Test

• To run test, run

bash
make tests

Run

• Before running

  • If you want to run frontend locally, we recommend you run backend locally at the same time
  • Otherwise, you should configure Endpoints, set it to HEROKU_ENDPOINT manually

• To run frontend only (http://localhost:3000 or [***]

  • From Docker Hub

    bash
    make docker_hub
    

  • From local docker build

    bash
    make docker_build docker_run
    

  • From native npm

    bash
    make run_frontend
    

Dockerize

• This section is for you to dockerize manually. Normally, GitHub Action will do the dockerize job once master branch is updated.
• Before dockerize, make sure you've set up environment variable
  • FRONTEND_BUILD
  • FRONTEND_REPO (you can also change it in makefile)
• To dockerize backend, run

bash
make docker_build docker_push

Deploy

• This section is for you to deploy manually. Normally, GitHub Action will do the deploy job once master branch is updated.
• Before deploy, make sure you've set up environment variable
  • FRONTEND_BUILD
  • FRONTEND_REPO (you can also change it in makefile)
  • HEROKU_API_KEY
  • HEROKU_APP_FRONTEND
• To deploy to heroku, run

bash
make heroku

Contributors