{"id":25828165,"url":"https://github.com/svetoslavss/devops-workshop","last_synced_at":"2026-04-12T09:03:23.606Z","repository":{"id":276522575,"uuid":"929522422","full_name":"Svetoslavss/devops-workshop","owner":"Svetoslavss","description":"React application with a NodeJS backend and a MongoDB database. ","archived":false,"fork":false,"pushed_at":"2025-02-25T19:59:20.000Z","size":234,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-09T08:04:25.220Z","etag":null,"topics":["backend-api","ci-cd-pipeline","docker-compose","dockerfile","frontend-react","github-actions","mongodb","orchestration","workflow"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Svetoslavss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2025-02-08T18:34:41.000Z","updated_at":"2025-02-25T19:59:24.000Z","dependencies_parsed_at":"2025-07-09T08:04:28.104Z","dependency_job_id":null,"html_url":"https://github.com/Svetoslavss/devops-workshop","commit_stats":null,"previous_names":["svetoslavss/devops-workshop"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Svetoslavss/devops-workshop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Svetoslavss%2Fdevops-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Svetoslavss%2Fdevops-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Svetoslavss%2Fdevops-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Svetoslavss%2Fdevops-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Svetoslavss","download_url":"https://codeload.github.com/Svetoslavss/devops-workshop/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Svetoslavss%2Fdevops-workshop/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264419452,"owners_count":23605197,"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":["backend-api","ci-cd-pipeline","docker-compose","dockerfile","frontend-react","github-actions","mongodb","orchestration","workflow"],"created_at":"2025-02-28T17:24:01.175Z","updated_at":"2026-04-12T09:03:23.578Z","avatar_url":"https://github.com/Svetoslavss.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!DOCTYPE html\u003e\n\u003cbody\u003e\n\u003ch1\u003eReact with NodeJS Backend and MongoDB - CI/CD Pipeline\u003c/h1\u003e\n\n\u003cp\u003e\n  \u003cstrong\u003e\n    \u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg\" alt=\"React Logo\" width=\"16\" height=\"16\"\u003e\n    React\n  \u003c/strong\u003e\n  with\n  \u003cstrong\u003e\n    \u003cimg src=\"https://nodejs.org/static/images/logo.svg\" alt=\"NodeJS Logo\" width=\"19\" height=\"19\"\u003e\n    NodeJS\n  \u003c/strong\u003e\n  Backend and\n  \u003cstrong\u003e\n    \u003cimg src=\"https://img.icons8.com/color/452/mongodb.png\" alt=\"MongoDB Logo\" width=\"16\" height=\"16\"\u003e\n    MongoDB\n  \u003c/strong\u003e\n\u003c/p\u003e\n  \u003ch2\u003eAbout\u003c/h2\u003e\n  \u003cp\u003e\n    This project is a \u003cstrong\u003eReact\u003c/strong\u003e application that connects to a \u003cstrong\u003eNodeJS backend\u003c/strong\u003e and utilizes \u003cstrong\u003eMongoDB\u003c/strong\u003e for data storage. The application is designed to showcase a full-stack setup with frontend and backend components, along with a database.\n  \u003c/p\u003e\n\u003cp\u003e\n    The project is integrated with a \u003cstrong\u003eCI/CD pipeline\u003c/strong\u003e using \n    \u003cstrong\u003e\n        \u003cimg src=\"https://avatars.githubusercontent.com/u/44036562?s=200\u0026v=4\" \n             alt=\"GitHub Actions Logo\" width=\"15\" height=\"15\"\u003e GitHub Actions\n    \u003c/strong\u003e, allowing automated building, testing, and deployment of both the frontend and backend applications to \n    \u003cstrong\u003e\n        \u003cimg src=\"https://www.docker.com/wp-content/uploads/2022/03/Moby-logo.png\" \n             alt=\"Docker Logo\" width=\"15\" height=\"15\"\u003e Docker Hub\n    \u003c/strong\u003e.\n\u003c/p\u003e\n\n  \u003ch2\u003eFeatures\u003c/h2\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003cstrong\u003eFrontend\u003c/strong\u003e: Developed using React.js, provides the user interface for interacting with the application.\u003c/li\u003e\n    \u003cli\u003e\u003cstrong\u003eBackend\u003c/strong\u003e: Built using Node.js, handles API requests and communicates with the MongoDB database.\u003c/li\u003e\n    \u003cli\u003e\u003cstrong\u003eDatabase\u003c/strong\u003e: MongoDB is used to store the application's data.\u003c/li\u003e\n    \u003cli\u003e\u003cstrong\u003eCI/CD Pipeline\u003c/strong\u003e: Automatically builds and pushes Docker images for both frontend and backend applications to Docker Hub using GitHub Actions.\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003ch2\u003eCI/CD Pipeline\u003c/h2\u003e\n  \u003cp\u003eThis repository is equipped with a \u003cstrong\u003eGitHub Actions\u003c/strong\u003e CI/CD pipeline that automatically builds and deploys the frontend and backend Docker images whenever code is pushed to the \u003ccode\u003emain\u003c/code\u003e branch or a pull request is made to it.\u003c/p\u003e\n\n  \u003ch3\u003eCI/CD Workflow\u003c/h3\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003cstrong\u003eTriggers\u003c/strong\u003e: The pipeline runs whenever a push or pull request is made to the \u003ccode\u003emain\u003c/code\u003e branch.\u003c/li\u003e\n    \u003cli\u003e\u003cstrong\u003eSteps\u003c/strong\u003e:\n      \u003cul\u003e\n        \u003cli\u003e\u003cstrong\u003eBuild Frontend\u003c/strong\u003e: The frontend React app is built and pushed to Docker Hub with the tag \u003ccode\u003efrontend:latest\u003c/code\u003e.\u003c/li\u003e\n        \u003cli\u003e\u003cstrong\u003eBuild Backend\u003c/strong\u003e: After the frontend build completes, the backend Node.js app is built and pushed to Docker Hub with the tag \u003ccode\u003ebackend:latest\u003c/code\u003e.\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cp\u003eThe CI/CD workflow uses \u003cstrong\u003eDocker\u003c/strong\u003e, \u003cstrong\u003eQEMU\u003c/strong\u003e, and \u003cstrong\u003eDocker Buildx\u003c/strong\u003e to handle the building and pushing of Docker images.\u003c/p\u003e\n\n  \u003ch2\u003eTechnologies Used\u003c/h2\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003cstrong\u003eFrontend\u003c/strong\u003e: React.js\u003c/li\u003e\n    \u003cli\u003e\u003cstrong\u003eBackend\u003c/strong\u003e: Node.js\u003c/li\u003e\n    \u003cli\u003e\u003cstrong\u003eDatabase\u003c/strong\u003e: MongoDB\u003c/li\u003e\n    \u003cli\u003e\u003cstrong\u003eCI/CD\u003c/strong\u003e: GitHub Actions, Docker\u003c/li\u003e\n    \u003cli\u003e\u003cstrong\u003eContainerization\u003c/strong\u003e: Docker\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003ch2\u003eSetting Up the Project Locally\u003c/h2\u003e\n  \u003ch3\u003e1. Clone the repository\u003c/h3\u003e\n  \u003cpre\u003e\u003ccode\u003egit clone https://github.com/Svetoslavss/devops-workshop.git\u003c/code\u003e\u003c/pre\u003e\n\n  \u003ch3\u003e2. Install Dependencies\u003c/h3\u003e\n  \u003cp\u003e\u003cstrong\u003eFrontend:\u003c/strong\u003e\u003c/p\u003e\n  \u003cpre\u003e\u003ccode\u003ecd frontend\nnpm install\u003c/code\u003e\u003c/pre\u003e\n  \u003cp\u003e\u003cstrong\u003eBackend:\u003c/strong\u003e\u003c/p\u003e\n  \u003cpre\u003e\u003ccode\u003ecd backend\nnpm install\u003c/code\u003e\u003c/pre\u003e\n\n  \u003ch3\u003e3. Set Up MongoDB\u003c/h3\u003e\n  \u003cp\u003eEnsure MongoDB is running locally or configure your backend to connect to a remote MongoDB service.\u003c/p\u003e\n\n  \u003ch3\u003e4. Running the Application\u003c/h3\u003e\n  \u003cp\u003e\u003cstrong\u003eFrontend:\u003c/strong\u003e\u003c/p\u003e\n  \u003cpre\u003e\u003ccode\u003ecd frontend\nnpm start\u003c/code\u003e\u003c/pre\u003e\n  \u003cp\u003e\u003cstrong\u003eBackend:\u003c/strong\u003e\u003c/p\u003e\n  \u003cpre\u003e\u003ccode\u003ecd backend\nnpm start\u003c/code\u003e\u003c/pre\u003e\n  \u003cp\u003eThe application will be running at \u003ccode\u003ehttp://localhost:3000\u003c/code\u003e for the frontend and the backend API will be available at \u003ccode\u003ehttp://localhost:5000\u003c/code\u003e.\u003c/p\u003e\n\n  \u003ch2\u003eDocker Setup\u003c/h2\u003e\n  \u003cp\u003eBoth the frontend and backend applications have their respective Dockerfiles located in the \u003ccode\u003e./frontend/Dockerfile\u003c/code\u003e and \u003ccode\u003e./backend/Dockerfile\u003c/code\u003e directories. These files are used in the CI/CD pipeline to build Docker images for both components.\u003c/p\u003e\n  \u003cp\u003eTo build and run the application using Docker locally:\u003c/p\u003e\n  \u003ch3\u003e1. Frontend\u003c/h3\u003e\n  \u003cpre\u003e\u003ccode\u003edocker build -t frontend:latest ./frontend\ndocker run -p 3000:3000 frontend:latest\u003c/code\u003e\u003c/pre\u003e\n  \u003ch3\u003e2. Backend\u003c/h3\u003e\n  \u003cpre\u003e\u003ccode\u003edocker build -t backend:latest ./backend\ndocker run -p 5000:5000 backend:latest\u003c/code\u003e\u003c/pre\u003e\n\n  \u003ch2\u003eDocker Hub\u003c/h2\u003e\n  \u003cp\u003eAfter the CI/CD pipeline runs, the latest images will be pushed to \u003cstrong\u003eDocker Hub\u003c/strong\u003e with the tags:\u003c/p\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ccode\u003efrontend:latest\u003c/code\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ccode\u003ebackend:latest\u003c/code\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cp\u003eYou can access the images directly from Docker Hub:\u003c/p\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://hub.docker.com/r/svetoslavds/frontend\" target=\"_blank\"\u003eFrontend Docker Hub Repository\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://hub.docker.com/r/svetoslavds/backend\" target=\"_blank\"\u003eBackend Docker Hub Repository\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003ch2\u003eContributing\u003c/h2\u003e\n  \u003cp\u003eContributions are welcome! Please fork this repository, create a new branch for your changes, and submit a pull request.\u003c/p\u003e\n\n  \u003ch2\u003eLicense\u003c/h2\u003e\n  \u003cp\u003eThis project is licensed under the MIT License - see the \u003ca href=\"LICENSE\" target=\"_blank\"\u003eLICENSE\u003c/a\u003e file for details.\u003c/p\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvetoslavss%2Fdevops-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvetoslavss%2Fdevops-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvetoslavss%2Fdevops-workshop/lists"}