[backend] feature: Dockerised db + app

backend/Dockerfile

@@ -1,6 +1,9 @@
 # Use an official Node.js runtime based on Alpine Linux as the base image
 FROM node:18-alpine
 
+# Install bash
+RUN apk add --no-cache bash
+
 # Set the working directory inside the container
 WORKDIR /usr/src/app
 
@@ -19,6 +22,11 @@ COPY tsconfig.json ./
 # Copy the application code into the container
 COPY . .
 
+COPY wait-for-it.sh wait-for-it.sh
+
+# Make the script executable
+RUN chmod +x wait-for-it.sh
+
 # Build TypeScript code
 RUN npm run build
 

backend/docker-compose.yml

@@ -0,0 +1,17 @@
+version: "3"
+services:
+  postgres:
+    image: postgres:13
+    environment:
+      POSTGRES_USER: test
+      POSTGRES_PASSWORD: test
+      POSTGRES_DB: test
+    ports:
+      - "5432:5432"
+  app:
+    build: .
+    command: ["sh", "-c", "./wait-for-it.sh postgres:5432 -- npx prisma migrate deploy && npm run seed && npm start"]
+    ports:
+      - "5001:5001"
+    environment:
+      DATABASE_URL: "postgresql://test:test@postgres:5432/test"

backend/package.json

@@ -8,23 +8,27 @@
     "start:local": "npx nodemon",
     "start": "node dist/index.js",
     "build": "tsc",
-    "docker:build": "docker build -t notes-app-be .",
-    "docker:run": "docker run -p 5001:5001 notes-app-be"
+    "docker:app:build": "docker build -t notes-app-be .",
+    "docker:app:up": "docker run -p 5001:5001 notes-app-be",
+    "docker:up": "docker-compose up -d",
+    "docker:down": "docker-compose down",
+    "docker:prisma": "npx prisma migrate dev --name init",
+    "seed": "npx ts-node prisma/seed.ts"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@types/cors": "^2.8.17",
-    "@types/express": "^4.17.21",
+    "@types/cors": "2.8.17",
+    "@types/express": "4.17.21",
     "@types/node": "^20.10.6",
-    "nodemon": "^3.0.2",
-    "prisma": "^5.7.1",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.3.3"
+    "nodemon": "3.0.2",
+    "prisma": "5.7.1",
+    "ts-node": "10.9.2",
+    "typescript": "5.3.3"
   },
   "dependencies": {
-    "@prisma/client": "^5.7.1",
-    "cors": "^2.8.5",
-    "express": "^4.18.2"
+    "@prisma/client": "5.7.1",
+    "cors": "2.8.5",
+    "express": "4.18.2"
   }
 }

backend/prisma/migrations/20240119233910_test/migration.sql

@@ -0,0 +1,8 @@
+-- CreateTable
+CREATE TABLE "Note" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+
+    CONSTRAINT "Note_pkey" PRIMARY KEY ("id")
+);

backend/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

backend/prisma/seed.ts

@@ -0,0 +1,62 @@
+// prisma/seed.js
+
+import { PrismaClient } from '@prisma/client';
+
+const prisma = new PrismaClient();
+
+const seed = [
+    {
+      "title": "Meeting Notes",
+      "content": "Discussed project timelines and goals."
+    },
+    {
+      "title": "Shopping List",
+      "content": "Milk, eggs, bread, and fruits."
+    },
+    {
+      "title": "Recipe",
+      "content": "Ingredients: Chicken, tomatoes, onions, garlic."
+    },
+    {
+      "title": "Ideas",
+      "content": "Brainstorming ideas for the next feature release. 🚀"
+    },
+    {
+      "title": "Personal Goals",
+      "content": "Exercise for 30 minutes daily. Read a book every week."
+    },
+    {
+      "title": "Fête d'anniversaire",
+      "content": "Préparer une surprise pour la fête d'anniversaire."
+    },
+    {
+      "title": "日本旅行",
+      "content": "計画: 東京、京都、大阪を訪れる。"
+    },
+    {
+      "title": "Семейный ужин",
+      "content": "Приготовить вкусный ужин для всей семьи."
+    },
+    {
+      "title": "Coding Project",
+      "content": "Implement new features using React and Express."
+    }
+  ]
+
+async function main() {
+    // Seed data here
+    await prisma.note.createMany({
+        data: seed,
+    });
+
+    // Add more data as needed...
+}
+
+main()
+    .catch((e) => {
+        console.error(e);
+        // process.exit(1);
+    })
+    .finally(async () => {
+        await prisma.$disconnect();
+    });

backend/wait-for-it.sh

@@ -0,0 +1,182 @@
+#!/usr/bin/env bash
+# Use this script to test if a given TCP host/port are available
+
+WAITFORIT_cmdname=${0##*/}
+
+echoerr() { if [[ $WAITFORIT_QUIET -ne 1 ]]; then echo "$@" 1>&2; fi }
+
+usage()
+{
+    cat << USAGE >&2
+Usage:
+    $WAITFORIT_cmdname host:port [-s] [-t timeout] [-- command args]
+    -h HOST | --host=HOST       Host or IP under test
+    -p PORT | --port=PORT       TCP port under test
+                                Alternatively, you specify the host and port as host:port
+    -s | --strict               Only execute subcommand if the test succeeds
+    -q | --quiet                Don't output any status messages
+    -t TIMEOUT | --timeout=TIMEOUT
+                                Timeout in seconds, zero for no timeout
+    -- COMMAND ARGS             Execute command with args after the test finishes
+USAGE
+    exit 1
+}
+
+wait_for()
+{
+    if [[ $WAITFORIT_TIMEOUT -gt 0 ]]; then
+        echoerr "$WAITFORIT_cmdname: waiting $WAITFORIT_TIMEOUT seconds for $WAITFORIT_HOST:$WAITFORIT_PORT"
+    else
+        echoerr "$WAITFORIT_cmdname: waiting for $WAITFORIT_HOST:$WAITFORIT_PORT without a timeout"
+    fi
+    WAITFORIT_start_ts=$(date +%s)
+    while :
+    do
+        if [[ $WAITFORIT_ISBUSY -eq 1 ]]; then
+            nc -z $WAITFORIT_HOST $WAITFORIT_PORT
+            WAITFORIT_result=$?
+        else
+            (echo -n > /dev/tcp/$WAITFORIT_HOST/$WAITFORIT_PORT) >/dev/null 2>&1
+            WAITFORIT_result=$?
+        fi
+        if [[ $WAITFORIT_result -eq 0 ]]; then
+            WAITFORIT_end_ts=$(date +%s)
+            echoerr "$WAITFORIT_cmdname: $WAITFORIT_HOST:$WAITFORIT_PORT is available after $((WAITFORIT_end_ts - WAITFORIT_start_ts)) seconds"
+            break
+        fi
+        sleep 1
+    done
+    return $WAITFORIT_result
+}
+
+wait_for_wrapper()
+{
+    # In order to support SIGINT during timeout: http://unix.stackexchange.com/a/57692
+    if [[ $WAITFORIT_QUIET -eq 1 ]]; then
+        timeout $WAITFORIT_BUSYTIMEFLAG $WAITFORIT_TIMEOUT $0 --quiet --child --host=$WAITFORIT_HOST --port=$WAITFORIT_PORT --timeout=$WAITFORIT_TIMEOUT &
+    else
+        timeout $WAITFORIT_BUSYTIMEFLAG $WAITFORIT_TIMEOUT $0 --child --host=$WAITFORIT_HOST --port=$WAITFORIT_PORT --timeout=$WAITFORIT_TIMEOUT &
+    fi
+    WAITFORIT_PID=$!
+    trap "kill -INT -$WAITFORIT_PID" INT
+    wait $WAITFORIT_PID
+    WAITFORIT_RESULT=$?
+    if [[ $WAITFORIT_RESULT -ne 0 ]]; then
+        echoerr "$WAITFORIT_cmdname: timeout occurred after waiting $WAITFORIT_TIMEOUT seconds for $WAITFORIT_HOST:$WAITFORIT_PORT"
+    fi
+    return $WAITFORIT_RESULT
+}
+
+# process arguments
+while [[ $# -gt 0 ]]
+do
+    case "$1" in
+        *:* )
+        WAITFORIT_hostport=(${1//:/ })
+        WAITFORIT_HOST=${WAITFORIT_hostport[0]}
+        WAITFORIT_PORT=${WAITFORIT_hostport[1]}
+        shift 1
+        ;;
+        --child)
+        WAITFORIT_CHILD=1
+        shift 1
+        ;;
+        -q | --quiet)
+        WAITFORIT_QUIET=1
+        shift 1
+        ;;
+        -s | --strict)
+        WAITFORIT_STRICT=1
+        shift 1
+        ;;
+        -h)
+        WAITFORIT_HOST="$2"
+        if [[ $WAITFORIT_HOST == "" ]]; then break; fi
+        shift 2
+        ;;
+        --host=*)
+        WAITFORIT_HOST="${1#*=}"
+        shift 1
+        ;;
+        -p)
+        WAITFORIT_PORT="$2"
+        if [[ $WAITFORIT_PORT == "" ]]; then break; fi
+        shift 2
+        ;;
+        --port=*)
+        WAITFORIT_PORT="${1#*=}"
+        shift 1
+        ;;
+        -t)
+        WAITFORIT_TIMEOUT="$2"
+        if [[ $WAITFORIT_TIMEOUT == "" ]]; then break; fi
+        shift 2
+        ;;
+        --timeout=*)
+        WAITFORIT_TIMEOUT="${1#*=}"
+        shift 1
+        ;;
+        --)
+        shift
+        WAITFORIT_CLI=("$@")
+        break
+        ;;
+        --help)
+        usage
+        ;;
+        *)
+        echoerr "Unknown argument: $1"
+        usage
+        ;;
+    esac
+done
+
+if [[ "$WAITFORIT_HOST" == "" || "$WAITFORIT_PORT" == "" ]]; then
+    echoerr "Error: you need to provide a host and port to test."
+    usage
+fi
+
+WAITFORIT_TIMEOUT=${WAITFORIT_TIMEOUT:-15}
+WAITFORIT_STRICT=${WAITFORIT_STRICT:-0}
+WAITFORIT_CHILD=${WAITFORIT_CHILD:-0}
+WAITFORIT_QUIET=${WAITFORIT_QUIET:-0}
+
+# Check to see if timeout is from busybox?
+WAITFORIT_TIMEOUT_PATH=$(type -p timeout)
+WAITFORIT_TIMEOUT_PATH=$(realpath $WAITFORIT_TIMEOUT_PATH 2>/dev/null || readlink -f $WAITFORIT_TIMEOUT_PATH)
+
+WAITFORIT_BUSYTIMEFLAG=""
+if [[ $WAITFORIT_TIMEOUT_PATH =~ "busybox" ]]; then
+    WAITFORIT_ISBUSY=1
+    # Check if busybox timeout uses -t flag
+    # (recent Alpine versions don't support -t anymore)
+    if timeout &>/dev/stdout | grep -q -e '-t '; then
+        WAITFORIT_BUSYTIMEFLAG="-t"
+    fi
+else
+    WAITFORIT_ISBUSY=0
+fi
+
+if [[ $WAITFORIT_CHILD -gt 0 ]]; then
+    wait_for
+    WAITFORIT_RESULT=$?
+    exit $WAITFORIT_RESULT
+else
+    if [[ $WAITFORIT_TIMEOUT -gt 0 ]]; then
+        wait_for_wrapper
+        WAITFORIT_RESULT=$?
+    else
+        wait_for
+        WAITFORIT_RESULT=$?
+    fi
+fi
+
+if [[ $WAITFORIT_CLI != "" ]]; then
+    if [[ $WAITFORIT_RESULT -ne 0 && $WAITFORIT_STRICT -eq 1 ]]; then
+        echoerr "$WAITFORIT_cmdname: strict mode, refusing to execute subprocess"
+        exit $WAITFORIT_RESULT
+    fi
+    exec "${WAITFORIT_CLI[@]}"
+else
+    exit $WAITFORIT_RESULT
+fi

frontend/src/App.css

@@ -21,6 +21,7 @@ body {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  justify-content: center;
   gap: 20px;
 }
 
@@ -33,7 +34,7 @@ body {
   background-color: #f9f9f9;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
   cursor: pointer;
-  min-width: 200px;
+  width: 300px;
   min-height: 100px;
   align-items: center;
 }