https://github.com/svetoslavss/devops-workshop

React application with a NodeJS backend and a MongoDB database.
https://github.com/svetoslavss/devops-workshop

backend-api ci-cd-pipeline docker-compose dockerfile frontend-react github-actions mongodb orchestration workflow

Last synced: 2 months ago
JSON representation

React application with a NodeJS backend and a MongoDB database.

• Host: GitHub
• URL: https://github.com/svetoslavss/devops-workshop
• Owner: Svetoslavss
• License: mit
• Created: 2025-02-08T18:34:41.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-25T19:59:20.000Z (over 1 year ago)
• Last Synced: 2025-07-09T08:04:25.220Z (12 months ago)
• Topics: backend-api, ci-cd-pipeline, docker-compose, dockerfile, frontend-react, github-actions, mongodb, orchestration, workflow
• Language: JavaScript
• Homepage:
• Size: 229 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


React with NodeJS Backend and MongoDB - CI/CD Pipeline




  

    

    React

  

  with

  

    

    NodeJS

  

  Backend and

  

    

    MongoDB

  



  
About

  


    This project is a React application that connects to a NodeJS backend and utilizes MongoDB for data storage. The application is designed to showcase a full-stack setup with frontend and backend components, along with a database.

  



    The project is integrated with a CI/CD pipeline using 

    

         GitHub Actions

    , allowing automated building, testing, and deployment of both the frontend and backend applications to 

    

         Docker Hub

    .



  
Features

  


    


Frontend: Developed using React.js, provides the user interface for interacting with the application.

    


Backend: Built using Node.js, handles API requests and communicates with the MongoDB database.

    


Database: MongoDB is used to store the application's data.

    


CI/CD Pipeline: Automatically builds and pushes Docker images for both frontend and backend applications to Docker Hub using GitHub Actions.

  


  
CI/CD Pipeline

  
This repository is equipped with a GitHub Actions CI/CD pipeline that automatically builds and deploys the frontend and backend Docker images whenever code is pushed to the main branch or a pull request is made to it.


  
CI/CD Workflow

  


    


Triggers: The pipeline runs whenever a push or pull request is made to the main branch.

    


Steps:

      


        


Build Frontend: The frontend React app is built and pushed to Docker Hub with the tag frontend:latest.

        


Build Backend: After the frontend build completes, the backend Node.js app is built and pushed to Docker Hub with the tag backend:latest.

      

    

  

  
The CI/CD workflow uses Docker, QEMU, and Docker Buildx to handle the building and pushing of Docker images.


  
Technologies Used

  


    


Frontend: React.js

    


Backend: Node.js

    


Database: MongoDB

    


CI/CD: GitHub Actions, Docker

    


Containerization: Docker

  


  
Setting Up the Project Locally

  
1. Clone the repository

  
git clone https://github.com/Svetoslavss/devops-workshop.git


  
2. Install Dependencies

  
Frontend:

  
cd frontend

npm install

  
Backend:

  
cd backend

npm install


  
3. Set Up MongoDB

  
Ensure MongoDB is running locally or configure your backend to connect to a remote MongoDB service.


  
4. Running the Application

  
Frontend:

  
cd frontend

npm start

  
Backend:

  
cd backend

npm start

  
The application will be running at http://localhost:3000 for the frontend and the backend API will be available at http://localhost:5000.


  
Docker Setup

  
Both the frontend and backend applications have their respective Dockerfiles located in the ./frontend/Dockerfile and ./backend/Dockerfile directories. These files are used in the CI/CD pipeline to build Docker images for both components.

  
To build and run the application using Docker locally:

  
1. Frontend

  
docker build -t frontend:latest ./frontend

docker run -p 3000:3000 frontend:latest

  
2. Backend

  
docker build -t backend:latest ./backend

docker run -p 5000:5000 backend:latest


  
Docker Hub

  
After the CI/CD pipeline runs, the latest images will be pushed to Docker Hub with the tags:

  


    
frontend:latest

    
backend:latest

  

  
You can access the images directly from Docker Hub:

  


    
Frontend Docker Hub Repository

    
Backend Docker Hub Repository

  


  
Contributing

  
Contributions are welcome! Please fork this repository, create a new branch for your changes, and submit a pull request.


  
License

  
This project is licensed under the MIT License - see the LICENSE file for details.