For Frontend practice

2026-03-21 20:39:18 +01:00
parent 8b8c08be1b
commit ad1e783472
68 changed files with 3817 additions and 0 deletions
@@ -0,0 +1,7 @@
 PORT=3000
 NODE_ENV=development
 DATABASE_URL=postgresql://webstore_user:webstore_password@localhost:5432/webstore_db?schema=public
 JWT_SECRET=replace-with-a-long-random-secret
 JWT_EXPIRES_IN=7d
 COOKIE_NAME=webstore_token
 COOKIE_SECURE=false
@@ -0,0 +1,6 @@
 node_modules/
 .env
 npm-debug.log*
 public/images/
 !public/images/.gitkeep
 prisma/dev.db
@@ -0,0 +1,14 @@
 FROM node:20-alpine
 WORKDIR /app
 COPY package*.json ./
 RUN apk add --no-cache openssl && npm install --ignore-scripts
 COPY . .
 RUN npm run prisma:generate
 EXPOSE 3000
 CMD ["npm", "run", "dev"]
@@ -0,0 +1,88 @@
 # Webstore Backend (Laxer + CQRS + Prisma)
 Educational Node.js backend for frontend students.
 ## Structure
 ```
 backend/
  prisma/
    schema.prisma
    seed.js
  public/
    images/
  scripts/
    extract-images-from-build.bat
  src/
    Api/
      Controller/
      Router/
      Middleware/
      app.js
      server.js
    Application/
      User/
        Command/
          command.js
          commandhandler.js
        Querry/
          query.js
          queryhandler.js
      Services/
      DTO/
    Domain/
      IRepository/
      Models/
    Infrastructure/
      Repository/
    config/
      env.js
      prisma.js
 ```
 ## Run with Docker Compose
 ```bash
 docker compose up --build
 ```
 This starts PostgreSQL and API, runs Prisma generate/db push/seed automatically.
 ## Auth (JWT in Cookie)
 - `POST /api/users/register`
 - `POST /api/users/login`
 - `GET /api/users/me` (requires cookie)
 - `POST /api/users/logout` (requires cookie)
 Cookie is HTTP-only and set with `sameSite=lax`.
 ## Shop endpoints
 - `GET /api/health`
 - `GET /api/shop/categories`
 - `GET /api/shop/products`
 - `POST /api/shop/orders`
 Order payload:
 ```json
 {
  "customer_name": "Jane Doe",
  "customer_email": "jane@example.com",
  "items": [
    { "product_id": 1, "quantity": 2 }
  ]
 }
 ```
 ## Image extraction batch
 ```bat
 scripts\extract-images-from-build.bat "..\build" ".\public\images"
 ```
 Defaults (if arguments omitted):
 - Source: `..\build`
 - Target: `.\public\images`
@@ -0,0 +1,39 @@
 services:
  db:
    image: postgres:16-alpine
    container_name: webstore_db
    restart: unless-stopped
    environment:
      POSTGRES_DB: webstore_db
      POSTGRES_USER: webstore_user
      POSTGRES_PASSWORD: webstore_password
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data
  api:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: webstore_api
    restart: unless-stopped
    depends_on:
      - db
    environment:
      PORT: 3000
      NODE_ENV: development
      DATABASE_URL: postgresql://webstore_user:webstore_password@db:5432/webstore_db?schema=public
      JWT_SECRET: dev-secret-change-me
      JWT_EXPIRES_IN: 7d
      COOKIE_NAME: webstore_token
      COOKIE_SECURE: "false"
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    command: sh -c "npm run prisma:generate && npm run prisma:push && npm run prisma:seed && npm run dev"
 volumes:
  postgres_data:
@@ -0,0 +1,19 @@
 # Copy and edit values for your production/student environment.
 # API
 PORT=3000
 NODE_ENV=production
 DATABASE_URL=postgresql://webstore_user:webstore_password@db:5432/webstore_db?schema=public
 JWT_SECRET=change-me-in-real-use
 JWT_EXPIRES_IN=7d
 COOKIE_NAME=webstore_token
 COOKIE_SECURE=false
 # Database container bootstrap
 POSTGRES_DB=webstore_db
 POSTGRES_USER=webstore_user
 POSTGRES_PASSWORD=webstore_password
 # Optional: host port overrides
 API_PORT=3000
 DB_PORT=5432
@@ -0,0 +1,36 @@
 services:
  db:
    image: postgres:16-alpine
    container_name: webstore_db_prod
    restart: unless-stopped
    environment:
      POSTGRES_DB: ${POSTGRES_DB}
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
    ports:
      - "${DB_PORT:-5432}:5432"
    volumes:
      - postgres_data_prod:/var/lib/postgresql/data
  api:
    image: webstore-api:prod
    container_name: webstore_api_prod
    restart: unless-stopped
    depends_on:
      - db
    env_file:
      - .production.env
    environment:
      NODE_ENV: production
      DATABASE_URL: ${DATABASE_URL}
      PORT: ${PORT}
      JWT_SECRET: ${JWT_SECRET}
      JWT_EXPIRES_IN: ${JWT_EXPIRES_IN}
      COOKIE_NAME: ${COOKIE_NAME}
      COOKIE_SECURE: ${COOKIE_SECURE}
    command: sh -c "npm run prisma:generate && npm run prisma:push && npm run prisma:seed && npm start"
    ports:
      - "${API_PORT:-3000}:3000"
 volumes:
  postgres_data_prod:
@@ -0,0 +1,69 @@
@echo off
 setlocal EnableExtensions EnableDelayedExpansion
 set "ROOT_DIR=%~dp0"
 set "ENV_FILE=%ROOT_DIR%\.production.env"
 set "COMPOSE_FILE=%ROOT_DIR%\production.compose.yml"
 set "ARCHIVE_FILE=%ROOT_DIR%\images\webstore-production-images.tar"
 set "API_IMAGE=webstore-api:prod"
 echo [1/7] Checking Docker + Compose...
 docker --version >nul 2>&1
 if errorlevel 1 (
    echo ERROR: Docker CLI is not available.
    exit /b 1
 )
 docker compose version >nul 2>&1
 if errorlevel 1 (
    echo ERROR: Docker Compose plugin is not available.
    exit /b 1
 )
 echo [2/7] Validating required files...
 if not exist "%ENV_FILE%" (
    echo ERROR: Missing env file: "%ENV_FILE%"
    exit /b 1
 )
 if not exist "%COMPOSE_FILE%" (
    echo ERROR: Missing compose file: "%COMPOSE_FILE%"
    exit /b 1
 )
 echo [3/7] Loading prebuilt image archive if present...
 if exist "%ARCHIVE_FILE%" (
    docker load -i "%ARCHIVE_FILE%"
    if errorlevel 1 (
        echo ERROR: Failed to load image archive.
        exit /b 1
    )
 ) else (
    echo WARN: "%ARCHIVE_FILE%" not found. Assuming images already exist locally.
 )
 echo [4/7] Ensuring API image exists locally...
 docker image inspect "%API_IMAGE%" >nul 2>&1
 if errorlevel 1 (
    echo ERROR: API image "%API_IMAGE%" not found.
    echo Run scripts\build-production-images.bat first or provide the archive in images\.
    exit /b 1
 )
 echo [5/7] Starting production stack for students...
 pushd "%ROOT_DIR%" >nul
 docker compose --env-file .production.env -f production.compose.yml up -d
 if errorlevel 1 (
    popd >nul
    echo ERROR: Failed to start compose stack.
    exit /b 1
 )
 echo [6/7] Showing running services...
 docker compose --env-file .production.env -f production.compose.yml ps
 echo [7/7] Done.
 echo API should be available at http://localhost:3000 (or API_PORT in .production.env)
 echo Stop stack with:
 echo docker compose --env-file .production.env -f production.compose.yml down
 popd >nul
 exit /b 0
@@ -0,0 +1,37 @@
 {
  "name": "webstore-backend",
  "version": "1.0.0",
  "description": "Teaching backend for a webstore using Node.js, Express, and PostgreSQL",
  "main": "src/Api/server.js",
  "scripts": {
    "dev": "nodemon src/Api/server.js",
    "start": "node src/Api/server.js",
    "prisma:generate": "prisma generate",
    "prisma:push": "prisma db push",
    "prisma:seed": "node prisma/seed.js",
    "postinstall": "prisma generate"
  },
  "keywords": [
    "express",
    "postgres",
    "webstore",
    "backend"
  ],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "cookie-parser": "^1.4.6",
    "cors": "^2.8.5",
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
    "helmet": "^7.1.0",
    "jsonwebtoken": "^9.0.2",
    "morgan": "^1.10.0",
    "@prisma/client": "^5.20.0"
  },
  "devDependencies": {
    "nodemon": "^3.1.4",
    "prisma": "^5.20.0"
  }
 }
@@ -0,0 +1,56 @@
 generator client {
  provider = "prisma-client-js"
 }
 datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
 }
 model User {
  id           Int      @id @default(autoincrement())
  name         String
  email        String   @unique
  passwordHash String
  createdAt    DateTime @default(now())
 }
 model Category {
  id        Int       @id @default(autoincrement())
  name      String    @unique
  slug      String    @unique
  createdAt DateTime  @default(now())
  products  Product[]
 }
 model Product {
  id          Int         @id @default(autoincrement())
  categoryId  Int
  name        String      @unique
  description String?
  price       Decimal     @db.Decimal(10, 2)
  imageUrl    String?
  stock       Int         @default(0)
  createdAt   DateTime    @default(now())
  category    Category    @relation(fields: [categoryId], references: [id], onDelete: Restrict)
  orderItems  OrderItem[]
 }
 model Order {
  id            Int         @id @default(autoincrement())
  customerName  String
  customerEmail String
  totalPrice    Decimal     @db.Decimal(10, 2)
  createdAt     DateTime    @default(now())
  items         OrderItem[]
 }
 model OrderItem {
  id        Int     @id @default(autoincrement())
  orderId   Int
  productId Int
  quantity  Int
  unitPrice Decimal @db.Decimal(10, 2)
  order     Order   @relation(fields: [orderId], references: [id], onDelete: Cascade)
  product   Product @relation(fields: [productId], references: [id], onDelete: Restrict)
 }
@@ -0,0 +1,77 @@
 const { PrismaClient } = require("@prisma/client");
 const prisma = new PrismaClient();
 async function main() {
  const categories = [
    { name: "Shoes", slug: "shoes" },
    { name: "Bags", slug: "bags" },
    { name: "Accessories", slug: "accessories" }
  ];
  for (const category of categories) {
    await prisma.category.upsert({
      where: { slug: category.slug },
      update: {},
      create: category
    });
  }
  const shoes = await prisma.category.findUnique({ where: { slug: "shoes" } });
  const bags = await prisma.category.findUnique({ where: { slug: "bags" } });
  const accessories = await prisma.category.findUnique({ where: { slug: "accessories" } });
  const products = [
    {
      categoryId: shoes.id,
      name: "Street Runner",
      description: "Lightweight city sneaker.",
      price: "18990.00",
      imageUrl: "/images/street-runner.jpg",
      stock: 24
    },
    {
      categoryId: shoes.id,
      name: "Trail Edge",
      description: "Stable shoe for outdoor tracks.",
      price: "24990.00",
      imageUrl: "/images/trail-edge.jpg",
      stock: 13
    },
    {
      categoryId: bags.id,
      name: "Urban Tote",
      description: "Everyday tote with zipper top.",
      price: "14990.00",
      imageUrl: "/images/urban-tote.jpg",
      stock: 30
    },
    {
      categoryId: accessories.id,
      name: "Classic Cap",
      description: "Adjustable cotton cap.",
      price: "6990.00",
      imageUrl: "/images/classic-cap.jpg",
      stock: 42
    }
  ];
  for (const product of products) {
    await prisma.product.upsert({
      where: { name: product.name },
      update: {},
      create: product
    });
  }
 }
 main()
  .then(async () => {
    await prisma.$disconnect();
    console.log("Prisma seed completed.");
  })
  .catch(async (error) => {
    console.error(error);
    await prisma.$disconnect();
    process.exit(1);
  });
@@ -0,0 +1,49 @@
@echo off
 setlocal EnableExtensions EnableDelayedExpansion
 set "ROOT_DIR=%~dp0.."
 set "IMAGE_OUT_DIR=%ROOT_DIR%\images"
 set "ARCHIVE_FILE=%IMAGE_OUT_DIR%\webstore-production-images.tar"
 set "API_IMAGE=webstore-api:prod"
 set "DB_IMAGE=postgres:16-alpine"
 echo [1/6] Checking Docker availability...
 docker --version >nul 2>&1
 if errorlevel 1 (
    echo ERROR: Docker CLI is not available. Install Docker Desktop first.
    exit /b 1
 )
 echo [2/6] Building production API image: %API_IMAGE%
 pushd "%ROOT_DIR%" >nul
 docker build -t "%API_IMAGE%" -f Dockerfile .
 if errorlevel 1 (
    popd >nul
    echo ERROR: Failed to build API image.
    exit /b 1
 )
 popd >nul
 echo [3/6] Pulling database image: %DB_IMAGE%
 docker pull "%DB_IMAGE%"
 if errorlevel 1 (
    echo ERROR: Failed to pull database image.
    exit /b 1
 )
 echo [4/6] Preparing image output directory: %IMAGE_OUT_DIR%
 if not exist "%IMAGE_OUT_DIR%" mkdir "%IMAGE_OUT_DIR%"
 echo [5/6] Exporting images to archive...
 if exist "%ARCHIVE_FILE%" del /f /q "%ARCHIVE_FILE%"
 docker save -o "%ARCHIVE_FILE%" "%API_IMAGE%" "%DB_IMAGE%"
 if errorlevel 1 (
    echo ERROR: Failed to export Docker images.
    exit /b 1
 )
 echo [6/6] Done.
 echo Created archive: "%ARCHIVE_FILE%"
 echo Share this file with students together with production.compose.yml and .production.env.
 exit /b 0
@@ -0,0 +1,57 @@
 const GetCategoriesQuery = require("../../Application/Shop/Query/GetCategoriesQuery");
 const GetProductsQuery = require("../../Application/Shop/Query/GetProductsQuery");
 const CreateOrderCommand = require("../../Application/Shop/Command/CreateOrderCommand");
 const CreateProductCommand = require("../../Application/Shop/Command/CreateProductCommand");
 const container = require("../../Infrastructure/DI/container");
 const getCategoriesHandler = container.resolve("GetCategoriesQueryHandler");
 const getProductsHandler = container.resolve("GetProductsQueryHandler");
 const createOrderHandler = container.resolve("CreateOrderCommandHandler");
 const createProductHandler = container.resolve("CreateProductCommandHandler");
 const getCategories = async (req, res, next) => {
  try {
    const query = new GetCategoriesQuery();
    const data = await getCategoriesHandler.handle(query);
    return res.json({ data });
  } catch (error) {
    return next(error);
  }
 };
 const getProducts = async (req, res, next) => {
  try {
    const query = new GetProductsQuery();
    const data = await getProductsHandler.handle(query);
    return res.json({ data });
  } catch (error) {
    return next(error);
  }
 };
 const createProduct = async (req, res, next) => {
  try {
    const command = new CreateProductCommand(req.body);
    const data = await createProductHandler.handle(command);
    return res.status(201).json({ data });
  } catch (error) {
    return next(error);
  }
 };
 const createOrder = async (req, res, next) => {
  try {
    const command = new CreateOrderCommand(req.body);
    const data = await createOrderHandler.handle(command);
    return res.status(201).json({ data });
  } catch (error) {
    return next(error);
  }
 };
 module.exports = {
  getCategories,
  getProducts,
  createProduct,
  createOrder
 };
@@ -0,0 +1,64 @@
 const RegisterUserCommand = require("../../Application/User/Command/RegisterUserCommand");
 const LoginUserCommand = require("../../Application/User/Command/LoginUserCommand");
 const LogoutUserCommand = require("../../Application/User/Command/LogoutUserCommand");
 const GetCurrentUserQuery = require("../../Application/User/Query/GetCurrentUserQuery");
 const container = require("../../Infrastructure/DI/container");
 const authService = container.resolve("AuthService");
 const registerHandler = container.resolve("RegisterUserCommandHandler");
 const loginHandler = container.resolve("LoginUserCommandHandler");
 const logoutHandler = container.resolve("LogoutUserCommandHandler");
 const currentUserQueryHandler = container.resolve("GetCurrentUserQueryHandler");
 const register = async (req, res, next) => {
  try {
    const command = new RegisterUserCommand(req.body);
    const result = await registerHandler.handle(command);
    res.cookie(authService.cookieName, result.token, authService.cookieOptions());
    return res.status(201).json({ data: result.user });
  } catch (error) {
    return next(error);
  }
 };
 const login = async (req, res, next) => {
  try {
    const command = new LoginUserCommand(req.body);
    const result = await loginHandler.handle(command);
    res.cookie(authService.cookieName, result.token, authService.cookieOptions());
    return res.json({ data: result.user });
  } catch (error) {
    return next(error);
  }
 };
 const me = async (req, res, next) => {
  try {
    const query = new GetCurrentUserQuery({ userId: req.auth.userId });
    const result = await currentUserQueryHandler.handle(query);
    return res.json({ data: result });
  } catch (error) {
    return next(error);
  }
 };
 const logout = async (req, res, next) => {
  try {
    const command = new LogoutUserCommand({ userId: req.auth.userId });
    await logoutHandler.handle(command);
    res.clearCookie(authService.cookieName, authService.clearCookieOptions());
    return res.status(204).send();
  } catch (error) {
    return next(error);
  }
 };
 module.exports = {
  register,
  login,
  me,
  logout
 };
@@ -0,0 +1,20 @@
 const AuthService = require("../../Application/Services/AuthService");
 const authService = new AuthService();
 const authMiddleware = (req, res, next) => {
  try {
    const token = req.cookies[authService.cookieName];
    if (!token) {
      return res.status(401).json({ message: "Authentication required." });
    }
    req.auth = authService.verifyToken(token);
    return next();
  } catch (error) {
    return res.status(401).json({ message: "Invalid or expired token." });
  }
 };
 module.exports = authMiddleware;
@@ -0,0 +1,12 @@
 const errorHandler = (err, req, res, next) => {
  if (res.headersSent) {
    return next(err);
  }
  const status = err.statusCode || 500;
  return res.status(status).json({
    message: err.message || "Internal server error"
  });
 };
 module.exports = errorHandler;
@@ -0,0 +1,5 @@
 const notFound = (req, res) => {
  res.status(404).json({ message: "Route not found" });
 };
 module.exports = notFound;
@@ -0,0 +1,11 @@
 const express = require("express");
 const controller = require("../Controller/shop.controller");
 const router = express.Router();
 router.get("/categories", controller.getCategories);
 router.get("/products", controller.getProducts);
 router.post("/products", controller.createProduct);
 router.post("/orders", controller.createOrder);
 module.exports = router;
@@ -0,0 +1,12 @@
 const express = require("express");
 const controller = require("../Controller/user.controller");
 const authMiddleware = require("../Middleware/auth.middleware");
 const router = express.Router();
 router.post("/register", controller.register);
 router.post("/login", controller.login);
 router.get("/me", authMiddleware, controller.me);
 router.post("/logout", authMiddleware, controller.logout);
 module.exports = router;
@@ -0,0 +1,30 @@
 const express = require("express");
 const helmet = require("helmet");
 const cors = require("cors");
 const morgan = require("morgan");
 const cookieParser = require("cookie-parser");
 const userRouter = require("./Router/user.router");
 const shopRouter = require("./Router/shop.router");
 const notFound = require("./Middleware/notFound");
 const errorHandler = require("./Middleware/errorHandler");
 const app = express();
 app.use(helmet());
 app.use(cors({ origin: true, credentials: true }));
 app.use(morgan("dev"));
 app.use(express.json());
 app.use(cookieParser());
 app.get("/api/health", (req, res) => {
  res.json({ status: "ok", message: "CQRS backend running" });
 });
 app.use("/api/users", userRouter);
 app.use("/api/shop", shopRouter);
 app.use(notFound);
 app.use(errorHandler);
 module.exports = app;
@@ -0,0 +1,6 @@
 const app = require("./app");
 const env = require("../config/env");
 app.listen(env.port, () => {
  console.log(`Server listening on port ${env.port}`);
 });
@@ -0,0 +1,10 @@
 class UserDTO {
  constructor(user) {
    this.id = user.id;
    this.name = user.name;
    this.email = user.email;
    this.createdAt = user.createdAt;
  }
 }
 module.exports = UserDTO;
@@ -0,0 +1,37 @@
 const jwt = require("jsonwebtoken");
 const env = require("../../config/env");
 class AuthService {
  constructor() {
    this.cookieName = env.cookieName;
  }
  signToken(payload) {
    return jwt.sign(payload, env.jwtSecret, { expiresIn: env.jwtExpiresIn });
  }
  verifyToken(token) {
    return jwt.verify(token, env.jwtSecret);
  }
  cookieOptions() {
    return {
      httpOnly: true,
      sameSite: "lax",
      secure: env.cookieSecure,
      path: "/",
      maxAge: 7 * 24 * 60 * 60 * 1000
    };
  }
  clearCookieOptions() {
    return {
      httpOnly: true,
      sameSite: "lax",
      secure: env.cookieSecure,
      path: "/"
    };
  }
 }
 module.exports = AuthService;
@@ -0,0 +1,13 @@
 const bcrypt = require("bcryptjs");
 class PasswordService {
  async hash(rawPassword) {
    return bcrypt.hash(rawPassword, 10);
  }
  async compare(rawPassword, hash) {
    return bcrypt.compare(rawPassword, hash);
  }
 }
 module.exports = PasswordService;
@@ -0,0 +1,9 @@
 class CreateOrderCommand {
  constructor(payload) {
    this.customer_name = payload.customer_name;
    this.customer_email = payload.customer_email;
    this.items = payload.items;
  }
 }
 module.exports = CreateOrderCommand;
@@ -0,0 +1,11 @@
 class CreateOrderCommandHandler {
  constructor(shopRepository) {
    this.shopRepository = shopRepository;
  }
  async handle(command) {
    return this.shopRepository.createOrder(command);
  }
 }
 module.exports = CreateOrderCommandHandler;
@@ -0,0 +1,12 @@
 class CreateProductCommand {
  constructor(payload) {
    this.category_id = payload.category_id;
    this.name = payload.name;
    this.description = payload.description;
    this.price = payload.price;
    this.image_url = payload.image_url;
    this.stock = payload.stock;
  }
 }
 module.exports = CreateProductCommand;
@@ -0,0 +1,11 @@
 class CreateProductCommandHandler {
  constructor(shopRepository) {
    this.shopRepository = shopRepository;
  }
  async handle(command) {
    return this.shopRepository.createProduct(command);
  }
 }
 module.exports = CreateProductCommandHandler;
@@ -0,0 +1,3 @@
 class GetCategoriesQuery {}
 module.exports = GetCategoriesQuery;
@@ -0,0 +1,11 @@
 class GetCategoriesQueryHandler {
  constructor(shopRepository) {
    this.shopRepository = shopRepository;
  }
  async handle() {
    return this.shopRepository.findCategories();
  }
 }
 module.exports = GetCategoriesQueryHandler;
@@ -0,0 +1,3 @@
 class GetProductsQuery {}
 module.exports = GetProductsQuery;
@@ -0,0 +1,11 @@
 class GetProductsQueryHandler {
  constructor(shopRepository) {
    this.shopRepository = shopRepository;
  }
  async handle() {
    return this.shopRepository.findProducts();
  }
 }
 module.exports = GetProductsQueryHandler;
@@ -0,0 +1,8 @@
 class LoginUserCommand {
  constructor(payload) {
    this.email = payload.email;
    this.password = payload.password;
  }
 }
 module.exports = LoginUserCommand;
@@ -0,0 +1,37 @@
 const PasswordService = require("../../Services/PasswordService");
 const UserDTO = require("../../DTO/UserDTO");
 class LoginUserCommandHandler {
  constructor(userRepository, authService) {
    this.userRepository = userRepository;
    this.authService = authService;
    this.passwordService = new PasswordService();
  }
  async handle(command) {
    if (!command.email || !command.password) {
      const error = new Error("email and password are required");
      error.statusCode = 400;
      throw error;
    }
    const user = await this.userRepository.findByEmail(command.email);
    if (!user) {
      const error = new Error("Invalid credentials");
      error.statusCode = 401;
      throw error;
    }
    const isValid = await this.passwordService.compare(command.password, user.passwordHash);
    if (!isValid) {
      const error = new Error("Invalid credentials");
      error.statusCode = 401;
      throw error;
    }
    const token = this.authService.signToken({ userId: user.id, email: user.email });
    return { user: new UserDTO(user), token };
  }
 }
 module.exports = LoginUserCommandHandler;
@@ -0,0 +1,7 @@
 class LogoutUserCommand {
  constructor(payload) {
    this.userId = payload.userId;
  }
 }
 module.exports = LogoutUserCommand;
@@ -0,0 +1,11 @@
 class LogoutUserCommandHandler {
  async handle(command) {
    if (!command.userId) {
      const error = new Error("Unauthorized");
      error.statusCode = 401;
      throw error;
    }
  }
 }
 module.exports = LogoutUserCommandHandler;
@@ -0,0 +1,9 @@
 class RegisterUserCommand {
  constructor(payload) {
    this.name = payload.name;
    this.email = payload.email;
    this.password = payload.password;
  }
 }
 module.exports = RegisterUserCommand;
@@ -0,0 +1,37 @@
 const PasswordService = require("../../Services/PasswordService");
 const UserDTO = require("../../DTO/UserDTO");
 class RegisterUserCommandHandler {
  constructor(userRepository, authService) {
    this.userRepository = userRepository;
    this.authService = authService;
    this.passwordService = new PasswordService();
  }
  async handle(command) {
    if (!command.name || !command.email || !command.password) {
      const error = new Error("name, email and password are required");
      error.statusCode = 400;
      throw error;
    }
    const existing = await this.userRepository.findByEmail(command.email);
    if (existing) {
      const error = new Error("Email already in use");
      error.statusCode = 409;
      throw error;
    }
    const passwordHash = await this.passwordService.hash(command.password);
    const user = await this.userRepository.create({
      name: command.name,
      email: command.email,
      passwordHash
    });
    const token = this.authService.signToken({ userId: user.id, email: user.email });
    return { user: new UserDTO(user), token };
  }
 }
 module.exports = RegisterUserCommandHandler;
@@ -0,0 +1,7 @@
 class GetCurrentUserQuery {
  constructor(payload) {
    this.userId = payload.userId;
  }
 }
 module.exports = GetCurrentUserQuery;
@@ -0,0 +1,26 @@
 const UserDTO = require("../../DTO/UserDTO");
 class GetCurrentUserQueryHandler {
  constructor(userRepository) {
    this.userRepository = userRepository;
  }
  async handle(query) {
    if (!query.userId) {
      const error = new Error("Unauthorized");
      error.statusCode = 401;
      throw error;
    }
    const user = await this.userRepository.findById(query.userId);
    if (!user) {
      const error = new Error("User not found");
      error.statusCode = 404;
      throw error;
    }
    return new UserDTO(user);
  }
 }
 module.exports = GetCurrentUserQueryHandler;
@@ -0,0 +1,15 @@
 class IUserRepository {
  async findById(_id) {
    throw new Error("Method not implemented");
  }
  async findByEmail(_email) {
    throw new Error("Method not implemented");
  }
  async create(_data) {
    throw new Error("Method not implemented");
  }
 }
 module.exports = IUserRepository;
@@ -0,0 +1,11 @@
 class User {
  constructor({ id, name, email, passwordHash, createdAt }) {
    this.id = id;
    this.name = name;
    this.email = email;
    this.passwordHash = passwordHash;
    this.createdAt = createdAt;
  }
 }
 module.exports = User;
@@ -0,0 +1,32 @@
 class DIContainer {
  constructor() {
    this.registry = new Map();
    this.singletons = new Map();
  }
  registerSingleton(token, factory) {
    this.registry.set(token, { factory, lifetime: "singleton" });
  }
  registerTransient(token, factory) {
    this.registry.set(token, { factory, lifetime: "transient" });
  }
  resolve(token) {
    const entry = this.registry.get(token);
    if (!entry) {
      throw new Error(`Dependency not registered: ${token}`);
    }
    if (entry.lifetime === "singleton") {
      if (!this.singletons.has(token)) {
        this.singletons.set(token, entry.factory(this));
      }
      return this.singletons.get(token);
    }
    return entry.factory(this);
  }
 }
 module.exports = DIContainer;
@@ -0,0 +1,57 @@
 const DIContainer = require("./DIContainer");
 const AuthService = require("../../Application/Services/AuthService");
 const UserPrismaRepository = require("../Repository/UserPrismaRepository");
 const ShopPrismaRepository = require("../Repository/ShopPrismaRepository");
 const RegisterUserCommandHandler = require("../../Application/User/Command/RegisterUserCommandHandler");
 const LoginUserCommandHandler = require("../../Application/User/Command/LoginUserCommandHandler");
 const LogoutUserCommandHandler = require("../../Application/User/Command/LogoutUserCommandHandler");
 const GetCurrentUserQueryHandler = require("../../Application/User/Query/GetCurrentUserQueryHandler");
 const GetCategoriesQueryHandler = require("../../Application/Shop/Query/GetCategoriesQueryHandler");
 const GetProductsQueryHandler = require("../../Application/Shop/Query/GetProductsQueryHandler");
 const CreateProductCommandHandler = require("../../Application/Shop/Command/CreateProductCommandHandler");
 const CreateOrderCommandHandler = require("../../Application/Shop/Command/CreateOrderCommandHandler");
 const container = new DIContainer();
 container.registerSingleton("AuthService", () => new AuthService());
 container.registerSingleton("UserRepository", () => new UserPrismaRepository());
 container.registerSingleton("ShopRepository", () => new ShopPrismaRepository());
 container.registerSingleton("RegisterUserCommandHandler", (c) => {
  return new RegisterUserCommandHandler(c.resolve("UserRepository"), c.resolve("AuthService"));
 });
 container.registerSingleton("LoginUserCommandHandler", (c) => {
  return new LoginUserCommandHandler(c.resolve("UserRepository"), c.resolve("AuthService"));
 });
 container.registerSingleton("LogoutUserCommandHandler", () => {
  return new LogoutUserCommandHandler();
 });
 container.registerSingleton("GetCurrentUserQueryHandler", (c) => {
  return new GetCurrentUserQueryHandler(c.resolve("UserRepository"));
 });
 container.registerSingleton("GetCategoriesQueryHandler", (c) => {
  return new GetCategoriesQueryHandler(c.resolve("ShopRepository"));
 });
 container.registerSingleton("GetProductsQueryHandler", (c) => {
  return new GetProductsQueryHandler(c.resolve("ShopRepository"));
 });
 container.registerSingleton("CreateProductCommandHandler", (c) => {
  return new CreateProductCommandHandler(c.resolve("ShopRepository"));
 });
 container.registerSingleton("CreateOrderCommandHandler", (c) => {
  return new CreateOrderCommandHandler(c.resolve("ShopRepository"));
 });
 module.exports = container;
@@ -0,0 +1,126 @@
 const prisma = require("../../config/prisma");
 class ShopPrismaRepository {
  async findCategories() {
    return prisma.category.findMany({ orderBy: { name: "asc" } });
  }
  async findProducts() {
    return prisma.product.findMany({
      include: {
        category: true
      },
      orderBy: { id: "asc" }
    });
  }
  async createProduct(payload) {
    const categoryId = Number(payload.category_id);
    const stock = payload.stock == null ? 0 : Number(payload.stock);
    const price = Number(payload.price);
    if (Number.isNaN(categoryId) || !payload.name || Number.isNaN(price) || Number.isNaN(stock)) {
      const error = new Error("category_id, name, price and stock are required");
      error.statusCode = 400;
      throw error;
    }
    if (price < 0 || stock < 0) {
      const error = new Error("price and stock must be >= 0");
      error.statusCode = 400;
      throw error;
    }
    const category = await prisma.category.findUnique({ where: { id: categoryId } });
    if (!category) {
      const error = new Error("Category not found");
      error.statusCode = 404;
      throw error;
    }
    return prisma.product.create({
      data: {
        categoryId,
        name: payload.name,
        description: payload.description || null,
        price,
        imageUrl: payload.image_url || null,
        stock
      },
      include: {
        category: true
      }
    });
  }
  async createOrder(payload) {
    const { customer_name: customerName, customer_email: customerEmail, items } = payload;
    if (!customerName || !customerEmail || !Array.isArray(items) || items.length === 0) {
      const error = new Error("customer_name, customer_email and items are required");
      error.statusCode = 400;
      throw error;
    }
    return prisma.$transaction(async (tx) => {
      let totalPrice = 0;
      const orderItems = [];
      for (const item of items) {
        const productId = Number(item.product_id);
        const quantity = Number(item.quantity);
        if (Number.isNaN(productId) || Number.isNaN(quantity) || quantity <= 0) {
          const error = new Error("Each item needs product_id and quantity > 0");
          error.statusCode = 400;
          throw error;
        }
        const product = await tx.product.findUnique({ where: { id: productId } });
        if (!product) {
          const error = new Error(`Product ${productId} not found`);
          error.statusCode = 404;
          throw error;
        }
        if (product.stock < quantity) {
          const error = new Error(`Not enough stock for product ${product.name}`);
          error.statusCode = 400;
          throw error;
        }
        totalPrice += Number(product.price) * quantity;
        orderItems.push({ product, quantity });
      }
      const order = await tx.order.create({
        data: {
          customerName,
          customerEmail,
          totalPrice,
          items: {
            create: orderItems.map((entry) => ({
              productId: entry.product.id,
              quantity: entry.quantity,
              unitPrice: entry.product.price
            }))
          }
        },
        include: {
          items: true
        }
      });
      for (const entry of orderItems) {
        await tx.product.update({
          where: { id: entry.product.id },
          data: { stock: entry.product.stock - entry.quantity }
        });
      }
      return order;
    });
  }
 }
 module.exports = ShopPrismaRepository;
@@ -0,0 +1,29 @@
 const prisma = require("../../config/prisma");
 const IUserRepository = require("../../Domain/IRepository/IUserRepository");
 const User = require("../../Domain/Models/User");
 class UserPrismaRepository extends IUserRepository {
  async findById(id) {
    const user = await prisma.user.findUnique({ where: { id: Number(id) } });
    return user ? new User(user) : null;
  }
  async findByEmail(email) {
    const user = await prisma.user.findUnique({ where: { email: email.toLowerCase() } });
    return user ? new User(user) : null;
  }
  async create(data) {
    const user = await prisma.user.create({
      data: {
        name: data.name,
        email: data.email.toLowerCase(),
        passwordHash: data.passwordHash
      }
    });
    return new User(user);
  }
 }
 module.exports = UserPrismaRepository;
@@ -0,0 +1,14 @@
 const path = require("path");
 const dotenv = require("dotenv");
 dotenv.config({ path: path.resolve(process.cwd(), ".env") });
 module.exports = {
  port: Number(process.env.PORT || 3000),
  nodeEnv: process.env.NODE_ENV || "development",
  databaseUrl: process.env.DATABASE_URL,
  jwtSecret: process.env.JWT_SECRET || "dev-secret",
  jwtExpiresIn: process.env.JWT_EXPIRES_IN || "7d",
  cookieName: process.env.COOKIE_NAME || "webstore_token",
  cookieSecure: process.env.COOKIE_SECURE === "true"
 };
@@ -0,0 +1,5 @@
 const { PrismaClient } = require("@prisma/client");
 const prisma = new PrismaClient();
 module.exports = prisma;
@@ -0,0 +1,230 @@
 \usepackage[utf8]{inputenc}
 \usepackage[T1]{fontenc}
 \usepackage[magyar]{babel}
 \usepackage{indentfirst}
 \usepackage{graphicx}
 \usepackage{tikz}
 \usetikzlibrary{positioning}
 \usepackage{fancyvrb}
 \usepackage{amssymb}
 \usepackage{pifont}
 \usepackage{newunicodechar}
 % Unicode szimbólumok definiálása
 \newcommand{\cmark}{\ding{51}}  % ✓ check mark
 \newcommand{\xmark}{\ding{55}}  % ✗ ballot x
 \newunicodechar{✓}{\cmark}
 \newunicodechar{✗}{\xmark}
 \newunicodechar{❌}{\textcolor{red}{\xmark}}
 % Globális verbatim beállítás - tiny betűméret minden verbatim blokkhoz
 \fvset{fontsize=\tiny}
 \usepackage{listingsutf8}
 \usepackage{textcomp}
 \usepackage{eurosym}
 \usepackage{mathtools}
 \lstset{literate=
  {á}{{\'a}}1 {é}{{\'e}}1 {í}{{\'i}}1 {ó}{{\'o}}1 {ú}{{\'u}}1
  {Á}{{\'A}}1 {É}{{\'E}}1 {Í}{{\'I}}1 {Ó}{{\'O}}1 {Ú}{{\'U}}1
  {à}{{\`a}}1 {è}{{\`e}}1 {ì}{{\`i}}1 {ò}{{\`o}}1 {ù}{{\`u}}1
  {À}{{\`A}}1 {È}{{\'E}}1 {Ì}{{\`I}}1 {Ò}{{\`O}}1 {Ù}{{\`U}}1
  {ä}{{\"a}}1 {ë}{{\"e}}1 {ï}{{\"i}}1 {ö}{{\"o}}1 {ü}{{\"u}}1
  {Ä}{{\"A}}1 {Ë}{{\"E}}1 {Ï}{{\"I}}1 {Ö}{{\"O}}1 {Ü}{{\"U}}1
  {â}{{\^a}}1 {ê}{{\^e}}1 {î}{{\^i}}1 {ô}{{\^o}}1 {û}{{\^u}}1
  {Â}{{\^A}}1 {Ê}{{\^E}}1 {Î}{{\^I}}1 {Ô}{{\^O}}1 {Û}{{\^U}}1
  {œ}{{\oe}}1 {Œ}{{\OE}}1 {æ}{{\ae}}1 {Æ}{{\AE}}1 {ß}{{\ss}}1
  {ç}{{\c c}}1 {Ç}{{\c C}}1 {ø}{{\o}}1 {å}{{\r a}}1 {Å}{{\r A}}1
  {€}{{\EUR}}1 {£}{{\pounds}}1 {ő}{{\H{o}}}1 {ű}{{\H{u}}}1
 }
 % Docker nyelvdefiníció
 \lstdefinelanguage{Docker}{
  keywords={FROM, RUN, CMD, LABEL, MAINTAINER, EXPOSE, ENV, ADD, COPY, 
    ENTRYPOINT, VOLUME, USER, WORKDIR, ARG, ONBUILD, STOPSIGNAL, 
    HEALTHCHECK, SHELL, AS},
  keywordstyle=\color{blue}\bfseries,
  identifierstyle=\color{black},
  sensitive=false,
  comment=[l]{\#},
  commentstyle=\color{purple}\ttfamily,
  stringstyle=\color{red}\ttfamily,
  morestring=[b]',
  morestring=[b]"
 }
 % JavaScript nyelvdefiníció
 \lstdefinelanguage{JavaScript}{
  keywords={typeof, new, true, false, catch, function, return, null, catch, 
    switch, var, const, let, if, in, while, do, else, case, break, async, 
    await, class, export, import, extends, super, this, throw, try, default},
  keywordstyle=\color{blue}\bfseries,
  ndkeywords={class, export, boolean, throw, implements, import, this},
  ndkeywordstyle=\color{darkgray}\bfseries,
  identifierstyle=\color{black},
  sensitive=false,
  comment=[l]{//},
  morecomment=[s]{/*}{*/},
  commentstyle=\color{purple}\ttfamily,
  stringstyle=\color{red}\ttfamily,
  morestring=[b]',
  morestring=[b]"
 }
 % YAML nyelvdefiníció
 \lstdefinelanguage{yaml}{
  keywords={true,false,null,y,n},
  keywordstyle=\color{darkgray}\bfseries,
  sensitive=false,
  comment=[l]{\#},
  commentstyle=\color{purple}\ttfamily,
  stringstyle=\color{red}\ttfamily,
  morestring=[b]',
  morestring=[b]",
  basicstyle=\ttfamily\scriptsize,
  breaklines=true,
  columns=fullflexible,
  keepspaces=true,
  showstringspaces=false
 }
 \lstdefinestyle{HTML}{
  language=HTML,
  breaklines=true,
  postbreak=\mbox{\textcolor{red}{$\hookrightarrow$}\space},
  stringstyle=\ttfamily,
  inputencoding=utf8,
  morekeywords={header, time, nav, main, article, section, aside, role, 
    footer, details, open, summary, srcdoc, list, datalist, placeholder, 
    pattern, required, min, max, step, enctype, formaction, formmethod, 
    formnovalidate, formtarget, output}
 }
 \lstdefinestyle{JavaScript}{
  basicstyle=\ttfamily\scriptsize,
  breaklines=true,
  columns=fullflexible,
  keepspaces=true,
  showstringspaces=false,
  literate={}
 }
 \lstdefinestyle{NodeJS}{
  basicstyle=\ttfamily\scriptsize,
  breaklines=true,
  columns=fullflexible,
  keepspaces=true,
  showstringspaces=false,
  literate={}
 }
 \lstdefinestyle{Express}{
  basicstyle=\ttfamily\scriptsize,
  breaklines=true,
  columns=fullflexible,
  keepspaces=true,
  showstringspaces=false,
  literate={}
 }
 \lstdefinestyle{Prisma}{
  basicstyle=\ttfamily\scriptsize,
  breaklines=true,
  columns=fullflexible,
  keepspaces=true,
  showstringspaces=false,
  literate={}
 }
 \usepackage{hyperref}
 \usepackage{attachfile}
 \usepackage{multirow}
 % Navigációs pöttyök hozzáadása subsection nélküli fejezetekhez
 \usepackage{remreset}
 \makeatletter
 \@removefromreset{subsection}{section}
 \makeatother
 \setcounter{subsection}{1}
 %%%%%
 \attachfilesetup{color={1.0 0.6 0.0},author={MD},description={Kattintson duplán a minta %
 megtekintéséhez!},icon=Paperclip}
 % Széchenyi Egyetem arculati színek
 \definecolor{szenavy}{RGB}{44,62,80}        % Sötét kék (fejléc)
 \definecolor{szecyan}{RGB}{0,168,225}       % Világos kék (kiemelés, logó)
 \definecolor{szezold}{RGB}{139,195,74}      % Élénk zöld (akcentus)
 \definecolor{szeszurke}{RGB}{96,96,96}      % Sötét szürke
 % Kompatibilitás a régi parancsokkal
 \definecolor{kiemelesszin}{RGB}{0,168,225}  % Kék kiemelés (szecyan)
 \definecolor{kiemelesszinZ}{RGB}{139,195,74} % Zöld kiemelés (szezold)
 \definecolor{kiemelesszinN}{RGB}{44,62,80}  % Navy kiemelés (szenavy)
 \definecolor{hivatkozasszin}{RGB}{0,168,225} % Kék hivatkozás
 \newcommand{\kiemel}[1]{{\color{kiemelesszin}#1}}
 \newcommand{\kiemelZ}[1]{{\color{kiemelesszinZ}#1}}
 \newcommand{\kiemelN}[1]{{\color{kiemelesszinN}#1}}
 \newcommand{\hiv}[1]{{\color{hivatkozasszin}#1}}
 \newcommand{\logoalul}{
  \begin{picture}(0,0)
    \put(120,-0){\hbox{\includegraphics[scale=.5]{./common/sze_logo.pdf}}}
    \put(205,-6){\hbox{\includegraphics[scale=.4]{./common/it_logo.pdf}}}
  \end{picture}
 }
 \frenchspacing
 \usetheme[compress]{Berlin}
 \useoutertheme[subsection=false]{miniframes}
 \setbeamerfont{section in head/foot}{size=\tiny}
 \setbeamerfont{subsection in head/foot}{size=\tiny}
 % Adaptív, kattintható navigáció:
 % sok section esetén az aktuális marad nagy és szöveges,
 % a többi section lekicsinyített sorszámként jelenik meg.
 \newcommand{\sectioncompactthreshold}{11}
 \makeatletter
 \providecommand{\totalsectionscount}{0}
 \AtEndDocument{%
  \immediate\write\@auxout{\string\gdef\string\totalsectionscount{\arabic{section}}}%
 }
 \makeatother
 \setbeamertemplate{section in head/foot}{%
  {\fontsize{6}{7}\selectfont\bfseries\insertsectionhead}%
 }
 \setbeamertemplate{section in head/foot shaded}{%
  \ifnum\totalsectionscount>\sectioncompactthreshold
    {\fontsize{4.5}{5.5}\selectfont\insertsectionheadnumber}%
  \else
    {\fontsize{5}{6}\selectfont\insertsectionhead}%
  \fi
 }
 \setbeamertemplate{headline}
 {
  \leavevmode%
  \hbox{%
  \begin{beamercolorbox}[wd=\paperwidth,ht=2.5ex,dp=1.125ex]{section in head/foot}%
    \insertsectionnavigationhorizontal{\paperwidth}{}{\hskip0pt plus1filll}
  \end{beamercolorbox}%
  }
  \vskip0pt%
 }
 % Kisebb betűméret a slide-okhoz
 \setbeamerfont{frametitle}{size=\normalsize}
 \setbeamerfont{framesubtitle}{size=\small}
 \setbeamerfont{block title}{size=\small}
 \setbeamerfont{block body}{size=\footnotesize}
 \setbeamerfont{itemize/enumerate body}{size=\footnotesize}
 \setbeamerfont{itemize/enumerate subbody}{size=\scriptsize}
 % Beamer színséma testreszabása Széchenyi arculathoz
 \setbeamercolor{structure}{fg=szecyan}
 \setbeamercolor{palette primary}{bg=szenavy,fg=white}
 \setbeamercolor{palette secondary}{bg=szecyan,fg=white}
 \setbeamercolor{palette tertiary}{bg=szezold,fg=white}
 \setbeamercolor{palette quaternary}{bg=szeszurke,fg=white}
 \setbeamercolor{titlelike}{parent=palette primary}
 \setbeamercolor{frametitle}{bg=szenavy,fg=white}
 \setbeamercolor{frametitle right}{bg=szenavy}
 \setbeamercolor{block title}{bg=szecyan,fg=white}
 \setbeamercolor{block body}{bg=szecyan!10,fg=black}
 \setbeamercolor{block title alerted}{bg=szezold,fg=white}
 \setbeamercolor{block body alerted}{bg=szezold!10,fg=black}
 \setbeamercolor{item}{fg=szecyan}
 \setbeamercolor{subitem}{fg=szezold}
 \author{Magda Donát}
 \institute{Széchenyi István Egyetem, Győr}
 \date{\hiv{\href{https://git.mdnd-it.cc/Donat/GKNB_MSTM071}{https://git.mdnd-it.cc/Donat/GKNB_MSTM071}}\\ \today}
@@ -0,0 +1,86 @@
 \section{Alapok}
 \begin{frame}[fragile]{Mi a TypeScript?}
 \begin{itemize}
  \item A TypeScript a JavaScript \kiemel{típusos kiterjesztése}.
  \item Fejlesztés közben jelez hibákat, mielőtt futna a kód.
  \item A fordítás után sima JavaScript fut a böngészőben vagy Node.js alatt.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Hogyan gondolkodj róla kezdőként?}
 \begin{itemize}
  \item A JavaScript megmondja, \kiemel{hogyan} fusson a program.
  \item A TypeScript megmutatja, \kiemel{milyen adatokkal} futhat biztonságosan.
  \item A típusok dokumentációként is működnek, így a következő fejlesztő gyorsabban megérti a kódot.
  \item A cél nem a bonyolult típusok gyártása, hanem a hibák korai kiszűrése.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Miért jó kezdőknek?}
 \begin{itemize}
  \item Könnyebb megérteni, milyen adatot vár egy függvény.
  \item Biztonságosabb a refaktorálás.
  \item Jobb IDE-támogatást kapsz (autocomplete, hibajelzések).
  \item Kisebb az esélye a futásidejű meglepetéseknek.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Mire figyelj a tanulás elején?}
 \begin{itemize}
  \item Először a JavaScript alapokat erősítsd meg: változók, függvények, objektumok, tömbök.
  \item Utána vezesd be a TypeScriptet kis lépésekben: előbb paraméter- és visszatérési típusokkal.
  \item Ne használd túl korán az any típust, mert ezzel elveszíted a TypeScript fő előnyét.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Telepítés és első projekt}
 \begin{lstlisting}[style=NodeJS]
 mkdir ts-course
 cd ts-course
 npm init -y
 npm install -D typescript ts-node @types/node
 npx tsc --init
 \end{lstlisting}
 \end{frame}
 \begin{frame}[fragile]{Egyszerű tsconfig.json}
 \begin{lstlisting}[style=JavaScript]
 {
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "strict": true,
    "rootDir": "src",
    "outDir": "dist",
    "esModuleInterop": true
  },
  "include": ["src"]
 }
 \end{lstlisting}
 \begin{itemize}
  \item strict: szigorúbb ellenőrzés, kevesebb rejtett hiba.
  \item rootDir/outDir: tisztán elválasztja a forráskódot és a fordított kódot.
  \item module NodeNext: modern ES-modulok Node környezetben.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Első TypeScript-kód}
 \begin{lstlisting}[style=JavaScript]
 // src/index.ts
 function greet(name: string): string {
  return `Hello, ${name}!`;
 }
 console.log(greet("TypeScript"));
 \end{lstlisting}
 \begin{lstlisting}[style=NodeJS]
 npx tsc
 node dist/index.js
 \end{lstlisting}
 \begin{itemize}
  \item Először a tsc fordító fut le, ez ellenőrzi a típusokat.
  \item Ezután már JavaScript fut, vagyis a végrehajtás mindig JS-ben történik.
 \end{itemize}
 \end{frame}
@@ -0,0 +1,63 @@
 \section{Típusok}
 \begin{frame}[fragile]{Primitív típusok}
 \begin{lstlisting}[style=JavaScript]
 let userName: string = "Anna";
 let age: number = 20;
 let isStudent: boolean = true;
 let value: null = null;
 let missing: undefined = undefined;
 \end{lstlisting}
 \begin{itemize}
  \item Ezek a legalapvetőbb építőelemek, minden összetettebb típus ezekre épül.
  \item A null és undefined kezelése kulcsfontosságú a stabil alkalmazásokhoz.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Típusinferencia}
 \begin{lstlisting}[style=JavaScript]
 let city = "Gyor"; // string
 let points = 10;    // number
 const role = "admin"; // "admin" literal
 \end{lstlisting}
 \begin{itemize}
  \item Nem kell mindig kiírni a típust.
  \item Akkor érdemes explicit típust adni, ha nő tőle az olvashatóság.
  \item Jó egyensúly: ahol egyértelmű, hagyd inferálni; ahol kétértelmű, írj explicit típust.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Tömbök és tuple}
 \begin{lstlisting}[style=JavaScript]
 const nums: number[] = [1, 2, 3];
 const tags: Array<string> = ["ts", "js"];
 const point: [number, number] = [10, 20];
 const personRow: [id: number, name: string] = [1, "Bela"];
 \end{lstlisting}
 \begin{itemize}
  \item Tömb: tetszőleges elemszám, azonos elemtípus.
  \item Tuple: fix elemszám, pozíciónként meghatározott típus.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Objektumtípusok}
 \begin{lstlisting}[style=JavaScript]
 const user: { id: number; name: string; active: boolean } = {
  id: 1,
  name: "Kata",
  active: true,
 };
 \end{lstlisting}
 \begin{itemize}
  \item Objektumoknál a típus gyorsan hosszúvá válhat, ezért a következő lépés a type/interface használata.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Tipikus kezdő hibák típusoknál}
 \begin{itemize}
  \item Összekeverni a number és string értékeket (pl. "10" + 5).
  \item Elfelejteni, hogy a const literál-típust is adhat.
  \item Nem kezelni a null lehetőségét külső adatoknál.
 \end{itemize}
 \end{frame}
@@ -0,0 +1,69 @@
 \section{Függvények}
 \begin{frame}[fragile]{Függvénytípusok}
 \begin{lstlisting}[style=JavaScript]
 function add(a: number, b: number): number {
  return a + b;
 }
 const multiply = (a: number, b: number): number => a * b;
 \end{lstlisting}
 \begin{itemize}
  \item Mindig típusold a bemenetet, és lehetőség szerint a visszatérési értéket is.
  \item Ettől egyértelműbb lesz a függvény szerződése.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Opcionális és alapértelmezett paraméter}
 \begin{lstlisting}[style=JavaScript]
 function greet(name: string, title?: string): string {
  return title ? `${title} ${name}` : name;
 }
 function power(base: number, exp = 2): number {
  return base ** exp;
 }
 \end{lstlisting}
 \begin{itemize}
  \item Opcionális paraméter csak a paraméterlista végén legyen.
  \item Az alapértelmezett paraméter csökkenti a hívó kód bonyolultságát.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Union típusok}
 \begin{lstlisting}[style=JavaScript]
 let id: string | number;
 id = "A12";
 id = 12;
 type Direction = "up" | "down" | "left" | "right";
 let move: Direction = "left";
 \end{lstlisting}
 \begin{itemize}
  \item A union azt jelenti, hogy az adat többféle típusból érkezhet.
  \item Literál unionnal szűk, előre ismert értékkészletet adhatsz meg.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Típusszűkítés (narrowing)}
 \begin{lstlisting}[style=JavaScript]
 function printId(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase());
  } else {
    console.log(value.toFixed(0));
  }
 }
 \end{lstlisting}
 \begin{itemize}
  \item Narrowing nélkül a fordító nem engedné string- vagy number-specifikus metódusok hívását.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Gondolkodási minta union esetén}
 \begin{itemize}
  \item 1. lépés: sorold fel, milyen típusok jöhetnek.
  \item 2. lépés: minden esetre írj megfelelő ellenőrzést.
  \item 3. lépés: minden ágban csak az adott típushoz illő műveletet végezz.
 \end{itemize}
 \end{frame}
@@ -0,0 +1,61 @@
 \section{Típusaliasok és interfészek}
 \begin{frame}[fragile]{Type alias}
 \begin{lstlisting}[style=JavaScript]
 type User = {
  id: number;
  name: string;
  email?: string;
 };
 const u: User = { id: 1, name: "Dora" };
 \end{lstlisting}
 \begin{itemize}
  \item A type kulcsszó jó választás, ha később unionöket vagy utility típusokat is használsz.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Interface}
 \begin{lstlisting}[style=JavaScript]
 interface Product {
  sku: string;
  price: number;
  discount?: number;
 }
 const p: Product = { sku: "A-1", price: 100 };
 \end{lstlisting}
 \begin{itemize}
  \item Az interface különösen hasznos API-szerződéseknél és osztályoknál.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Type vs interface (gyakorlat)}
 \begin{itemize}
  \item Interface: objektumszerződésekhez.
  \item Type: unionokhoz, metszetekhez, utility típusokhoz.
  \item Mindkettő használható objektumokhoz, a csapatdöntés a fontos.
  \item A legfontosabb: kódbázison belül maradj következetes.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Readonly és opcionálisság}
 \begin{lstlisting}[style=JavaScript]
 type Settings = {
  readonly appName: string;
  theme?: "light" | "dark";
 };
 \end{lstlisting}
 \begin{itemize}
  \item readonly: a property létrehozás után nem módosítható.
  \item ?: az adott mezőt nem kötelező minden esetben megadni.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Mikor válts type aliasról interface-re?}
 \begin{itemize}
  \item Ha objektumszerződést publikus API-ként szeretnél kommunikálni.
  \item Ha osztály implementálja a szerződést.
  \item Ha a csapatod konvenciója ezt preferálja.
 \end{itemize}
 \end{frame}
@@ -0,0 +1,65 @@
 \section{Középhaladó: Generikus típusok}
 \begin{frame}[fragile]{Generic alap}
 \begin{lstlisting}[style=JavaScript]
 function identity<T>(value: T): T {
  return value;
 }
 const a = identity(42);       // number
 const b = identity("hello"); // string
 \end{lstlisting}
 \begin{itemize}
  \item A generic lehetővé teszi, hogy ugyanaz a függvény több típusra is működjön.
  \item A T helyére a fordító a hívás alapján következteti a típust.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Generic constraint}
 \begin{lstlisting}[style=JavaScript]
 function firstItem<T extends any[]>(items: T) {
  return items[0];
 }
 const first = firstItem([10, 20, 30]);
 \end{lstlisting}
 \begin{itemize}
  \item A constraint (extends) korlátozza, milyen típus adható a generic paraméternek.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Utility tipusok}
 \begin{lstlisting}[style=JavaScript]
 type User = { id: number; name: string; email: string };
 type UserPatch = Partial<User>;
 type UserPublic = Pick<User, "id" | "name">;
 type UserWithoutEmail = Omit<User, "email">;
 \end{lstlisting}
 \begin{itemize}
  \item Utility típusokkal gyorsan előállíthatsz új típusokat manuális másolás nélkül.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Record es Readonly}
 \begin{lstlisting}[style=JavaScript]
 type ScoreByName = Record<string, number>;
 type Config = Readonly<{
  apiUrl: string;
  retries: number;
 }>;
 \end{lstlisting}
 \begin{itemize}
  \item Record: kulcs-érték struktúra típusosan.
  \item Readonly: megakadályozza a véletlen módosításokat.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{A genericek tanulási sorrendje}
 \begin{enumerate}
  \item Először használj kész generic API-kat (pl. Promise<T>, Array<T>).
  \item Utána írj egyszerű saját generic függvényt.
  \item Végül vezesd be a constraintet és utility típusokat.
 \end{enumerate}
 \end{frame}
@@ -0,0 +1,70 @@
 \section{Középhaladó: Modulok és aszinkron működés}
 \begin{frame}[fragile]{Modulok: export/import}
 \begin{lstlisting}[style=JavaScript]
 // math.ts
 export function add(a: number, b: number) {
  return a + b;
 }
 // app.ts
 import { add } from "./math.js";
 console.log(add(2, 3));
 \end{lstlisting}
 \begin{itemize}
  \item Modulokra bontással átláthatóbb és újrafelhasználhatóbb kódot kapsz.
  \item NodeNext módban importnál gyakran .js kiterjesztést használsz.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Async/Await tipusokkal}
 \begin{lstlisting}[style=JavaScript]
 type User = { id: number; name: string };
 async function fetchUser(id: number): Promise<User> {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error("Request failed");
  return res.json();
 }
 \end{lstlisting}
 \begin{itemize}
  \item A Promise<User> egyértelműen jelzi a hívó kódnak a várt eredményt.
  \item Hibakezelés nélkül API-hívásnál nehezen diagnosztizálható hibák jelennek meg.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Kulso csomagok tipizalasa}
 \begin{lstlisting}[style=NodeJS]
 npm install lodash
 npm install -D @types/lodash
 \end{lstlisting}
 \begin{itemize}
  \item Sok csomag már tartalmaz beépített típusokat.
  \item Ha nem, akkor @types csomagot kell telepíteni.
  \item Típusok nélkül külső csomag használata gyorsan any-hoz vezet.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Axios pelda valasz-tipussal}
 \begin{lstlisting}[style=JavaScript]
 import axios from "axios";
 type Todo = { id: number; title: string; done: boolean };
 async function getTodo(id: number): Promise<Todo> {
  const r = await axios.get<Todo>(`/api/todos/${id}`);
  return r.data;
 }
 \end{lstlisting}
 \begin{itemize}
  \item A <Todo> generic paraméterrel a válasz struktúrája már a hívás helyén ellenőrizhető.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Gyakorlati minta API-khoz}
 \begin{itemize}
  \item Definiálj külön típusokat a kérésekhez: Request DTO, Response DTO.
  \item A hálózati réteget különítsd el service függvényekbe.
  \item A komponensek csak a már tipizált adatot kapják.
 \end{itemize}
 \end{frame}
@@ -0,0 +1,67 @@
 \section{Validáció}
 \begin{frame}[fragile]{any vs unknown}
 \begin{lstlisting}[style=JavaScript]
 let loose: any = 123;
 loose = "bármi"; // nincs ellenőrzés
 let safe: unknown = JSON.parse('{"id":1}');
 if (typeof safe === "object" && safe !== null) {
  // itt már szűkíthető
 }
 \end{lstlisting}
 \begin{itemize}
  \item Az any kikapcsolja a típusellenőrzést, ezért csak átmeneti esetben használd.
  \item Az unknown biztonságosabb, mert használat előtt kötelező ellenőrizni.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Futásidejű validáció Type Guarddal}
 \begin{lstlisting}[style=JavaScript]
 function isUser(v: unknown): v is { id: number; name: string } {
  return (
    typeof v === "object" &&
    v !== null &&
    "id" in v &&
    "name" in v
  );
 }
 \end{lstlisting}
 \begin{itemize}
  \item A TypeScript nem helyettesíti a futásidejű validációt.
  \item Külső adatnál (API, localStorage, URL-paraméter) mindig ellenőrizz.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Strict mód bekapcsolása}
 \begin{lstlisting}[style=JavaScript]
 {
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true
  }
 }
 \end{lstlisting}
 \begin{itemize}
  \item Ezek a beállítások kezdetben több hibát mutatnak, de hosszabb távon stabilabb kódot adnak.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Gyakori hibák}
 \begin{itemize}
  \item Túl sok any használata.
  \item Null/undefined esetek figyelmen kívül hagyása.
  \item Túl bonyolult típusok írása stabil alapok nélkül.
  \item Típusok másolása utility típusok használata helyett.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Bevált gyakorlat röviden}
 \begin{itemize}
  \item Alapértelmezésben legyen bekapcsolva a strict mód.
  \item Külső adatot mindig validálj.
  \item Bonyolult típus helyett használj több kicsi, beszédes típust.
  \item Legyen következetes kódstílus és linterbeállítás.
 \end{itemize}
 \end{frame}
@@ -0,0 +1,53 @@
 \section{Tanulási Segédlet}
 \begin{frame}[fragile]{4 hetes tanulási terv}
 \begin{enumerate}
  \item 1. hét: típusok, tömbök, objektumok, függvények.
  \item 2. hét: unionök, narrowing, aliasok, interfészek.
  \item 3. hét: generics, utility típusok, modulok.
  \item 4. hét: aszinkron kód, API-típusok, futásidejű validáció.
 \end{enumerate}
 \begin{itemize}
  \item Napi 45-60 perc folyamatos gyakorlás már jól látható fejlődést ad.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Projektötletek kezdőknek}
 \begin{itemize}
  \item Teendőlista-alkalmazás (CRUD) típusosan.
  \item Egyszerű REST API-kliens.
  \item Jegyzetelő CLI fájlba mentéssel.
 \end{itemize}
 \begin{itemize}
  \item Cél: az alaptípusok és a függvényszerződések rutinszerű használata.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Projektötletek középhaladóknak}
 \begin{itemize}
  \item Modulokra bontott mini backend.
  \item Validációs réteggel rendelkező API-kliens.
  \item Kis NPM-csomag saját típusdefiníciókkal.
 \end{itemize}
 \begin{itemize}
  \item Cél: valós, projekt-szerű struktúrában gondolkodni.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Mit erdemes mindenkepp megtanulni?}
 \begin{itemize}
  \item A típusinferencia értése.
  \item A union + narrowing magabiztos használata.
  \item A generics és utility típusok alapjai.
  \item Futásidejű validáció külső adat esetén.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Önellenőrző kérdések minden modul után}
 \begin{itemize}
  \item Meg tudom magyarázni, mit vár és mit ad vissza a függvényem?
  \item Használtam-e any-t ott, ahol az unknown biztonságosabb lenne?
  \item Tudok-e példát mondani a union + narrowing együtt használatára?
  \item Validáltam-e a külső adatot, mielőtt használtam?
 \end{itemize}
 \end{frame}
@@ -0,0 +1,57 @@
 \section{Haladó Típuskezelés}
 \begin{frame}[fragile]{keyof és indexed access}
 \begin{lstlisting}[style=JavaScript]
 type User = {
  id: number;
  name: string;
  active: boolean;
 };
 type UserKey = keyof User;   // "id" | "name" | "active"
 type NameType = User["name"]; // string
 \end{lstlisting}
 \begin{itemize}
  \item A keyof segítségével dinamikusan hivatkozhatsz egy típus kulcsaira.
  \item Az indexed access típus pontosan kiolvassa egy mező típusát.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Mapped type alapminta}
 \begin{lstlisting}[style=JavaScript]
 type Optional<T> = {
  [K in keyof T]?: T[K];
 };
 type ReadOnly<T> = {
  readonly [K in keyof T]: T[K];
 };
 \end{lstlisting}
 \begin{itemize}
  \item Mapped type-pal meglévő típusból generálhatsz új, következetes szerkezetet.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Conditional type és infer}
 \begin{lstlisting}[style=JavaScript]
 type ElementType<T> = T extends (infer U)[] ? U : T;
 type A = ElementType<string[]>; // string
 type B = ElementType<number>;   // number
 \end{lstlisting}
 \begin{itemize}
  \item A conditional type típus-szintű "if" logikát ad.
  \item Az infer kulcsszóval résztípusokat tudsz kinyerni.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Mikor használd ezeket?}
 \begin{itemize}
  \item Ha sok hasonló DTO típust kell karbantartanod.
  \item Ha könyvtárszintű, újrafelhasználható típus-API-t építesz.
  \item Ha ismétlődő kézi típusmásolást látsz a projektben.
 \end{itemize}
 \begin{alertblock}{Szabály}
 Haladó típust csak akkor vezess be, ha egyszerűbbé teszi a használatot.
 \end{alertblock}
 \end{frame}
@@ -0,0 +1,60 @@
 \section{Osztályok és Architekturális Minták}
 \begin{frame}[fragile]{Osztályok TypeScriptben}
 \begin{lstlisting}[style=JavaScript]
 class Account {
  constructor(
    public owner: string,
    private balance: number
  ) {}
  deposit(amount: number): void {
    this.balance += amount;
  }
  getBalance(): number {
    return this.balance;
  }
 }
 \end{lstlisting}
 \end{frame}
 \begin{frame}[fragile]{Interface + osztály együtt}
 \begin{lstlisting}[style=JavaScript]
 interface Logger {
  log(message: string): void;
 }
 class ConsoleLogger implements Logger {
  log(message: string): void {
    console.log(message);
  }
 }
 \end{lstlisting}
 \begin{itemize}
  \item Az interface szerződés, az osztály ennek konkrét megvalósítása.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Rétegezett felépítés röviden}
 \begin{itemize}
  \item domain: üzleti logika és modellek
  \item service: alkalmazási műveletek
  \item infrastructure: API, adatbázis, külső kapcsolatok
  \item ui/controller: bemenet-kimenet kezelése
 \end{itemize}
 \begin{block}{Előny}
 A jól rétegzett struktúra könnyebben tesztelhető és bővíthető.
 \end{block}
 \end{frame}
 \begin{frame}[fragile]{Gyakori tervezési hiba}
 \begin{itemize}
  \item Minden logika egyetlen fájlban van.
  \item Az API-hívás közvetlenül a komponensben történik típusos határ nélkül.
  \item A validáció és üzleti szabályok keverednek.
 \end{itemize}
 \begin{itemize}
  \item Megoldás: rétegek szétválasztása és tiszta típushatárok.
 \end{itemize}
 \end{frame}
@@ -0,0 +1,42 @@
 \section{Hibakeresés és Fordítói Üzenetek}
 \begin{frame}[fragile]{Hogyan olvasd a TypeScript hibákat?}
 \begin{itemize}
  \item Először a hiba kódját nézd (pl. TS2322).
  \item Utána nézd meg: "mit kaptam" és "mit vár a típus".
  \item A hiba gyakran a hívási pontnál jelenik meg, de az ok lehet korábban.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Tipikus hiba: TS2322}
 \begin{lstlisting}[style=JavaScript]
 let count: number;
 count = "10"; // TS2322
 \end{lstlisting}
 \begin{itemize}
  \item Jelentés: nem kompatibilis típus-hozzárendelés.
  \item Javítás: konvertálj (Number("10")) vagy javítsd az adatforrást.
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Tipikus hiba: TS2532}
 \begin{lstlisting}[style=JavaScript]
 type User = { name?: string };
 const u: User = {};
 console.log(u.name.toUpperCase()); // TS2532
 \end{lstlisting}
 \begin{itemize}
  \item Jelentés: az érték lehet undefined.
  \item Javítás: ellenőrzés (if), optional chaining (u.name?.toUpperCase()).
 \end{itemize}
 \end{frame}
 \begin{frame}[fragile]{Gyakorlati hibakeresési rutin}
 \begin{enumerate}
  \item Szűkítsd a hibát a legkisebb reprodukálható példára.
  \item Ellenőrizd a bemenet tényleges futásidejű értékét.
  \item Egyeztesd a runtime adatot a deklarált típussal.
  \item Írj tesztet, hogy a hiba ne térjen vissza.
 \end{enumerate}
 \end{frame}
@@ -0,0 +1,50 @@
 \section{Gyakorlóműhely}
 \begin{frame}[fragile]{Feladat 1: Típusos szűrés}
 \begin{block}{Feladat}
 Készíts függvényt, amely egy vegyes (string | number) tömbből csak a számokat adja vissza.
 \end{block}
 \begin{lstlisting}[style=JavaScript]
 function onlyNumbers(values: Array<string | number>): number[] {
  return values.filter((v): v is number => typeof v === "number");
 }
 \end{lstlisting}
 \end{frame}
 \begin{frame}[fragile]{Feladat 2: Generic API válasz}
 \begin{block}{Feladat}
 Definiálj újrafelhasználható API-válasz típust data, ok és error mezőkkel.
 \end{block}
 \begin{lstlisting}[style=JavaScript]
 type ApiResponse<T> = {
  data: T;
  ok: boolean;
  error?: string;
 };
 \end{lstlisting}
 \end{frame}
 \begin{frame}[fragile]{Feladat 3: Runtime validáció}
 \begin{block}{Feladat}
 Írj type guardot, amely ellenőrzi, hogy az adat Todo-e.
 \end{block}
 \begin{lstlisting}[style=JavaScript]
 type Todo = { id: number; title: string; done: boolean };
 function isTodo(v: unknown): v is Todo {
  return (
    typeof v === "object" && v !== null &&
    "id" in v && "title" in v && "done" in v
  );
 }
 \end{lstlisting}
 \end{frame}
 \begin{frame}[fragile]{Értékelési szempontok}
 \begin{itemize}
  \item Típusbiztonság: nincs felesleges any.
  \item Olvashatóság: beszédes típus- és függvénynév.
  \item Hibatűrés: külső adat validálása.
  \item Bővíthetőség: új mező esetén is tiszta marad a kód.
 \end{itemize}
 \end{frame}
@@ -0,0 +1,19 @@
 \documentclass[usenames,dvipsnames,aspectratio=169]{beamer}
 \usepackage{./common/webfejl}
 % Automatikus frame törés engedélyezése túl hosszú tartalomnál
 \setbeamertemplate{frametitle continuation}[from second][\insertcontinuationcountroman]
 \title[Webtechnológia és webalkalmazás-fejlesztés - TypeScript]{Webtechnológia és webalkalmazás-fejlesztés - TypeScript}
 \subtitle{TypeScript}
 \begin{document}
 \begin{frame}[plain]
  \titlepage
  \logoalul
 \end{frame}
 \input{typescript_content.tex}
 \end{document}
@@ -0,0 +1,15 @@
 % TypeScript tananyag index fajl
 % Ez a fajl csak osszefuzi a szekciokat kezdotol kozepes szintig.
 \input{sections/01_intro_and_setup.tex}
 \input{sections/02_basic_types.tex}
 \input{sections/03_functions_and_unions.tex}
 \input{sections/04_alias_interface_objects.tex}
 \input{sections/05_generics_and_utility_types.tex}
 \input{sections/06_modules_async_and_api.tex}
 \input{sections/07_validation_and_best_practices.tex}
 \input{sections/08_learning_path_and_practice.tex}
 \input{sections/09_advanced_types.tex}
 \input{sections/10_oop_and_architecture.tex}
 \input{sections/11_debugging_and_error_reading.tex}
 \input{sections/12_practice_workshop.tex}
		`@@ -0,0 +1,3 @@`
							`class GetCategoriesQuery {}`

							`module.exports = GetCategoriesQuery;`
		`@@ -0,0 +1,3 @@`
							`class GetProductsQuery {}`

							`module.exports = GetProductsQuery;`