Hotstar-GitHub-Actions

Lightweight React front-end with CI/CD tooling examples, Docker packaging, and code-quality scanning. This repository demonstrates how to wire a React-based movie browsing UI (using a central Axios TMDB client) into container builds and GitHub Actions workflows with SonarQube scans

Architecture Digram

Screenshot

Below is a screenshot from the UI included in the screenshot/ folder:

Repository contents (high level)

• src/ — React app sources (components, tmdbAxiosInstance.js, Bot.jsx, etc.)
• Dockerfile — image build for containerizing the application
• managed.yml — (likely) GitHub Actions workflow file
• sonar-project.properties — SonarQube project configuration

Quick start

Requirements: Node >= 14, npm or yarn, Docker (optional)

1. Install dependencies

npm install

2. Start dev server

npm start

3. Build production bundle

npm run build

4. Build Docker image (optional)

docker build -t hotstar-web:local .

CI / GitHub Actions

This repo contains workflow(s) to build, test, and scan the code. Typical steps to include in CI:

• Install dependencies and run tests
• Lint and static checks
• Build Docker image and push to registry (optional)
• Run SonarQube scan

See managed.yml and GitHub Actions settings in the repository for the exact configuration used.

Architecture overview

The diagram above (docs/architecture.svg) describes the main components and data flow:

• React Client (front-end) — renders UI and calls the central Axios instance
• tmdbAxiosInstance.js — single place to manage TMDB API calls and keys
• Bot — auxiliary components/scripts (for automation or requests)
• Docker — containerization used in CI for reproducible builds
• GitHub Actions — CI/CD orchestration
• SonarQube — code quality and security scanning

Using the TMDB key

If you use a TMDB API key, set it as an environment variable (or in a .env file used by your React app) and ensure it is not committed to source control.

Example .env:

REACT_APP_TMDB_API_KEY=your_api_key_here

Notes and next steps

• Update managed.yml with your secrets and Docker registry information to enable CI releases.
• If you want a hosted SonarQube, update connection settings in the managed.yml or the CI environment.
• Consider adding a minimal CONTRIBUTING.md and LICENSE if you plan to open-source this project.

---

If you'd like, I can also:

• Add a PNG export of the architecture diagram for better compatibility
• Generate a CONTRIBUTING.md and LICENSE file
• Update managed.yml to include example Sonar and Docker publish steps

Let me know which of the above you'd like next.

Ports to Enable in Security Group

Service	Port
HTTP	80
SSH	22
SonarQube	9000

---

System Update & Common Packages

sudo apt update
sudo apt upgrade -y

# Common tools
sudo apt install -y bash-completion wget git zip unzip curl jq net-tools build-essential ca-certificates apt-transport-https gnupg fontconfig

Reload bash completion if needed:

source /etc/bash_completion

Install latest Git:

sudo add-apt-repository ppa:git-core/ppa
sudo apt update
sudo apt install git -y

---

Docker

Official docs: https://docs.docker.com/engine/install/ubuntu/

# Add Docker's official GPG key:
sudo apt-get update
sudo apt-get install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

# Add the repository to Apt sources:
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "${UBUNTU_CODENAME:-$VERSION_CODENAME}") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update

sudo apt-get install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

# Add user to docker group (log out / in or newgrp to apply)
sudo usermod -aG docker $USER
newgrp docker
docker ps

Check Docker status:

sudo systemctl status docker

---

SonarQube (Docker)

docker run -d --name sonarqube \
  -p 9000:9000 \
  -v sonarqube_data:/opt/sonarqube/data \
  -v sonarqube_logs:/opt/sonarqube/logs \
  -v sonarqube_extensions:/opt/sonarqube/extensions \
  sonarqube:lts-community

---

Github Credentials to Store

Purpose	ID	Type	Notes
Email	EMAIL_USER	emailaddress@gmail.com
Email-app-Pass	EMAIL_PASS	Secret text	From app password
Docker-username	DOCKER_USERNAME	your-docker-id	From your Docker Hub profile
Docker-username	DOCKER_PASSWORD	token	From your Docker Hub token
sonar-qube	follow the same step	manully entries