Release v1.0.0-alpha.5

.env.tmp

@@ -2,21 +2,23 @@ PROJECT_NAME="Movie-Monday-Manager"
 FRONTEND_URL="http://localhost:3000/"
 PORT="3000"
 
-DISCORD_WEBHOOK_URL=https://discord.com/api/webhooks/ID/TOKEN
+DATABASE_URL="file:./dev.db"
+JWT_SECRET="secret"
+JWT_EXPIRATION="2h"
+OMDB_API_KEY="XXXXXXXX"
+MAX_VOTES="20"
+MAX_PROPOSEABLE_MOVIES="5"
 
 SCHEDULE_WATCHLIST="0 15 * * 1"
 SCHEDULE_START="0 19 * * 1"
 SCHEDULE_HISTORY="45 23 * * 1"
 PAUSE_TIME_MIN="15"
 NUM_OF_MOVIES="2"
 
-DATABASE_URL="file:./dev.db"
-JWT_SECRET="secret"
-JWT_EXPIRATION="2h"
-OMDB_API_KEY="XXXXXXXX"
-MAX_VOTES="2"
-
 EMAIL_HOST="smtp.example.com"
 EMAIL_PORT="587"
 EMAIL_HOST_USER="noreply@example.com"
 EMAIL_HOST_PASSWORD="XXXXXXXXX"
+
+DISCORD_ENABLE="false"
+DISCORD_WEBHOOK_URL=https://discord.com/api/webhooks/ID/TOKEN

.gitignore

@@ -37,4 +37,7 @@ lerna-debug.log*
 # Prisma
 /prisma/migrations
 dev.db*
-*.env
+*.env
+
+# Docs
+/docs

README.md

@@ -2,26 +2,61 @@
 ![](https://img.shields.io/github/license/EliasSchaut/Movie-Monday-Manager)
 
 # Movie Monday Manager 
-A full stack management application for voting movies for weekly movie events.
+A full stack management application for voting movies for cyclic movie events.
 
 ## Features
-- Account-registration with email verification
-- Users can vote, add and remove movies
-- Users can manage own profile
-- Clean and responsive Bootstrap-UI
-- 100% useable without client (via REST-API)
-- **(soon)** automatic management of voted movies around movie events
-- **(soon)** automatic notifications for movie events with the list of interested users
+- account-registration with email verification
+- users can vote, add and remove movies
+- users can manage own profile
+- clean and responsive Bootstrap-UI
+- 100% usable without client (via REST-API)
+- automatic management of voted movies around movie events
+- automatic notifications for movie events with the list of interested users
 
 ## Installation
 1. You need [node.js](https://nodejs.org/en/) installed (version 18.12.1 or newer).
-2. Download the [newest version](https://github.com/EliasSchaut/Movie-Monday-Managerreleases) of the code
+2. Download the [newest version](https://github.com/EliasSchaut/Movie-Monday-Manager/releases) of the code
 3. Rename the .env file from ```.env.tmp``` to ```.env```
-4. Open the configuration file (now ```.env```) and set values.
-5. In ```client``` folder: run ```npm install``` and ```npm run build```
-6. In ```prisma``` folder: run prismas ```migrate``` command (e.g. ```prisma migrate dev --name init```)
-7. In root folder: `npm install`.
-8. Run the server with `npm start`.
-
-## Dev-Docs & API-Docs
-This documentation is still work in progress.
+4. Open the configuration file (now ```.env```) and set values (see [config-section](#configuration) below).
+5. Build the project with ```npm run build:all```
+6. Run the server with ```npm run start:prod```
+
+## Configuration
+The configuration file is located in the root directory of the project and is called ```.env```. It will be validated on startup via the [Joi](https://joi.dev/) library. To see the validation schema, see the [config.validation.ts](./src/common/validation/config.validation.ts) file.
+
+## API-Docs
+This project is 100% usable without client via a REST-API!
+The routes start with the prefix ```/api``` (e.g. `http://[::1]:3000/api`). 
+The api is documented with [Swagger](https://swagger.io/) at ```/docs/api``` route of the website (e.g. `http://[::1]:3000/docs/api`).
+
+## Dev-Docs
+This small guide assumes, that you have already some knowledge about node.js and the used frameworks. 
+The whole project is written in [Typescript](https://www.typescriptlang.org/).
+
+### MoMoMat (Backend)
+The backend uses the [NestJS](https://nestjs.com/) framework to handle the REST-API with all its corresponding services. It is also documented with [compodoc](https://compodoc.app/) at ```/docs/backend``` route of the website (e.g. `http://[::1]:3000/docs/backend`).
+This project (`/src` folder) is dived into 3 main parts: 
+The routes (controllers) to handle incoming requests; 
+a common section with lots of usefully functions and classes to support the other parts; 
+and type definitions for internal data structures and data transmission objects (dto's).
+
+To run the backend in development mode, you need to `npm install` the dependencies and run ```npm run start:dev``` in the root folder of the project. Note, that the client has to be built via `npm run build:client` because the client is only statically served from the  `/client/dist` folder. So every change in the client has to be built to show up in the backend project. Also note, that the database should also be built (see `MoMoMat-DB` below). The backend can generate docs as static website by run `npm run build:docs` and shown by `npm run start:docs`. The backend itself can be build with `npm run build`. The build files are located in the `/dist` folder. The `npm run build:all` command can be used to build everything in with just one step.
+
+### MoMoMat-Client (Frontend)
+The frontend uses the [Vue.js](https://vuejs.org/) framework to handle the user interface. 
+It can be found in the `/client` folder.
+
+The frontend uses the [Vue Router](https://router.vuejs.org/) defined in `/client/src/router` folder to handle the navigation between the different pages as singe page application. 
+The router shows different view components depending on the current route. These view components are defined in the `/client/src/views` folder. Some views use special components defined in the `/client/src/components` folder.
+
+To run the client in development mode, you need to `npm install` the dependencies and run ```npm run dev``` in the `/client` folder.
+But in this mode, the backend is disabled and the website cannot interact with any backend route. 
+To build the client for production, you need to run `npm run build` in the `/client` folder. The build files are located in the `/client/dist` folder.
+
+### MoMoMat-DB (Database)
+The database use [Prisma](https://www.prisma.io/) as ORM to handle the database connection and management. 
+Its database schema is defined in the ```/prisma``` folder. 
+Which database is used under the hood can be defined in the ```.env``` file.
+
+The scheme can be formatted with ```npx prisma format``` in `/prisma` folder. 
+A database can be created via ```npx prisma migrate dev``` from `/prisma` folder or ```npm run build:db``` from root folder. 

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "movie-monday-client",
-  "version": "0.0.0",
+  "version": "1.0.0-alpha.5",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check build-only",
@@ -13,6 +13,7 @@
     "bootstrap-table": "^1.21.1",
     "jquery": "^3.6.1",
     "js-cookie": "^3.0.1",
+    "movie-monday-manager": "file:..",
     "vue": "^3.2.37",
     "vue-router": "^4.1.3"
   },

client/src/components/NavbarComponent.vue

@@ -18,6 +18,9 @@
           <li>
             <router-link class="nav-link" to="/privacy">Privacy</router-link>
           </li>
+          <li>
+            <router-link class="nav-link" to="/docs">Docs</router-link>
+          </li>
           <li>
             <a class="nav-link" href="https://github.com/EliasSchaut/Movie-Monday-Manager" target="_blank">GitHub</a>
           </li>

client/src/components/form/NameComponent.vue

@@ -4,7 +4,7 @@
     type="text"
     placeholder="Max Mustermann"
     name="name"
-    pattern="^[A-Z](.*)"
+    pattern="^[A-Z].{2,20}$"
     :invalid_feedback="invalid_feedback"
     required />
 </template>
@@ -17,7 +17,7 @@ export default {
   data() {
     return {
       label: "Name",
-      invalid_feedback: "Should start with a capital letter.",
+      invalid_feedback: "Must be between 3 and 20 characters and start with a capital letter!",
     }
   },
 };

client/src/router/router.ts

@@ -9,6 +9,7 @@ import HistoryView from '../views/HistoryView.vue'
 import PrivacyView from '../views/PrivacyView.vue'
 import { store } from "@/util/store";
 import { get_cookie, remove_cookie } from "@/util/cookie";
+import DocsView from "@/views/DocsView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -52,6 +53,11 @@ const router = createRouter({
       path: '/privacy',
       name: 'privacy',
       component: PrivacyView
+    },
+    {
+      path: '/docs',
+      name: 'docs',
+      component: DocsView
     }
   ]
 })

client/src/views/DocsView.vue

@@ -0,0 +1,28 @@
+<template>
+<CardComponent header="Docs" id="card_docs" nobody>
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">
+      <a href="/docs/api" target="_blank">Api Docs</a>
+    </li>
+    <li class="list-group-item">
+      <a href="/docs/backend" target="_blank">Backend Docs</a>
+    </li>
+  </ul>
+</CardComponent>
+</template>
+
+<script lang="ts">
+import CardComponent from "@/components/CardComponent.vue";
+
+export default {
+  name: "DocsView",
+  components: { CardComponent }
+};
+</script>
+
+<style scoped>
+#card_docs {
+  width: min(500px, 90vw);
+  margin: 20px auto
+}
+</style>

nest-cli.json

@@ -1,5 +1,8 @@
 {
   "$schema": "https://json.schemastore.org/nest-cli",
   "collection": "@nestjs/schematics",
-  "sourceRoot": "src"
+  "sourceRoot": "src",
+  "compilerOptions": {
+    "plugins": ["@nestjs/swagger"]
+  }
 }