LiveLearningLab is your ultimate toolkit for crafting interactive courses with live laboratories using Kubernetes and Docker 🐋. Whether you're an educator, trainer, or developer looking to create engaging and hands-on learning experiences for your students, this project has got you covered!
LiveLearningLab is a powerful and user-friendly platform designed to help you build and manage course materials enriched with live, hands-on labs. It empowers you to create dynamic learning experiences that bring theory to life through real-world Kubernetes and Docker deployments.
🐋 Live Docker-based, interactive laboratories
🏢 Kubernetes integration
👩🏫 User-friendly interface
🤝 Collaborative learning with separate environments
📊 Progress tracking
💻 Course resource management
- Database - postgres:alpine3.18
- Database Admin Panel - dpage/pgadmin4:7.8
- Backend (Express.js + TS) - node:20-buster - (additional dependencies in ./backend/package.json)
- Frontend (Next.js) - node:20-buster - (additional dependencies in ./frontend/package.json)
There is no init schema SQL file, cause we use 'Sequelize' package (with some random data loading).
In /db folder there are also screenshots of scheme and dbdiagram.io code if modification of scheme is needed.
Scheme might also be viewed in PGadmin4
// TODO: Diagram, dbdiagram.txt
- dpage/pgadmin4:7.8
- postgres:alpine3.18 // TODO -> maybe change cause there is no bash, and hard to make chown, and the pgpass does not work
├── db
│ ├── pgadmin4 <- Admin panel for postgres
| | ├── config <- Pgadmin4 config
| | | ├── servers.json <- Adding db container connection during pgadmin4 start
| | | ├── .pgpass <- Automatic login for connection defined in servers.json // TODO does not work ATM, not mounted in compose
| | ├── Dockerfile <- Dockerfile for easier conf management (servers.json and .pgpass)
│ ├── postgres <- Postgres DB related files
| | ├── config <- //TODO
| | | ├── setup.sql <- Optional initial SQL script, enable in docker-compose.yml, not needed due to ORM use in express.js
| | ├── schema.txt <- Schema project //TODO
| | ├── schema.png <- Schema screenshot from dbdiagram //TODO
### Schema structure
The schema of the database is as follows:
User:
- Fields: id, email, password_hash, name, surname, role, description
- Purpose: Represents a user or an admin who controls datasets.
- Relationships:
- One-to-Many with X
- One-to-Many with Y
// TODO
Project supports hot-reload with Dockerm it gets started with compose, written with express.js. Backend is dockerized and avaliable at localhost:8080
// TODO
// TODO do we need to say it needs typing? Review these conventions
- Use typing
- Use lowerCamelCase for variables, properties and function names
├── backend <- Express.js backend
│ ├── src <- Domain specific features
| | ├── Consts <- //TODO
| | ├── Controllers <- API endpoints
| | ├── Database <- DBclient and DBconfig
| | ├── Helpers <- //TODO
| | ├── Middleware <- //TODO
| | ├── Models <- Sequelize ORM models
| | ├── Server <- //TODO
| | ├── Services <- //TODO
| | ├── Utils <- //TODO
| | ├── index.ts <- Entry point
│ ├── node_modules <- Packages installed from npm
│ ├── package.json <- Packages definitions
│ ├── tsconfig.json <- Typescript config
│ ├── tsoa.json <- Typescript config, entry point
| ├── Dockerfile <- Dockerfile for Docker image
| ├── .dockerignore <- Dockeignore for files that don't need to be included in repostiory
│ ├── .env <- Environmental variables for db connection
//TODO review whole frontend
Project has hot-reload with Docker and it gets started with command:
docker-compose -f docker-compose_all.yml up --build- Next.js
- VanillaJS
- Tailwind CSS
- NextUI
- Components functions and files should start with capital letter.
- Every component file should be in folder with the same name.
- Component folder should contains no more than 4 files:
- component.css - component styling
- Component.tsx - component
- ComponentConsts.ts - component consts
- ComponentUtils.ts - component utils (functions)
- Components: camelCase, function() {}
- Functions: camelCase, function() {}
- CSS classes: dash-case (ex. class-name__sub-class--variant)
Frontend source folder is divided into 5 main folders: app, assets, components, consts and types. App folder defines app structure. Assets stores media files. Components contains subfolders with components. Consts folder is intended for global consts and interfaces. Types folder contains globals.d.ts file for defining global interfaces and types. Frontend is dockerized and avaliable at localhost:3000.
├── frontend <- Next.js frontend
│ ├── src <- Source folder
| | ├── app <- App structure
| | ├── assets <- Media folder
| | ├── components <- Components folder
| | ├── consts <- Consts folder
| | ├── types <- Types and interfaces folder
│ ├── public <- Media folder
│ ├── next.config.js <- Next.js config
│ ├── package.json <- Packages to install
│ ├── tsconfig.json <- TypeScript config
│ ├── tailwind.config.json <- Tailwind CSS config
│ ├── Dockerfile <- Dockerfile for Docker image
In order to start developing, please create your own branch:
git checkout -b "<type>/<branch-name>"
- Type: feature, fix, build, chore, ci, docs, style, refactor, test, db
- Name: dash-case
ex. feature/login-page
Please use following commits name convention:
<type>: commit name
- Type: feature, fix, build, chore, ci, docs, style, refactor, test, db
- Name: lowercase
ex. feature: add login button
Please use following pull request name convention:
<Type>: commit name
- Type: Feature, Fix, Build, Chore, CI, Docs, Style, Refactor, Test, Db
- Name: lowercase
ex. Feature: add login page
Additionally list in pull request description main changes.
⚠ Use squash and merge ⚠