Git Product home page Git Product logo

videosharing's Introduction

Frontend repo: https://github.com/halo8880/sharevideo-fe

Project introduction

This is a simple project that allows users to share Youtube video URLs with each other. The backend service will fetch the video information and store it in the database. The frontend app will display the video information and allow users to play the video. The system also supports real-time notification when a new video is shared.

Tech stack

Backend Tech used: Java, Spring framework, Postgres, redis (as message broker and cache database), JWT authentication, websocket
Frontend tech: React, Material-UI
Important versions: Java 17, React 18, postgreSQL 11, Redis 7 , Spring boot 3
Deployment: Docker, docker-compose
Development tools: Maven 3.8.3

High level design

img.png

Due to tight deadline and having spent too much time focusing on design and backend service, the frontend is not as good as I expected.

How to deploy locally

how to run locally using docker:

  1. make sure you have docker and docker-compose installed
  2. clone the repo
  3. cd into docker/deliver: cd docker/deliver
  4. run docker-compose up redis postgres -d and wait for some seconds to make sure those services are up and running
  5. run docker-compose up backend frontend -d to start the remaining services
  6. The frontend app should be running at http://localhost:3000
  7. The backend app should be running at http://localhost:8081

How to run development mode

Backend:

postgres credentials:
  POSTGRES_DB: mydb
  POSTGRES_USER: user
  POSTGRES_PASSWORD: user
  1. make sure you have docker, Java 17
  2. cd into docker/deliver: cd docker/deliver
  3. run docker-compose up redis postgres -d and wait for some seconds to make sure those services are up and running
  4. cd into root dir again: cd ../../
  5. modify connection configs: in file src/main/resources/application.properties:
    change spring.datasource.url=jdbc:postgresql://postgres:5432/mydb to spring.datasource.url=jdbc:postgresql://localhost:5432/mydb
    change redis.host=redis to redis.host=localhost
  6. For linux/mac: run ./mvnw spring-boot:run to start the backend app
  7. For windows: run ./mvnw.cmd spring-boot:run to start the backend app
  8. If get error at step 6, check JAVA_HOME environment variable, it should point to the root of your JDK installation
  9. The backend app should be running at http://localhost:8081

Frontend:

  1. cd into frontend dir
  2. run npm install to install all the dependencies
  3. run npm start to start the frontend app
  4. The frontend app should be running at http://localhost:3000

How to use:

After signing in, there will be a button to share Youtube video URLs, the system current support 3 formats:

  1. https://www.youtube.com/watch?v=videoId
  2. https://youtu.be/videoId
  3. https://youtube.com/videoId

You won't be able to share same video twice.
The news feed will be updated once a new video is shared.
Will need to login again after refreshing the page.
If you enter a not existed username to login, it will automatically register that username/password account and do the login
A use is treated as offline if last activity is more than 5 minutes. (configurable in app.lastSeenThresholdInSeconds)

How to run tests

Included the tests for important classes and methods.

Backend:

  1. for linux/mac: run ./mvnw test to run all the tests
  2. for windows: run ./mvnw.cmd test to run all the tests

videosharing's People

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.