{"id":19222914,"url":"https://github.com/christianjtr/tv-app","last_synced_at":"2025-04-10T21:15:43.496Z","repository":{"id":228465685,"uuid":"771230258","full_name":"christianjtr/tv-app","owner":"christianjtr","description":"Full-stack project showcasing how React and Express work together to deliver a movie-tv-like application. Besides implementing an API RESTFul, it includes a simple CD/CI process leveraged on GitHub actions and Docker.","archived":false,"fork":false,"pushed_at":"2024-04-02T11:15:31.000Z","size":43026,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T21:15:35.978Z","etag":null,"topics":["api-rest","cypress","daisyui","docker","docker-compose","express","fullstack-development","github-actions","hapi-joi","jest","nodejs","react","react-testing-library","swagger","tailwindcss","tmdb-api","typescript","vite"],"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/christianjtr.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-12T23:19:16.000Z","updated_at":"2024-05-26T20:43:46.000Z","dependencies_parsed_at":"2024-04-02T11:51:36.243Z","dependency_job_id":null,"html_url":"https://github.com/christianjtr/tv-app","commit_stats":null,"previous_names":["christianjtr/tv-app"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianjtr%2Ftv-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianjtr%2Ftv-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianjtr%2Ftv-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianjtr%2Ftv-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/christianjtr","download_url":"https://codeload.github.com/christianjtr/tv-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248298311,"owners_count":21080320,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["api-rest","cypress","daisyui","docker","docker-compose","express","fullstack-development","github-actions","hapi-joi","jest","nodejs","react","react-testing-library","swagger","tailwindcss","tmdb-api","typescript","vite"],"created_at":"2024-11-09T15:05:51.989Z","updated_at":"2025-04-10T21:15:43.478Z","avatar_url":"https://github.com/christianjtr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# My TV App application\n\nProof of concept aimed at putting into practice an e2e development cycle for an application.\n\n\u003e [!NOTE]  \n\u003e - :bulb: Monorepo-like project in which services can be deployed and run independently.\n\u003e - ❤️ Feel free to add any improvements or suggestions you consider.\n\n1. [Goals](#001)\n2. [Considerations](#002)\n3. [Tech Stack](#003)\n4. [Installation and running the project](#004)\n5. [Samples](#005)\n6. [Server side](#006)\n7. [Tests (unit-tests and e2e)](#007)\n8. [CI/CD - Containerization and Deployment](#008)\n9. [Next steps](#009)\n\n\u003ca name=\"001\"\u003e\u003c/a\u003e\n### 🎯 Goals\n\n-   Create an application that displays **trending films and TV shows** in two rails.\n-   Integrate the **The Movie DB API (TMDB)** to the application.\n-   Add the capability of navigating the application using the keyboard (Arrow keys).\n-   Implement a CI/CD process using **GitHub Actions, Docker, and a Cloud application hosting service.**\n\n    #### The movie DB API:\n\n    To implement the solution, we are required to sign up [themoviedb.org](https://www.themoviedb.org/), and also **integrate it to our back-end** then, we will be able to use their API services. For further details, check the specs here [TMDB API specs](https://developer.themoviedb.org/reference/intro/getting-started).\n\n\u003ca name=\"002\"\u003e\u003c/a\u003e\n### Considerations\n\nPlease, check this consideration out.\n\n\u003e [!IMPORTANT]\n\u003e\n\u003e -   The architecture is a **mono repo-like project** that uses **workspaces to share type definitions among the app's tiers**.\n\u003e -   The application can be either **started locally or containerized**.\n\u003e -   Each app tier, within the project, can be started for development **independently from the others**.\n\n\u003ca name=\"003\"\u003e\u003c/a\u003e\n### Tech Stack\n\nThis conceptual test has been developed using the following technologies:\n\n-   **Front-end**\n    -   [React](https://react.dev/)\n    -   [TypeScript](https://www.typescriptlang.org/)\n    -   [Vite](https://vitejs.dev/)\n    -   [Tailwind CSS](https://tailwindcss.com/)\n    -   [DaisyUI](https://daisyui.com/)\n-   **Back-end**\n    -   [Express](https://expressjs.com/)\n    -   [Node Cache](https://www.npmjs.com/package/node-cache)\n    -   [Hapi Joi](https://github.com/hapijs/joi#readme)\n    -   [Swagger](https://swagger.io/)\n-   **Tests (Unit test and E2E)**\n    -   [Jest](https://jestjs.io/)\n    -   [React Testing Tools](https://testing-library.com/)\n    -   [Cypress](https://www.cypress.io/)\n    -   [SuperTest](https://www.npmjs.com/package/supertest)\n-   **Containerization and Deployment**\n    -   [Github Actions](https://docs.github.com/en/actions)\n    -   [Docker](https://www.docker.com/)\n    -   [Render](https://render.com/)\n-   **Architecture**\n    -   [NPM workspaces](https://docs.npmjs.com/cli/v10/using-npm/workspaces)\n\n\u003ca name=\"004\"\u003e\u003c/a\u003e\n### Installation and running the project\n\nThe project requires:\n\n-   [NodeJS](https://nodejs.org/)\n-   [Docker](https://www.docker.com/)\n\n**Clone the repository:**\n\n```shell\ngit clone https://github.com/christianjtr/tv-app.git\n```\n\n**Scripts:**\n\nBefore executing these scripts, you must run **npm install** in the directory you just downloaded/cloned the codebase.\n\n```shell\n# Run the entire development environment for both client and server tiers\n\u003e npm run dev:app\n\n# Run dev environment for the client-side\n\u003e npm run dev:client\n\n# Run development environment for the server-side\n\u003e npm run dev:server\n\n# Run unit tests for the client-side tier\n\u003e npm run test:client\n\n# Run e2e tests for the client-side tier\n\u003e npm run test:client:cy\n\n# Run unit tests for the server-side tier\n\u003e npm run test:server\n\n# Build shared types across the application\n\u003e npm run build:shared-types\n\n# Perform docker-compose to containerize and run the application\n\u003e npm run dev:docker:build-up\n```\n\n**Environment variables:**\n\nEach app's tier within the project has its own environment variables file, you **should create a .env file following the templates provided** in the corresponding directory.\n\n| Tier   | template     | directory | environment file to create |\n| ------ | ------------ | --------- | -------------------------- |\n| client | .env.local   | /app      | .env                       |\n| server | .env.example | /server   | .env                       |\n\n\u003ca name=\"005\"\u003e\u003c/a\u003e\n### Samples\n\n##### Live demo\n\nClick on the following link [GitHub page project](https://christianjtr.github.io/tv-app). \n\n**Note:** It's a mocked version of the project, although we can deploy the front-end project and fetch data from our back-end services hosted.\n\n##### Preview\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/christianjtr/tv-app/blob/master/samples/showcase.gif\" alt=\"gif-demo\"/\u003e\n\u003c/p\u003e\n\n##### Home page preview\n\n![](./samples/home.png)\n\n##### Detail page preview\n\n![](./samples/detail.png)\n\n\u003ca name=\"006\"\u003e\u003c/a\u003e\n### Server side\n\n##### API specs\n\nThe server-side API follows the [OpenAPI Specification - Version 3](https://swagger.io/specification/)\n\n```shell\n# Enter the API's specs documentation by browsing to this URL.\n\n\u003cYOUR HOST\u003e/api/docs\n```\n\n![](./samples/swagger.png)\n\n\u003ca name=\"007\"\u003e\u003c/a\u003e\n### Tests (unit-tests and e2e)\n\nBoth services have some examples of how to develop unit tests and e2e tests (including some mocking strategies).\n\n-   **Client-side:**\n\n    -   Unit testing for services, react-hooks, state-less components, and the entire sections (pages).\n    -   **E2E testing:** Using Cypress. (i.e.: Navigate to the search section and look for a movie).\n\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/christianjtr/tv-app/blob/master/samples/cy.gif\" alt=\"gif-demo-cy\"/\u003e\n\u003c/p\u003e\n\n-   **Server-side:**\n    -   Unit testing for services, controllers, etc.\n    -   **E2E testing:** Using SuperTest. (i.e.: Simulate a running back-end to perform requests).\n\n![](./samples/server-tests.png)\n\n\u003ca name=\"008\"\u003e\u003c/a\u003e\n### CI/CD - **Containerization and Deployment**\n\n```mermaid\nflowchart LR\n    step0[\"`Developer pushes/merges code into the repository`\"]\n    step1[\"`GitHub actions are triggered`\"]\n    step2[\"`Tests are triggered, and Docker images are built`\"]\n    step3[\"`Docker images are pushed to Docker Hub`\"]\n    step4[\"`**Optional** Render cloud service should deploy the images by latest reference provided`\"]\n    step0 --\u003e step1 --\u003e step2 --\u003e step3 --\u003e step4\n```\n\nThe strategy followed to deploy the application implies:\n\n##### Containerization of each application\n\n-   Create **Dockerfiles per environment (dev, prod)** to build each application service (client-side, server-side).\n-   Every Dockerfile perform a **multi-stage image build**.\n-   Consider **workspaces and shared packages** when building images.\n-   Create **parametrized docker-compose.yml file per environment (dev, prod)**. (At root folder level only - main Docker context).\n-   Create **.dockerignore** files.\n-   Create a docker-compose run and build script.\n    -   Obtain **production environment variables given the application's source files**.\n    -   Provide every docker-compose.yml file with those variables to parametrize them.\n    -   **Note:** Google Bard supported me on this.\n\n##### GitHub actions\n\n-   Implement a **GitHub action workflow** which is going to be dispatched whenever a pull-request or merge is performed.\n-   Create the repository's project secrets.\n    -   Environment variables for production.\n    -   Docker credentials\n        -   Username.\n        -   Docker TOKEN API. (Read, Write permissions).\n-   Include jobs:\n    -   Run tests.\n    -   Containerize applications.\n    -   Push applications to Docker Hub.\n        -   You must have a **Docker Hub account**.\n\n##### Render (Optional)\n\n\u003e [!IMPORTANT]\n\u003e\n\u003e - At this point, the services are merged into the repository, tested, containerized, and published on Docker Hub (either as public or private images).\n\u003e - Now, you should decide which **Cloud provider service to host your application**. (Azure, Amazon Web Services, Digital Ocean, Google Cloud Platform, and others).\n\n**Choice:** I decided to use [Render](https://render.com/) because it's free for hobby projects (under certain conditions, of course).\n\n![](./samples/render.png)\n\nLook at this [article on how to deploy pre-built docker images](https://docs.render.com/deploy-an-image) on their side.\n\n-   [TV application](https://tv-app-react-webapp-latest.onrender.com/)\n-   [API service docs](https://tv-app-nodejs-latest.onrender.com/api/docs)\n\n    **Note:** The application should consume API services published and provided by our back-end, which is intended to obtain data from the TMDB Movie service).\n\n![](./samples/cdci.png)\n\n\u003ca name=\"009\"\u003e\u003c/a\u003e\n### Next steps\n\n-   Extend this documentation to the applications (client-side, server-side, GitHub actions).\n-   Enhance Dockerfiles and multi-stage builds.\n-   Better use of npm workspaces (mono-repos).\n-   Improve overall CD/CI process.\n-   Build back-end codebase.\n-   Polish up user experience and responsiveness.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristianjtr%2Ftv-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchristianjtr%2Ftv-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristianjtr%2Ftv-app/lists"}