Initial project setup

Author: kachar

.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+.next
+.dockerignore
+Dockerfile

.editorconfig

@@ -0,0 +1,26 @@
+; This file is for unifying the coding style for different editors and IDEs.
+; More information at http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_size = 2
+indent_style = space
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.bat]
+end_of_line = crlf
+
+[*.twig]
+insert_final_newline = false
+
+[*.md]
+indent_size = 2
+max_line_length = 0
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

.env

@@ -0,0 +1 @@
+.env.example

.env.example

@@ -0,0 +1,16 @@
+## General ##
+#############
+
+COMPOSE_PROJECT_NAME=dp
+NODE_ENV=development # development, production
+TARGET_ENV=development # development, production
+
+## API ##
+#########
+
+API_URL=https://api.dp.localhost/
+
+## APP ##
+#########
+
+APP_PORT=3040

.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: 'tsconfig.json',
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
+  plugins: ['@typescript-eslint'],
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'prettier/@typescript-eslint',
+    'plugin:prettier/recommended',
+  ],
+  settings: { react: { version: 'detect' } },
+  env: {
+    node: true,
+    jest: true,
+  },
+  ignorePatterns: ['.eslintrc.js', 'next.config.js'],
+  rules: {
+    '@typescript-eslint/interface-name-prefix': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'react/react-in-jsx-scope': 'off',
+  },
+}

.github/workflows/build.yml

@@ -0,0 +1,16 @@
+name: Build
+
+on:
+  workflow_dispatch:
+  pull_request:
+    branches: [master]
+
+jobs:
+  build-packages:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Build frontend
+        run: yarn build

.github/workflows/docker-build.yml

@@ -0,0 +1,25 @@
+name: Build docker image
+
+on:
+  workflow_dispatch:
+  pull_request:
+    branches: [master]
+
+jobs:
+  build-packages:
+    runs-on: ubuntu-latest
+
+    env:
+      IMAGE_NAME: frontend
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Build frontend
+        run: |
+          docker build . \
+            --file ./Dockerfile \
+            --target production \
+            --build-arg NODE_ENV=production \
+            --tag $IMAGE_NAME \
+            --tag $IMAGE_NAME:ci-run

.github/workflows/lint.yml

@@ -0,0 +1,19 @@
+name: Lint
+
+on:
+  workflow_dispatch:
+  pull_request:
+    branches: [master]
+
+jobs:
+  build-packages:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Lint frontend
+        run: yarn lint
+
+      - name: Lint styles
+        run: yarn lint:styles

.gitignore

@@ -0,0 +1,34 @@
+# compiled output Next.js
+.next
+node_modules
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# OS
+.DS_Store
+
+# Tests
+coverage
+.nyc_output
+
+# IDEs and editors
+.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json

.prettierignore

@@ -0,0 +1,5 @@
+node_modules
+.next
+yarn.lock
+package-lock.json
+public

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "semi": false,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "jsxBracketSameLine": true,
+  "arrowParens": "always"
+}

.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-sass-guidelines"
+}

Dockerfile

@@ -0,0 +1,31 @@
+# Pull node image from docker hub
+FROM node:14 AS development
+
+# Set working directory
+WORKDIR /app
+
+ARG NODE_ENV=development
+
+# Add `/app/node_modules/.bin` to $PATH
+ENV PATH=/app/node_modules/.bin:$PATH \
+  NODE_ENV="$NODE_ENV"
+
+# Install and cache app dependencies
+COPY package.json yarn.lock /app/
+RUN cd /app/ && yarn install --production=false
+
+# Copy existing application directory contents
+COPY . /app
+
+EXPOSE 3040
+
+CMD [ "yarn", "dev" ]
+
+
+# Build target production #
+###########################
+FROM development AS production
+ARG NODE_ENV=production
+WORKDIR /app
+RUN yarn build
+CMD [ "yarn", "start" ]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Дарителска Платформа
+
+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,78 @@
+# Дарителска Платформа - Frontend
+
+## What's in the box
+
+- [Typescript](https://www.typescriptlang.org/)
+- [Next.js](https://nextjs.org/)
+- [MaterialUI](https://material-ui.com/)
+- [MobX](https://mobx.js.org/)
+- [SCSS](https://sass-lang.com/)
+- [SCSS Guidelines](https://github.com/bjankord/stylelint-config-sass-guidelines)
+- [ESlint](https://eslint.org/)
+- [Prettier](https://prettier.io/)
+- [Stylelint](https://stylelint.io/)
+- [Github Actions](https://docs.github.com/en/free-pro-team@latest/actions/reference)
+- [Docker Compose](https://docs.docker.com/compose/)
+
+## Initial setup
+
+```shell
+git clone [email protected]:daritelska-platforma/frontend.git
+cd frontend
+
+# Symlink dev environment
+ln -s .env.example .env
+```
+
+## Development
+
+```shell
+yarn dev
+```
+
+Visit <http://localhost:3040/>
+
+### Run via Docker Compose
+
+Install the binary via <https://docs.docker.com/compose/install/>
+
+#### Start the container in foreground
+
+```shell
+docker-compose up
+```
+
+#### Start the container in background
+
+```shell
+docker-compose up -d
+docker-compose logs -f
+```
+
+Stop the docker container with `docker-compose down`
+
+## Linting
+
+```shell
+yarn lint
+yarn lint:styles
+yarn format
+yarn type-check
+```
+
+## Production
+
+### Build frontend
+
+```shell
+yarn build
+```
+
+### Build Docker image
+
+```shell
+docker build . \
+    --file ./Dockerfile \
+    --target production \
+    --build-arg NODE_ENV=production
+```

docker-compose.yml

@@ -0,0 +1,29 @@
+version: '3.8'
+services:
+  frontend:
+    container_name: ${COMPOSE_PROJECT_NAME?}-frontend
+
+    build:
+      context: ./
+      dockerfile: ./Dockerfile
+      target: ${TARGET_ENV}
+      args:
+        NODE_ENV: ${NODE_ENV}
+
+    networks:
+      - net-frontend
+
+    ports:
+      - '${APP_PORT}:3040'
+
+    volumes:
+      # Local:Container mounting points
+      - ./src:/app/src
+      - ./public:/app/public
+
+    environment:
+      API_URL: ${API_URL}
+
+networks:
+  net-frontend:
+    driver: bridge

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

next.config.js

@@ -0,0 +1,10 @@
+const path = require('path')
+
+module.exports = {
+  sassOptions: {
+    includePaths: [path.join(__dirname, 'src/styles')],
+  },
+  publicRuntimeConfig: {
+    API_URL: process.env.API_URL,
+  },
+}