Permissions

.github/workflows/containerize.yaml

@@ -4,6 +4,11 @@ on:
   push:
     branches:
       - main
+      - hotfix/*
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
 
 jobs:
   build-and-publish:
@@ -15,10 +20,10 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Login to GitHub Package Registry
-        uses: docker/login-action@v1
+        uses: docker/login-action@v3
         with:
           registry: docker.pkg.github.com
           username: ${{ github.actor }}
@@ -30,7 +35,7 @@ jobs:
           secrets: ${{ toJSON(secrets) }}
 
       - name: Setup .env file
-        run: env >> .env
+        run: cp .env-example .env
 
       - name: Build Docker image
         run: docker build -t docker.pkg.github.com/${{ github.repository }}/${{ github.event.repository.name }}:latest .

.github/workflows/test.yml

@@ -10,12 +10,13 @@ jobs:
 
     steps:
     - name: Checkout code
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
-    - uses: docker-practice/actions-setup-docker@master
+    - name: Setup Docker buildx
+      uses: docker/setup-buildx-action@v3.8.0
 
     - name: Install pnpm
-      uses: pnpm/action-setup@v2
+      uses: pnpm/action-setup@v4
       with:
         version: latest
 
@@ -34,13 +35,22 @@ jobs:
         secrets: ${{ toJSON(secrets) }}
 
     - name: Setup .env file
-      run: env >> frontend/.env
+      run: cp frontend/.env-example frontend/.env
 
     - name: Start services
       run: make start-detached
 
-    # - name: Wait for services to start
-    #   run: make wait-for-healthcheck
+    - name: Wait for services to start
+      timeout-minutes: 2
+      run: make wait-for-healthcheck
 
-    - name: Start tests
-      run: make test
+    - name: Run tests
+      working-directory: frontend
+      run: docker run -v $PWD:/app -w /app mcr.microsoft.com/playwright bash -c "npm test -- --reporter=html --output=test-results"
+
+    - name: upload playwright artifacts
+      if: always()
+      uses: actions/upload-artifact@v4
+      with:
+        name: playwright-results
+        path: frontend/test-results

.gitignore

@@ -2,3 +2,6 @@
 /questdb
 /grafana
 /postgres-db
+/a.py
+/.idea
+/frontend/test-results

.vscode/launch.json

@@ -0,0 +1,40 @@
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Launch server",
+			"request": "launch",
+			"runtimeArgs": [
+				"run",
+				"dev",
+				"--",
+				"--host",
+			],
+			"runtimeExecutable": "npm",
+			"skipFiles": [
+				"<node_internals>/**"
+			],
+			"type": "node",
+			"console": "integratedTerminal",
+			"cwd": "${workspaceFolder}/frontend/",
+		},
+		{
+			"type": "chrome",
+			"request": "launch",
+			"name": "Launch chrome",
+			"url": "http://localhost:5173",
+			"cwd": "${workspaceFolder}/frontend/",
+			"webRoot": "${workspaceFolder}/frontend/"
+		}
+	],
+	"compounds": [
+		{
+			"name": "Both",
+			"cwd": "${workspaceFolder}/frontend/",
+			"configurations": [
+				"Launch server",
+				"Launch chrome"
+			]
+		}
+	]
+}

Makefile

@@ -1,28 +1,43 @@
 # Start dependencies run frontend and backend seperately
 start-deps:
-	docker compose up --remove-orphans --build --detach redis postgres
+	docker compose up --remove-orphans --build --detach canvas-redis canvas-postgres
 
 # Starts all containers
 start:
 	docker compose up --remove-orphans --build
 
 # Starts all containers detached
 start-detached:
-	docker compose up --remove-orphans --build --detach
+	docker compose up --remove-orphans --build --detach --timeout 4
 
 # Wait for services to start
 wait-for-healthcheck: $(eval SHELL:=/bin/bash)
 	while [ 1 ]; do \
-		STATUS=$$(docker inspect -f {{.State.Health.Status}} frontend); \
+		STATUS=$$(docker inspect -f {{.State.Health.Status}} canvas-frontend); \
 		echo "$$STATUS"; \
-		[[ "$$STATUS" = "unhealthy" ]] && sleep 1 && docker compose logs && exit 1; \
 		[[ "$$STATUS" = "healthy" ]] && exit 0; \
 		sleep 1; \
 	done;
 
 # Stops all containers
 down:
-	docker-compose down --remove-orphans --timeout 4
+	docker compose down --remove-orphans --timeout 4
+
+nuke-postgres:
+	docker compose down --remove-orphans --timeout 4 canvas-postgres
+	rm -rf frontend/postgres-db postgres-db
+	docker compose up --remove-orphans --build --detach canvas-postgres
+
+nuke-redis:
+	docker compose down --remove-orphans --timeout 4 canvas-redis
+	rm -rf frontend/redis-db redis-db
+	docker compose up --remove-orphans --build --detach canvas-redis
+
+nuke-db:
+	docker compose down --remove-orphans --timeout 4 canvas-redis canvas-postgres
+	rm -rf frontend/postgres-db postgres-db
+	rm -rf frontend/redis-db redis-db
+	docker compose up --remove-orphans --build --detach canvas-redis canvas-postgres
 
 # Run tests
 test:

README.md

@@ -1,12 +1,10 @@
-
 <h1> <img height="25" src="./frontend/static/icons/android-chrome-192x192.png" alt="Pixels Logo"> Pixels - Learn Programming through Pixel Art </h1>
 <p align="center">
   <img width="400" src="./frontend/static/images/example.gif" alt="sample gif">
 </p>
 
 Pixels is an interactive learning platform that aims to teach highschool students programming by allowing them to create pixel art on a canvas using any programming language.
 
-
 ## Introduction
 
 Pixels introduces students to the exciting world of programming by enabling them to create and manipulate pixel art simple through writing code in any programming language. Learners can develop their programming skills, as well as their creativity and problem-solving abilities.
@@ -19,39 +17,76 @@ Pixels introduces students to the exciting world of programming by enabling them
 
 ## Prerequisites
 
-- [Node.js](https://nodejs.org/) >=18.x
-- [pnpm](https://pnpm.io/) >=8.x
-- [Docker](https://www.docker.com/) >=23.x
+- [Node.js](https://github.com/nodesource/distributions) >=20.x
+- [pnpm](https://pnpm.io/installation) >=8.x
+- [Docker](https://docs.docker.com/get-started/get-docker/) >=25.x
 
 ## Development
 
 1. Clone the repository:
 
 ```sh
 git clone https://github.com/pixelcorp-nl/canvas.edu.git
-cd pixels
+cd canvas.edu
 ```
 
 2. Set up environment variables
+
 ```shell
-cp frontend/.env.example frontend/.env
-# fill in the variables in .env
+cp frontend/.env-example frontend/.env
+# You probably don't have to change anything in the .env file, but take a look nonetheless
 ```
 
-3. Start dependencies (database, etc.)
+3. Start dependencies (postgres database, etc.)
 ```sh
 make start-deps
 ```
 
 4. Start the development server
 
 ```sh
+# Install pnpm if you do not have it already.
+# npm install -g pnpm
+
 cd frontend
 pnpm install
 pnpm run dev
 ```
 
 5. Pixels is ready at http://localhost:5173
 
+6. Send pixels.
+Since your development environment is running on localhost you will not be able to reach it with trinket.
+Instead you can use python locally on your computer.
+The Key from the info page does not work in the development env currently, untill this is fixed the key "joppe" can be used.
+
+Here are some python cli tips to get you started:
+```sh
+# install a python package
+pip3 install <package>
+
+# run a python script
+python3 putpixels.py
+```
+
+## Admin panel
+The admin page is available at `/admin` and can be used to manage users, classes and settings.
+You can create a admin user by creating a user who's name starts with the value of the environment variable `PRIVATE_ADMIN_KEY`, default is `joppe`
+
+## Code structure
+The project consists of 3 parts:
+1. `frontend` - The frontend of the application, built with [SvelteKit](https://kit.svelte.dev/)
+2. `redis` - The Redis database for storing pixel data
+3. `postgres` - The Postgres database for storing user data and other information
+
+If you break the database(s), you can clear them by:
+```shell
+# cd to the root of the project
+make nuke-postgres # if you want to clear the postgres database
+make nuke-redis # if you want to clear the redis database
+make nuke-db # if you want to clear both databases
+```
+
+
 
 Pixels is released under the [MIT License](LICENSE)

deployment/docker-compose.yaml

@@ -1,8 +1,8 @@
-version: '3.7'
+version: "3.7"
 services:
   frontend:
     container_name: frontend
-    image: ghcr.io/pixelcorp-nl/canvas.edu/canvas.edu:latest
+    image: ghcr.io/pixelcorp-nl/canvas.edu/canvas.edu
     restart: unless-stopped
     ports:
       - 80:5173
@@ -13,6 +13,17 @@ services:
       - postgres
       - datadog-agent
 
+  postgres:
+    container_name: postgres
+    restart: unless-stopped
+    image: postgres:alpine
+    environment:
+      POSTGRES_PASSWORD: postgres
+    ports:
+      - 5432:5432
+    volumes:
+      - ./postgres-db:/var/lib/postgresql/data
+
   redis:
     container_name: redis
     image: redis:alpine
@@ -34,17 +45,6 @@ services:
     ports:
       - 8125:8125/udp
 
-  postgres:
-    container_name: postgres
-    restart: unless-stopped
-    image: postgres:alpine
-    environment:
-      POSTGRES_PASSWORD: postgres
-    ports:
-      - 5432:5432
-    volumes:
-      - ./postgres-db:/var/lib/postgresql/data
-
   cloudflared:
     container_name: cloudflared
     image: cloudflare/cloudflared

docker-compose.yaml

@@ -1,35 +1,33 @@
-version: '3.7'
+version: "3.7"
 services:
-  frontend:
-    container_name: frontend
+  canvas-frontend:
+    container_name: canvas-frontend
     restart: unless-stopped
     build: ./frontend
     ports:
       - 5173:5173
-      - 5174:5174 # todo: remove this port when we can run production in docker
     env_file:
       - ./frontend/.env
-    environment:
-      PRIVATE_REDIS_URL: redis://redis:6379
     depends_on:
-      - redis
+      - canvas-redis
+      - canvas-postgres
 
-  postgres:
-    container_name: postgres
+  canvas-postgres:
+    container_name: canvas-postgres
     restart: unless-stopped
-    image: postgres:alpine
+    image: postgres:17.2-alpine3.21
     environment:
       POSTGRES_PASSWORD: postgres
     ports:
       - 5432:5432
     volumes:
       - ./postgres-db:/var/lib/postgresql/data
 
-  redis:
-    container_name: redis
-    image: redis:alpine
+  canvas-redis:
+    container_name: canvas-redis
+    image: redis:7.4.2-alpine
     restart: unless-stopped
     volumes:
       - ./redis-db:/data
     ports:
-      - 6379:6379
+      - 16379:6379