init

.babelrc

@@ -0,0 +1,53 @@
+{
+  "presets": ["next/babel", "@zeit/next-typescript/babel"],
+  "plugins": [
+    "graphql-tag",
+    "lodash",
+    [
+      "styled-components",
+      { "ssr": true, "displayName": true, "preprocess": false }
+    ],
+
+    ["module-resolver", {
+      "root": ["./"],
+      "alias": {
+        "router": "./src/router",
+        "components": "./src/components",
+        "containers": "./src/containers",
+        "constants": "./src/constants",
+        "data": "./src/data",
+        "appRedux": "./src/redux",
+        "store": "./src/store",
+        "util": "./src/util",
+        "views": "./src/views",
+      }
+    }]
+  ],
+  "env": {
+    "production": {
+      "plugins": [
+        "graphql-tag",
+        "lodash",
+        [
+          "styled-components",
+          { "ssr": true, "displayName": false, "preprocess": false }
+        ],
+
+        ["module-resolver", {
+          "root": ["./"],
+          "alias": {
+            "router": "./src/router",
+            "components": "./src/components",
+            "containers": "./src/containers",
+            "constants": "./src/constants",
+            "data": "./src/data",
+            "appRedux": "./src/redux",
+            "store": "./src/store",
+            "util": "./src/util",
+            "views": "./src/views",
+          }
+        }]
+      ]
+    }
+  }
+}

.dockerignore

@@ -0,0 +1,2 @@
+.git
+node_modules

.env.dist

@@ -0,0 +1,2 @@
+SERVER_URI=http://localhost:3010
+GRAPHQL_PATH=/gql/v1

.eslintignore

@@ -0,0 +1,10 @@
+.next/
+build/
+node_modules/
+
+*.css
+*.ico
+*.jpg
+*.png
+*.txt
+*.xml

.eslintrc.js

@@ -0,0 +1,52 @@
+module.exports = {
+  extends: [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
+    "plugin:react/recommended",
+    "prettier",
+    "prettier/@typescript-eslint",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "./tsconfig.json",
+  },
+  plugins: [
+    "@typescript-eslint",
+    "graphql",
+    "import",
+    "json",
+    "react",
+    "react-hooks",
+    "simple-import-sort",
+  ],
+  rules: {
+    "@typescript-eslint/array-type": ["error", "array-simple"],
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/explicit-function-return-type": "off",
+
+    // waiting for full import support in TypeScript
+    "import/default": "off",
+    "import/order": "off",
+    "import/no-duplicates": "error",
+    "import/no-named-as-default": "off",
+    "import/no-named-as-default-member": "off",
+    "import/no-unresolved": "off",
+    "import/named": "off",
+    "import/namespace": "off",
+
+    "no-unused-expressions": ["error", { allowTaggedTemplates: true }],
+    "no-unused-vars": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error",
+    "simple-import-sort/sort": "error",
+    "sort-imports": "off",
+  },
+  settings: {
+    react: {
+      version: "detect", // React version. "detect" automatically picks the version you have installed.
+    },
+  },
+};

.gitattributes

@@ -0,0 +1,3 @@
+* linguist-vendored
+*.ts linguist-vendored=false
+*.tsx linguist-vendored=false

.gitignore

@@ -0,0 +1,9 @@
+.DS_Store
+.env
+yarn-error.log
+
+/.next
+/build
+/lang/.messages
+/node_modules
+/locales/**/*.missing.json

.gitlab-ci.yml

@@ -0,0 +1,33 @@
+stages:
+  - build-app
+  - build-image
+
+build app:
+  stage: build-app
+  image: node:10
+  script:
+    - yarn
+    - yarn lint
+    - yarn build
+  cache:
+    paths:
+      - node_modules
+  artifacts:
+    paths:
+      - .next
+      - build
+    expire_in: 1 day
+
+build image:
+  stage: build-image
+  image: docker:latest
+  services:
+    - docker:dind
+  script:
+    - docker info
+    - echo $CI_REGISTRY_PASSWORD | docker login --username $CI_REGISTRY_USER $CI_REGISTRY --password-stdin
+    - docker pull $CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG || docker pull $CI_REGISTRY_IMAGE:master || true
+    - docker build -t $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA --cache-from=$CI_REGISTRY_IMAGE:$CI_BUILD_REF_NAME --cache-from=$CI_REGISTRY_IMAGE:master --shm-size 512M .
+    - docker push $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA
+    - docker tag $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA $CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG
+    - docker push $CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG

Dockerfile

@@ -0,0 +1,19 @@
+FROM node:10.15.1-alpine
+
+RUN mkdir -p /usr/src/app
+WORKDIR /usr/src/app
+
+COPY package.json yarn.lock /usr/src/app/
+RUN YARN_CACHE_FOLDER=/dev/shm/yarn_cache yarn --production
+ENV NODE_ICU_DATA=/usr/src/app/node_modules/full-icu
+
+COPY .next /usr/src/app/.next
+COPY locales /usr/src/app/locales
+COPY build /usr/src/app/build
+COPY src/static /usr/src/app/build/static
+
+EXPOSE 3000
+
+USER node
+
+CMD [ "yarn", "start" ]

LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2019-present, Vuga (https://vuga.io)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,68 @@
+#Alien Typer Shit: Frontend
+
+#####User-facing web app. this code produces a simple react js web app with SSR in TS.
+
+
+
+#### Key ingredients
+
+- **[TypeScript](https://www.typescriptlang.org/)** to ensure the highest code quality
+- **[Next.js](https://github.com/zeit/next.js)** to bundle source files and render web pages both on the server and the client (SSR)
+
+- **[React Context](https://reactjs.org/docs/context.html)** for static react state
+- ~~**[Redux](https://github.com/reduxjs/redux)** for static react state~~
+- **[Apollo GraphQL client](https://github.com/apollographql/apollo-client)** to get data from the backend
+- **[Styled components](https://www.styled-components.com/)** to produce well-structured and collision-free CSS
+- **[Lodash](https://lodash.com/)** to leverage common utility functions
+- **[ESLint](https://eslint.org/)** and **[Prettier](https://prettier.io/)** to ensure that source files are error-free and easy to read
+- **[Docker](https://www.docker.com/)** to make the production version of the microservice straightforward to deploy
+- **[GitLab CI](https://about.gitlab.com/features/gitlab-ci-cd/)** to automatically check code quality and generate a new docker image on every push
+
+## Running a local copy
+
+1.  Ensure you have the latest git, Node.js and Yarn installed on your machine
+
+    ```bash
+    git --version
+    ## ≥ 2.14
+
+    node --version
+    ## ≥ 10.0
+
+    yarn --version
+    ## ≥ 1.10
+    ```
+
+1.  Clone the repo 
+
+    ```bash
+    cd PATH/TO/MISC/PROJECTS
+    git clone https://github.com/vugga/ats-fe.git
+    cd ats-fe
+    ```
+
+1.  Install npm dependencies using Yarn
+
+    ```bash
+    yarn
+    ```
+
+1.  Copy `.env.dist` to `.env`. You can have a look at [`src/config.ts`](src/config.ts) for hints on what is expected.
+
+
+1.  Start the server in development mode
+
+    ```bash
+    yarn dev
+    ```
+
+    Modifying any of the files will refresh the app, thanks to Next.js hot module reloading.
+    To stop running the server, press `ctrl+c`.
+
+1.  If you want to test a production copy of the microservice, build and run it like this:
+
+    ```bash
+    yarn build
+    yarn start
+    ```
+

nodemon.json

@@ -0,0 +1,13 @@
+{
+  "watch": [
+    ".babelrc",
+    ".env",
+    "locales/**/*.json",
+    "src/next.config.js",
+    "src/*.ts"
+  ],
+  "ignore": ["locales/**/*.missing.json"],
+  "execMap": {
+    "ts": "ts-node --compiler-options '{\"module\":\"commonjs\"}'"
+  }
+}

package.json

@@ -0,0 +1,97 @@
+{
+  "name": "ats-fe",
+  "version": "0.0.1",
+  "description": "Alien Typer Shit: Frontend",
+  "private": true,
+  "scripts": {
+    "analyze": "BUNDLE_ANALYZE=both yarn build",
+    "build": "next build src && rimraf build && tsc --project tsconfig.server.json && ln -s ../src/static build/static",
+    "export": "next export src",
+    "dev": "nodemon src/server.ts",
+    "fix": "yarn fix:eslint && yarn fix:prettier",
+    "fix:eslint": "eslint --fix \"src/**\"",
+    "fix:prettier": "prettier --write --ignore-path .gitignore \"**/*.{css,js,json,md,ts,tsx,yml}\"",
+    "lint": "yarn lint:eslint && yarn lint:prettier && yarn lint:tsc",
+    "lint:eslint": "eslint \"src/**\"",
+    "lint:prettier": "prettier --check --ignore-path .gitignore \"**/*.{css,js,json,md,ts,tsx,yml}\"",
+    "lint:tsc": "tsc --project .",
+    "start": "NODE_ENV=production node build/server.js"
+  },
+  "engines": {
+    "node": ">=10.0.0",
+    "yarn": "^1.10.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "**/*.{css,js,json,md,ts,tsx,yml}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "dependencies": {
+    "apollo-boost": "^0.1.28",
+    "apollo-client-preset": "^1.0.8",
+    "apollo-link-persisted-queries": "^0.2.2",
+    "compression": "^1.7.3",
+    "envalid": "^4.2.2",
+    "express": "^4.16.4",
+    "formik": "^1.5.1",
+    "full-icu": "^1.2.1",
+    "glob": "^7.1.3",
+    "graphql": "^14.1.1",
+    "graphql-tag": "^2.10.1",
+    "isomorphic-fetch": "^2.2.1",
+    "isomorphic-unfetch": "^3.0.0",
+    "js-cookie": "^2.2.0",
+    "lodash": "^4.17.11",
+    "next": "^8.0.3",
+    "next-cookies": "^1.1.2",
+    "next-routes": "^1.4.2",
+    "normalize.css": "^8.0.1",
+    "nprogress": "^0.2.0",
+    "polished": "^3.2.0",
+    "react": "^16.8.3",
+    "react-apollo": "^2.4.1",
+    "react-dom": "^16.8.3",
+    "styled-components": "^4.1.3",
+    "styled-system": "^4.0.8"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.121",
+    "@types/next": "^8.0.1",
+    "@types/nprogress": "^0.0.29",
+    "@types/react": "^16.8.4",
+    "@types/styled-components": "^4.1.10",
+    "@types/styled-system": "^4.0.0",
+    "@typescript-eslint/eslint-plugin": "^1.4.1",
+    "@zeit/next-bundle-analyzer": "^0.1.2",
+    "@zeit/next-typescript": "^1.1.1",
+    "babel-plugin-graphql-tag": "^2.0.0",
+    "babel-plugin-inline-import": "^3.0.0",
+    "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-module-resolver": "^3.2.0",
+    "babel-plugin-styled-components": "^1.10.0",
+    "eslint": "^5.14.1",
+    "eslint-config-prettier": "^4.0.0",
+    "eslint-plugin-graphql": "^3.0.3",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-json": "^1.4.0",
+    "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-react-hooks": "^1.2.0",
+    "eslint-plugin-simple-import-sort": "^3.0.0",
+    "husky": "^1.3.1",
+    "lint-staged": "^8.1.4",
+    "lodash-webpack-plugin": "^0.11.5",
+    "module-resolver": "^1.0.0",
+    "next-compose-plugins": "^2.1.1",
+    "nodemon": "^1.18.10",
+    "prettier": "^1.16.4",
+    "rimraf": "^2.6.3",
+    "ts-node": "^8.0.2",
+    "typescript": "^3.3.3333"
+  }
+}