Initial version of frontend and backend

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,16 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# misc
+.DS_Store
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# IDE
+.vscode
+.idea
+*.iml

.nvmrc

@@ -0,0 +1 @@
+16.17.0

.prettierignore

@@ -0,0 +1 @@
+package.json

.prettierrc.yaml

@@ -0,0 +1,6 @@
+singleQuote: true
+trailingComma: 'all'
+overrides:
+ - files: 'bin/*.js'
+   options: 
+     trailingComma: 'es5'

README.md

@@ -0,0 +1,47 @@
+# [4IT580: Agilní vývoj webových aplikací](http://4it580.vse.cz/) na [VŠE](https://www.vse.cz/)
+
+## [📖 4IT580: Docs](https://vse-4it580-docs-2022.vercel.app)
+
+## JavaScript
+
+We will be using [Node.js](https://nodejs.org/). Please see [`.nvmrc`](./.nvmrc) to find current node.js version we are using.
+New JavaScript features (ES2015+) are "enabled" for all modern browsers with [Babel](https://babeljs.io/).
+
+### Reference
+
+- [JavaScript reference on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)
+- [Learn ES2015](https://babeljs.io/docs/en/learn) + more:
+  - [object rest spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/)
+
+### Literature
+
+- **[React docs](https://reactjs.org/docs/getting-started.html)**
+- frontend app is created using [`create-react-app`](https://create-react-app.dev/)
+- books:
+  - [You Don't Know JS (book series)](https://github.com/getify/You-Dont-Know-JS/tree/1st-ed)
+    - [Up & Going](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/up%20%26%20going/README.md)
+    - [Scope & Closures](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/scope%20%26%20closures/README.md)
+    - [ES6 & Beyond](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/es6%20%26%20beyond/README.md)
+  - [JavaScript: The Good Parts](http://shop.oreilly.com/product/9780596517748.do)
+
+### JavaScript Packages
+
+- [yarn CLI docs](https://yarnpkg.com/en/docs/cli/)
+- Useful commands:
+  - `yarn install` (install local dependencies - based on `package.json` and `yarn.lock` files)
+  - `yarn add <package-name>` (install new NPM package and add it as a dependency to `package.json`)
+  - `yarn <script-name>` (eg. `yarn start`, `yarn prettier`, see `"scripts"` section in `package.json`)
+- Search for packages:
+  - [npmjs.com](https://www.npmjs.com/)
+  - **[js.coach/react](https://js.coach/react)**
+
+## Server Setup
+
+## SSH
+
+- `ssh [email protected]`
+- frontend code: `cd ~/code/cviceni/frontend`
+
+### Domains
+
+- [dev.frontend.**username**.vse.handson.pro](http://dev.frontend.username.vse.handson.pro)

backend/.gitignore

@@ -0,0 +1,14 @@
+/node_modules/
+npm-debug.log
+
+/build/
+
+# custom
+/.env
+/.env.local
+
+/log/*
+!/log/.gitkeep
+
+/tmp/*
+!/tmp/restart.txt

backend/.nvmrc

@@ -0,0 +1 @@
+../.nvmrc

backend/README.md

@@ -0,0 +1,47 @@
+# 4IT580: Backend
+
+## Requirements
+
+- Node.js v12 (or later)
+- Yarn (`npm install --global yarn`)
+
+## Setup ENV Variables
+
+```
+cp ./.env.example ./.env
+```
+
+Edit `.env` file (DB user, password, ...)
+
+## Install Dependencies
+
+```bash
+yarn install
+```
+
+## `yarn dev`
+
+Runs the app in the development mode.\
+Open [http://localhost:4000](http://localhost:4000) to view it in the browser.
+
+## Seed Database
+
+Using phpMyAdmin or MySQL Workbench run following SQL: [`./db/seed.sql`](./db/seed.sql)
+
+## Run Production
+
+```bash
+yarn start
+```
+
+## Build Production
+
+```bash
+yarn build
+```
+
+### Build Production and Watch for Changes
+
+```bash
+yarn build:watch
+```

backend/db/seed.sql

@@ -0,0 +1,49 @@
+CREATE TABLE `quack` (
+  `id` int(11) NOT NULL,
+  `createdAt` text COLLATE utf8_bin,
+  `userId` int(11) NOT NULL,
+  `text` text COLLATE utf8_bin
+) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;
+
+INSERT INTO `quack` (`id`, `createdAt`, `userId`, `text`) VALUES
+(1, '2019-08-08T05:43:18.023Z', 1, 'Hello, People of the World!'),
+(2, '2019-08-06T14:10:51.023Z', 2, 'Como setas?'),
+(3, '2019-08-03T09:09:34.023Z', 3, 'Hello, People of the World! Hello, People of the World! Hello, People of the World! Hello, People of the World! Hello,\n\nWorld!');
+
+
+CREATE TABLE `user` (
+  `id` int(11) NOT NULL,
+  `email` text COLLATE utf8_bin NOT NULL,
+  `password` text COLLATE utf8_bin NOT NULL,
+  `name` text COLLATE utf8_bin NOT NULL,
+  `userName` text COLLATE utf8_bin NOT NULL,
+  `profileImageUrl` text COLLATE utf8_bin NOT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;
+
+INSERT INTO `user` (`id`, `name`, `email`, `password`, `userName`, `profileImageUrl`) VALUES
+(1, 'Young Gatchell', '[email protected]', 'notHashedPassword1', 'yg123', 'http://mrmrs.github.io/photos/p/1.jpg'),
+(2, 'Gatchell Young', '[email protected]', 'notHashedPassword2', 'gyoung', 'http://mrmrs.github.io/photos/p/2.jpg'),
+(3, 'Mitchel Old', '[email protected]', 'notHashedPassword3', 'oldmit', 'http://mrmrs.github.io/photos/p/3.jpg');
+
+ALTER TABLE `quack`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Indexes for table `user`
+--
+ALTER TABLE `user`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- AUTO_INCREMENT for dumped tables
+--
+
+--
+-- AUTO_INCREMENT for table `quack`
+--
+ALTER TABLE `quack`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
+--
+-- AUTO_INCREMENT for table `user`
+ALTER TABLE `user`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

backend/docker-compose.yml

@@ -0,0 +1,19 @@
+version: '3.1'
+
+services:
+  db:
+    image: mariadb
+    restart: always
+    environment:
+      MYSQL_ROOT_PASSWORD: example
+      MYSQL_DATABASE: quacker
+      MYSQL_USER: quackerUser
+      MYSQL_PASSWORD: quackerPassword
+    ports:
+      - 3306:3306
+
+  adminer:
+    image: adminer
+    restart: always
+    ports:
+      - 8080:8080

backend/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "description": "Back-end app for 4IT580 course",
+  "main": "build/main.js",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev": "backpack",
+    "start": "node ./build/main.js",
+    "prestart": "run-s build",
+    "build": "backpack build",
+    "postbuild": "nodetouch tmp/restart.txt",
+    "build:watch": "nodemon --watch ./src --exec 'npm run build'",
+    "prettier": "prettier --write \"src/**/*.js\" README.md"
+  },
+  "dependencies": {
+    "@graphql-tools/schema": "^9.0.2",
+    "apollo-server-core": "^3.3.0",
+    "apollo-server-express": "^3.3.0",
+    "argon2": "^0.29.1",
+    "cors": "^2.8.5",
+    "dotenv-flow": "^3.2.0",
+    "express": "^4.17.1",
+    "graphql": "^16.6.0",
+    "jsonwebtoken": "^8.5.1",
+    "lodash.merge": "^4.6.2",
+    "mariadb": "^3.0.1"
+  },
+  "devDependencies": {
+    "backpack-core": "^0.8.4",
+    "nodemon": "^2.0.12",
+    "prettier": "^2.7.1",
+    "touch": "^3.1.0"
+  }
+}

backend/src/__mocks__/mockResolver.js

@@ -0,0 +1,127 @@
+import { createToken } from '../libs/token';
+import { users, quacks } from './mocks';
+
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+const MOCK_DATA_DELAY = 300;
+const QUACKS_LIMIT = 20;
+const QUACK_TEXT_LIMIT = 250;
+
+function getAuthUser(dbUser) {
+  return {
+    id: dbUser.id,
+    name: dbUser.name,
+    userName: dbUser.userName,
+    profileImageUrl: dbUser.profileImageUrl,
+  };
+}
+
+export default {
+  Query: {
+    async users() {
+      await sleep(MOCK_DATA_DELAY);
+
+      return users;
+    },
+    async user(_, { userName }) {
+      await sleep(MOCK_DATA_DELAY);
+
+      return users.find((user) => user.userName === userName);
+    },
+    async quacks() {
+      await sleep(MOCK_DATA_DELAY);
+
+      return quacks.slice(0, QUACKS_LIMIT);
+    },
+  },
+  Mutation: {
+    async signin() {
+      await sleep(MOCK_DATA_DELAY);
+      const user = getAuthUser(users[0]);
+      const token = createToken(user);
+
+      return {
+        user,
+        token,
+      };
+    },
+    async signup(_, { email, password, name, userName }) {
+      await sleep(MOCK_DATA_DELAY);
+
+      if (
+        users.find(
+          (user) =>
+            user.userName.toLowerCase() === userName.trim().toLowerCase(),
+        )
+      ) {
+        throw Error('This username is already taken');
+      }
+
+      if (
+        users.find(
+          (user) => user.email.toLowerCase() === email.trim().toLowerCase(),
+        )
+      ) {
+        throw Error('User with this email is already registered');
+      }
+
+      const id = users.length + 1;
+      const profileImageUrl = `https://eu.ui-avatars.com/api/?size=128&name=${encodeURIComponent(
+        name.trim(),
+      )}`;
+
+      const dbUser = {
+        id,
+        name: name.trim(),
+        userName: userName.trim(),
+        email: email.trim(),
+        profileImageUrl,
+      };
+
+      const user = getAuthUser(dbUser);
+      const token = createToken(user);
+
+      users.push(dbUser);
+
+      return { user, token };
+    },
+    async addQuack(_, { userId, text }) {
+      await sleep(MOCK_DATA_DELAY);
+
+      if (!(text || '').trim()) {
+        throw Error('No text provided');
+      }
+
+      if (text.trim().length > QUACK_TEXT_LIMIT) {
+        throw Error('Text is too long');
+      }
+
+      const user = users.find((user) => user.id === userId);
+      if (!user) {
+        throw Error('User not found');
+      }
+
+      const quack = {
+        id: quacks.length + 1,
+        createdAt: new Date().toISOString(),
+        userId,
+        text,
+      };
+
+      quacks.splice(0, 0, quack);
+
+      return quack;
+    },
+  },
+  User: {
+    quacks({ id }) {
+      return quacks
+        .filter((quack) => quack.userId === id)
+        .slice(0, QUACKS_LIMIT);
+    },
+  },
+  Quack: {
+    user({ userId }) {
+      return users.find((user) => user.id === userId);
+    },
+  },
+};