Intructions for spinning up a docker backend container and a frontend container for your convenience and an assignment checklist.

CSE Task.md

CSE Task

Intructions for spinning up a docker backend container and a frontend container for your convenience and an assignment checklist.

Table of Contents

1. Get up and running
2. Assignment Checklist

Get up and running

1- create a new directory and enter it

$ mkdir full-stack-app

$ cd full-stack-app

2- clone backend repo

$ git clone https://github.com/toubar/flask-app backend

3- clone frontend repo

$ git clone https://github.com/toubar/services-dashboard frontend

4- create docker-compose.yml file

$ touch docker-compose.yml

5- vim into the newly created file and paste the below:

$ vim docker-compose.yml

version: '3'
services:
    flask_backend:
        build: ./backend
        image: flask_backend:latest
        ports:
            - "5000:5000"
    services_frontend:
        build: ./frontend
        image: services_frontend:latest
        ports:
            - "3000:3000"

6- Spin up backend and frontend docker containers by running:

$ docker-compose up

7- when both containers have spin up access:

• React App frontend @ http://localhost:3000/
• Flask Backend @ http://localhost:5000/swagger/
  • Also check the backend's repo's README.md

Assignment Checklist:

Frontend:

• simple GUI for a "Service Dashboard" application in React.js

Extras:

• No additional dependencies used

---

Backend:

• GET - get list of services
• PUT - Update/Add a service to db.json
• Use decorators, classes for reusable parts

Extras:

• Protect the PUT endpoint using JWT (Json Web Token)
• Track all requests to endpoints in a log file
• Api tests

---

Ops:

• Dockerfile for python backend
• deploy.sh script to build docker image and run container (restart/replace existing running container)

Extras:

• Add docker compose file for your image
• Use Docker volumes to dynamically avoid rebuilding image every time.