backend/Dockerfile

-FROM node:16-alpine
+#---------- DEVELOPMENT ----------
+FROM node:16-alpine AS development
 
+# we do not want to run under the root user
+USER node
+
+# install node_modules outside app root in container so local development won't run into a problem of bind-mounting over it with local source code
 WORKDIR /usr/src
 
-COPY ["package.json", "package-lock.json*", "./"]
+COPY --chown=node:node ["package.json", "package-lock.json", "./"]
 RUN npm install
+# ensures that exactly these executables (from the node_modules folder) are used instead of any other executables which might also be installed on the system inside the Docker image
+ENV PATH=/usr/src/node_modules/.bin:$PATH
+
+WORKDIR /usr/src/app
+
+COPY --chown=node:node prisma/schema.prisma ./prisma/
+RUN npx prisma generate
+
+COPY --chown=node:node . .
+
+CMD ["npm", "run", "start:dev"]
+
+
+#---------- PRODUCTION ----------
+FROM node:16-alpine AS production
+
+# we do not want to run under the root user
+USER node
+
+ARG NODE_ENV=production
+ENV NODE_ENV=${NODE_ENV}
+
+WORKDIR /usr/src
+
+COPY --chown=node:node --from=development /usr/src/package.json ./
+COPY --chown=node:node --from=development /usr/src/package-lock.json ./
+# install only 'dependencies' and not 'devDependencies'
+RUN npm install --omit=dev
+# ensures that exactly these executables (from the node_modules folder) are used instead of any other executables which might also be installed on the system inside the Docker image
 ENV PATH=/usr/src/node_modules/.bin:$PATH
 
 WORKDIR /usr/src/app
 
-COPY prisma/schema.prisma ./prisma/
+COPY --chown=node:node prisma/schema.prisma ./prisma/
 RUN npx prisma generate
 
-COPY . .
+COPY --chown=node:node --from=development /usr/src/app/dist ./dist
 
-CMD ["npm", "run", "build"]
+CMD ["npm", "run", "start:prod"]

backend/src/api/movies/dto/movies-query.ts

 import { ApiPropertyOptional } from "@nestjs/swagger";
 import { Transform, Type } from "class-transformer";
-import { IsOptional, IsPositive, IsString, IsUUID, ValidateNested } from "class-validator";
+import { IsOptional, IsPositive, IsString, IsUUID, Min, ValidateNested } from "class-validator";
 
 class Runtime {
   @Transform(({ value }) => +value)
   @IsOptional()
-  @IsPositive()
+  @Min(0)
   @ApiPropertyOptional({name: 'runtime[gte]'})
   gte?: number;
 
   @Transform(({ value }) => +value)
   @IsOptional()
-  @IsPositive()
+  @Min(0)
   @ApiPropertyOptional({name: 'runtime[lte]'})
   lte?: number;
 }
@@ -19,13 +19,13 @@ class Runtime {
 class Published {
   @Transform(({ value }) => +value)
   @IsOptional()
-  @IsPositive()
+  @Min(1878)
   @ApiPropertyOptional({name: 'published[gte]'})
   gte?: number;
 
   @Transform(({ value }) => +value)
   @IsOptional()
-  @IsPositive()
+  @Min(1878)
   @ApiPropertyOptional({name: 'published[lte]'})
   lte?: number;
 }

docker-compose.yml

@@ -7,7 +7,8 @@ services:
     build:
       context: ./backend
       dockerfile: Dockerfile
-    command: npm run start:debug
+      # change target in order to run in different environment ('development' or 'production' environment, see ./backend/Dockerfile)
+      target: development
     ports:
       - 127.0.0.1:${SERVER_PORT}:${SERVER_PORT}
     networks:
@@ -15,7 +16,12 @@ services:
     volumes:
       # changes in host's ./backend directory will be propagated to the container
       - ./backend:/usr/src/app
+      # this will let us add packages during development without rebuilding the image
+      # - we then need to install added packages (run 'npm i') inside the container in the folder '/usr/src'
+      - ./backend/package.json:/usr/src/package.json
+      - ./backend/package-lock.json:/usr/src/package-lock.json
       # this prevents our host files from overriding container's node_modules
+      # – some packages may be platform specific so we always want to run 'npm i' in the container when new package is added
       - exclude-server:/usr/src/app/node_modules/
     environment:
       - PORT=${SERVER_PORT}
@@ -85,7 +91,12 @@ services:
     volumes:
       # changes in host's ./frontend directory will be propagated to the container
       - ./frontend:/usr/src/app
+      # this will let us add packages during development without rebuilding the image
+      # - we then need to install added packages (run 'npm i') inside the container in the folder '/usr/src'
+      - ./frontend/package.json:/usr/src/package.json
+      - ./frontend/package-lock.json:/usr/src/package-lock.json
       # this prevents our host files from overriding container's node_modules
+      # – some packages may be platform specific so we always want to run 'npm i' in the container when new package is added
       - exclude-client:/usr/src/app/node_modules/
     environment:
       - PORT=${CLIENT_PORT}

frontend/Dockerfile

-FROM node:16-alpine
+#---------- DEVELOPMENT ----------
+FROM node:16-alpine AS development
 
+# we do not want to run under the root user
+USER node
+
+# install node_modules outside app root in container so local development won't run into a problem of bind-mounting over it with local source code
 WORKDIR /usr/src
 
-COPY ["package.json", "package-lock.json*", "./"]
+COPY --chown=node:node ["package.json", "package-lock.json", "./"]
 RUN npm install
+# ensures that exactly these executables (from the node_modules folder) are used instead of any other executables which might also be installed on the system inside the Docker image
 ENV PATH=/usr/src/node_modules/.bin:$PATH
 
 WORKDIR /usr/src/app
 
-COPY . .
+COPY --chown=node:node . .
 
 CMD ["npm", "run", "dev"]
+
+
+# TODO: add stage to create image for the production environment

frontend/src/components/About.tsx

@@ -13,10 +13,10 @@ export const About = () => {
         <Card title={<Title>About</Title>}>
           <Paragraph> Movie Base is database of movies.</Paragraph>
           <Paragraph>
-            {" "}
             It is possible to view popular movies, search for your favourites
-            or checkout details of every movie possible{" "}
+            or checkout details of every movie in existence (or at least in our database)
           </Paragraph>
+          <Paragraph>Authors: Lukáš Kratochvíl, Martin Korec, Tomáš Havlíček</Paragraph>
         </Card>
       </Space>
     </Typography>

frontend/src/components/MoviePage.tsx

@@ -47,7 +47,7 @@ export const MoviePage = () => {
         style={{ padding: "5%" }}
       >
         <Descriptions.Item label="Title picture" span={3}>
-          <Image src={movie.picture}></Image>
+          <Image height={400} src={movie.picture}></Image>
         </Descriptions.Item>
         <Descriptions.Item label="Name" span={2}>
           {movie.name}

frontend/src/components/PreviewBox.tsx

@@ -11,7 +11,7 @@ interface IPreviewBoxProps {
 export const PreviewBox: React.FC<IPreviewBoxProps> = ({ title, movies }) => {
   return (
     <Card title={title}>
-      <Row justify="space-evenly" gutter={50}>
+      <Row justify="space-evenly" align="bottom" gutter={50}>
         {movies.map((movie) => {
           return (
             <Col flex={1}>