{"id":24560937,"url":"https://github.com/jeffreybernadas/digital-streaming-system","last_synced_at":"2026-04-13T09:32:26.304Z","repository":{"id":62722655,"uuid":"558646921","full_name":"jeffreybernadas/digital-streaming-system","owner":"jeffreybernadas","description":"ratebox, a web application that homes many handpicked movies around the world.","archived":false,"fork":false,"pushed_at":"2022-11-28T03:34:01.000Z","size":2914,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-13T09:35:44.672Z","etag":null,"topics":["jest","loopback4","mantine-ui","mongodb","react-testing-library","react-typescript","redux-toolkit","sonarqube"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jeffreybernadas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-10-28T01:26:39.000Z","updated_at":"2022-11-08T06:59:32.000Z","dependencies_parsed_at":"2023-01-22T15:46:15.610Z","dependency_job_id":null,"html_url":"https://github.com/jeffreybernadas/digital-streaming-system","commit_stats":null,"previous_names":["jeffreybernadas/digital-streaming-system"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jeffreybernadas/digital-streaming-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffreybernadas%2Fdigital-streaming-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffreybernadas%2Fdigital-streaming-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffreybernadas%2Fdigital-streaming-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffreybernadas%2Fdigital-streaming-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeffreybernadas","download_url":"https://codeload.github.com/jeffreybernadas/digital-streaming-system/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffreybernadas%2Fdigital-streaming-system/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31746294,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T09:16:15.125Z","status":"ssl_error","status_checked_at":"2026-04-13T09:16:05.023Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jest","loopback4","mantine-ui","mongodb","react-testing-library","react-typescript","redux-toolkit","sonarqube"],"created_at":"2025-01-23T07:21:30.835Z","updated_at":"2026-04-13T09:32:26.282Z","avatar_url":"https://github.com/jeffreybernadas.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eratebox\u003c/h1\u003e\n\n\u003cp align=\"justify\"\u003eA digital streaming platform that allows users view actors, movies, and review them with up to 5 star rating. It is also a software solution for Digital Streaming System that allows admistrators to manage movies, actors, users, and user movie reviews. It is also a place for many handpicked movies around the world. \u003c/p\u003e\n\n![ratebox](./og.png)\n\n## ⚒️ Built with the following technologies:\n\n\u003cul\u003e\n    \u003cli\u003eReact - Typescript\u003c/li\u003e\n    \u003cli\u003eHTML - SCSS\u003c/li\u003e\n    \u003cli\u003eMantine UI\u003c/li\u003e\n    \u003cli\u003eRedux Toolkit\u003c/li\u003e\n    \u003cli\u003eLoopback 4 + Authentication and Authorization\u003c/li\u003e\n    \u003cli\u003eMongoDB\u003c/li\u003e\n    \u003cli\u003eSonarqube\u003c/li\u003e\n    \u003cli\u003eReact Testing Library + Jest + Mock Service Worker\u003c/li\u003e\n\u003c/ul\u003e\n\n## ✨ Features\n\n\u003cul\u003e\n    \u003cli\u003eView Movies (Users)\u003c/li\u003e\n        \u003cul\u003e\n            \u003cli\u003eView movie details such as rating, description and more.\u003c/li\u003e\n            \u003cli\u003eSearch for movies.\u003c/li\u003e\n            \u003cli\u003eView actors that are part of the movie.\u003c/li\u003e\n            \u003cli\u003eView admin approved user reviews.\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003cli\u003eGive Movie Reviews (Users)\u003c/li\u003e\n        \u003cul\u003e\n            \u003cli\u003eSubmit a review of a movie.\u003c/li\u003e\n            \u003cli\u003eRequires account login and activation from the admin.\u003c/li\u003e\n            \u003cli\u003eCreated review will be subjected for admin approval.\u003c/li\u003e\n        \u003c/ul\u003e    \n    \u003cli\u003eView Actors (Users)\u003c/li\u003e\n        \u003cul\u003e\n            \u003cli\u003eWith actor details such as name, link, etc.\u003c/li\u003e\n            \u003cli\u003eSearch for actors.\u003c/li\u003e\n            \u003cli\u003eView the movies that the actor is part of.\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003cli\u003eA Dashboard for managing movies, actors, reviews, and users. (Admin)\u003c/li\u003e\n        \u003cul\u003e\n            \u003cli\u003ePerform CRUD operations on all table management.\u003c/li\u003e\n            \u003cli\u003eActivate/ Deactivate user.\u003c/li\u003e\n            \u003cli\u003eApprove/ Disapprove movie reviews done by users.\u003c/li\u003e\n        \u003c/ul\u003e \n\u003c/ul\u003e\n\n## Requirements\n\nA running instance of a MongoDB server is required for the app to start. The MongoDB is used for storing all data.\n\n## 🛠️ Installation and Set Up\n\nDo the following to clone and start the project. Install all dependencies, both frontend and backend.\n\n```sh\n$ git clone https://github.com/Bernz322/digital-streaming-system.git\n$ cd digital-streaming-system\n$ cd frontend\n$ nvm install\n$ npm i\n$ cd ..\n$ cd backend\n$ npm i\n```\n\nOpen two terminals and cd to frontend and backend folders respectively and start them\n\n```sh\n$ cd frontend\n$ npm start\n```\n\n```sh\n$ cd backend\n$ npm start\n```\n\n## Usage\n\nThe frontend app will be running at http://localhost:3005. The backend together with the API Explorer will be at http://localhost:3000/explorer/.\n\nThe app will have no data initially. The first user who will register will be treated as the root admin. This admin cannot be deleted nor edited.\n\nA separate directory named 'db' in the root folder contains JSON files of several collections that the app uses. Import them to mongodb with a database named 'digital-streaming-system'.\n\n## Models\n\n![ERD](./ERD.png)\n\nThis app has the following models:\n\n1. `User` - a model representing the users of the app.\n2. `UserCredentials` - a model representing sensitive credentials like a password of the users.\n3. `Movies` - a model representing the movies of the app.\n4. `Actors` - a model representing the actors of the app.\n5. `MovieCast` - a model to represent the actors of a movie and vice versa.\n6. `Reviews` - a model representing the reviews of a user to a movie.\n\n`User` is marked as having one `UserCredentials` model using the `@hasOne` decorator. The `belongsTo` relation for `UserCredentials` to `User` has not been created to keep the scope smaller.\n\n`Movies` is marked as having many `Actors` through the `MovieCast` model using the `@hasMany(() =\u003e Actors, { through: {model: () =\u003e MovieCast})` to denote that it has many to many connection with the `Actors` model. It is also marked as having many `Reviews` using the `@hasMany` decorator.\n\nSimilar to the `Movies` model, the `Actors` model is also marked as having many `Movies` through the `MovieCast` model using the `@hasMany(() =\u003e Movies, { through: {model: () =\u003e MovieCast})` to denote that it has many to many connection with the `Movies` model.\n\n`Reviews` is marked as belonging to the `User` and `Movies` models by the use of the `@belongsTo` model decorator. Correspondingly, the `User` and `Movies` models are marked as having many `Reviews` using the `@hasMany` model decorator.\n\n## Controllers\n\nControllers expose API endpoints for interacting with the models and more.\n\nIn this app, there are four controllers:\n\n1. `user` - controller for creating users, fetching user info, updating user info, deleting users, and logging in.\n2. `movies` - controller for creating movies, fetching movie info, searching movies, updating movie info, and deleting movies.\n3. `actors` - controller for creating actors, fetching actor info, searching actors, updating actor info, and deleting actors.\n4. `reviews` - controller for creating, updating (approval), deleting movie reviews.\n\n## Services\n\nServices are modular components that can be plugged into a LoopBack application in various locations to contribute additional capabilities and features to the application.\n\nThis app has two services:\n\n1. `services/user.service` - responsible for verifying if user exists and the submitted credentials matches that of an existing user. It is also responsible for creating a profile to be used for the generation of JWT.\n2. `services/jwt.service` - responsible for generating and verifying JSON Web Token with additional `role` field for authorization.\n\n## Authentication\n\n_Note: This app contains a `login` endpoint ('users/login') for the authentication._\n\nThe endpoint for logging in a user is a `POST` request to `/users/login`.\n\nOnce the credentials are extracted, the logging-in implementation at the controller level is just a four step process. This level of simplicity is made possible by the use of the `UserService` service provided by `@loopback/authentication`. In this app, these services are customized to cater the needed implementation.\n\n1. `const user = await this.userService.verifyCredentials(credentials)` - verify the credentials.\n2. `const userProfile = this.userService.convertToUserProfile(user)` - generate user profile object.\n3. `const token = await this.jwtService.generateToken(userProfile)` - generate JWT based on the user profile object.\n4. `return token` - send JWT.\n\n## Authorization\n\nEndpoint authorization is done using the [@loopback/authorization](https://github.com/strongloop/loopback-next/tree/master/packages/authorization). Wherein, the `@authorize` decorator is used to restrict controller access with the `allowedRoles` property.\n\nA customized authorization provider is binded to `authorizationProviders.my-authorizer-provider` to cater the roles of a user decoded from the JWT token.\n\nThe app has two roles: `admin`, and `user`. All get request endpoints of movies and actors controllers has no authorization instilled to it as it is a public route.\n\n## Tests\n\nThe frontend app has Unit test with backend API mocks using Mock Service Worker integrated to it. The backend controllers are unit tested with loopback testlab's stub implementation to the respective repositories to isolate and test controllers.\n\nTo execute the test, both frontend and backend must run simultaneously. Open another two terminals for frontend and backend respectively and run:\n\n```sh\n$ cd frontend\n$ npm test\n```\n\n```sh\n$ cd backend\n$ npm test\n```\n\nTo see the test coverage, follow the above instructions and run:\n\n```sh\n$ cd frontend\n$ npm run coverage\n```\n\n```sh\n$ cd backend\n$ npm run coverage\n```\n\n### Sonarqube Scanner Results\n\nBoth frontend and backend are connected to sonarqube for scanning of code smells, bugs, security risks, vulnerabilities as well as see the test coverage. Below are the results for frontend (former) and backend (latter).\n![frontend-sonarscan](./sonarFrontendPartial.PNG)\n![backend-sonarscan](./sonarBackend.PNG)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffreybernadas%2Fdigital-streaming-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeffreybernadas%2Fdigital-streaming-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffreybernadas%2Fdigital-streaming-system/lists"}