BinaryStudioAcademy / bsa-2022-streamlet

Live streaming application

BSA-2022 | Streamlet

ℹ️ General Info

This is the repository responsible for Streamlet's apps.

🏭 Applications

• Backend — Streamlet's application backend.

  To work properly, fill in the .env file. Use the .env.example file as an example.

• Frontend — Streamlet's application frontend.

  To work properly, fill in the .env file. Use the .env.example file as an example.

• Shared — Streamlet's application common modules for reuse.

🖍 Requirements

• NodeJS (16.x.x);
• NPM (8.x.x);
• PostgreSQL (14.0)
• Docker
• run npx simple-git-hooks at the root of the project, before the start (it will set the pre-commit hook for any commits).

🏃‍♂️ Simple Start

Setup database

1. Create .env folder at the root project and add api-db.env file according to .env.example

Setup apps

1. Fill ENVs in each project
2. npm install at the root
3. npx simple-git-hooks at the root

Run project

Each project run in the separate terminal

1. Go to .docker folder and run: docker compose up -d
2. Apply first migration to DB: npm run migrate
3. Run: npm run start:backend
4. Run: npm run start:frontend

Code Quality

Static analyzers are used for both frontend and backend projects to ensure basic code quality. Additionally, quality criteria rules are enforced during code review and audit.

Architecture

💽 DB Schema

erDiagram

  User {
    String id PK
    String email
    String username
    String password
    Boolean isActivated
    DateTime createdAt
    DateTime updatedAt
    }


  UserProfile {
    String id PK
    String firstName
    String lastName
    String avatar
    DateTime createdAt
    DateTime updatedAt
    }


  RefreshToken {
    String id PK
    String token
    DateTime createdAt
    DateTime updatedAt
    }

  ResetPasswordToken {
    String id PK
    String token
    String userId
    DateTime createdAt
    DateTime updatedAt
    }


  Video {
    String id PK
    String name
    String description
    Boolean isLive
    String videoPath
    Int liveViews
    Int videoViews
    DateTime createdAt
    DateTime updatedAt
    }


  Tag {
    String id PK
    String name
    DateTime createdAt
    DateTime updatedAt
    }


  Category {
    String id PK
    String name
    DateTime createdAt
    DateTime updatedAt
    }


  VideoComment {
    String id PK
    String text
    DateTime createdAt
    DateTime updatedAt
    }


  Channel {
    String id PK
    String name
    String description
    String contactEmail
    String bannerImage
    DateTime createdAt
    DateTime updatedAt
    }


  Subscription {
    String id PK
    Boolean notify
    DateTime createdAt
    DateTime updatedAt
    }


  ChatMessage {
    String id PK
    String text
    DateTime createdAt
    DateTime updatedAt
    }


  Notification {
    String id PK
    String text
    Boolean viewed
    DateTime createdAt
    DateTime updatedAt
    }


  History {
    String id PK
    DateTime createdAt
    DateTime updatedAt
    }


  Reaction {
    String id PK
    Boolean isLike
    DateTime createdAt
    DateTime updatedAt
    }

    UserProfile o|--|| User : "user"
    RefreshToken o|--|| User : "user"
    Video o{--}o Tag : ""
    Video o{--}o Category : ""
    Video o{--|| Channel : "channel"
    Tag o{--}o Video : ""
    Category o{--}o Video : ""
    VideoComment o{--|| Video : "video"
    VideoComment o{--|| User : "author"
    Channel o{--|| User : "author"
    Subscription o{--|| User : "user"
    Subscription o{--|| Channel : "channel"
    ChatMessage o{--|| Video : "video"
    ChatMessage o{--|| User : "author"
    Notification o{--|| User : "user"
    Notification o{--|| Video : "video"
    History o{--|| User : "user"
    History o{--|| Video : "video"
    Reaction o{--|| User : "user"
    Reaction o{--|| Video : "video"

Loading

🧑‍💻 CI

🗜 Tools

🌑 Backend

• Express – a backend framework.
• InversifyJS - an IoC container
• Prisma – an ORM.

🌕 Frontend

• React – a frontend library.
• Redux + Redux Toolkit – a state manager.

🥊 Code quality

• simple-git-hooks — a tool that lets you easily manage git hooks.
• lint-staged — run linters on git staged files.
• editorconfig — helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.
• prettier — an opinionated code formatter.
• ls-lint — file and directory name linter.
• eslint – find problems in your JS code
• stylelint – Find and fix problems in your CSS code

🗞 Git

📊 Branches

• production - production source code.
• development - staging source code.

🌳 Branch flow

<type>/<project-prefix><ticket-number>-<short-desc>

Types:

• task
• fix

Examples:

• task/design5-add-signin-page
• task/blog12-add-filters
• fix/design16-fix-signup-validation

🗂 Commit flow

<project-prefix>-<ticket-number>: <modifier> <desc>

Modifiers:

• + (add)
• * (edit)
• - (remove)

Examples:

• blog-5: + form component
• design-12: * filter markup
• blog-16: - require prop for nickname field

Build app in Docker locally

Specify api.env api-db.env files in .env folder Run commands from root:

docker build --build-arg REACT_APP_API_ORIGIN_URL=/api/v1 --build-arg REACT_APP_SERVER_HOST=localhost --build-arg REACT_APP_PUSH_PORT=5002 --build-arg REACT_APP_VIDEO_FALLBACK_BASE_URL=http://localhost:8080 -f .docker/frontend.Dockerfile -t frontend .
docker build -f .docker/backend.Dockerfile -t backend .
docker build -f .docker/push.Dockerfile -t push .
docker build -f .docker/video-transcoding-server.Dockerfile -t video-transcoding-server .
docker compose -f .docker/docker-compose.local.yml up -d

Run the development environment in docker (with hot reloading)

Fill the files api-debug.env and client-debug.env in .env folder. When you change the frontend, it requires page refresh.

docker compose -f .docker/debug/docker-compose.debug.yml up --build

📦 CD

Handled by GitHub Actions.