Initial commit

.editorconfig

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

.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+generated
+.next

.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error"
+  }
+}

.gitignore

@@ -0,0 +1,12 @@
+node_modules
+.next
+generated
+
+*.env*
+!.env.example
+
+*.tsbuildinfo
+*.log
+
+.DS_Store
+Thumbs.db

.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+generated
+.next

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true,
+    "**/node_modules": true,
+    "**/.next": true
+  },
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

README.md

@@ -0,0 +1,36 @@
+This repo contains a very simple non-interactive Trello board that automatically updates while the web app is open. It is already functional, so you can focus only on the parts that you need to change.
+
+## Goals of the task
+
+1. Build a UI with 3 columns. Each column should have its own separate scroll.  
+   Use CSS Grid if possible.
+2. Render the name of each task instead of its ID. (See [query.Jobs.graphql](./src/modules/queries/query.Jobs.graphql))  
+   Bonus: Truncate the name using CSS.
+
+### Restrictions
+
+- Do not use any additional UI or CSS libraries.
+- Do not use any additional state management libraries.
+- Try to adhere to the existing project structure if possible.
+
+### What will we be paying attention to?
+
+1. Coding style and consistency.  
+   This project contains config for Prettier and ESLint. Be mindful of that.
+2. CSS knowledge.
+3. HTML semantics.
+
+> Feel free to modify any of the existing code. 💁‍♀️
+
+## Running this project
+
+1. Install [pnpm](https://pnpm.io/) if you do not already have it.
+2. Clone the repo.
+3. Install all dependencies with:
+   ```bash
+   pnpm install
+   ```
+4. Run the project with:
+   ```bash
+   pnpm dev
+   ```

codegen.yml

@@ -0,0 +1,11 @@
+overwrite: true
+generates:
+  src/generated/graphql.tsx:
+    schema: "https://frontend.hiring.iodevnet.com/graphql"
+    documents: "src/modules/queries/**/*.graphql"
+    plugins:
+      - "typescript"
+      - "typescript-operations"
+      - "typescript-react-apollo"
+    config:
+      nonOptionalTypename: true

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "interview-task",
+  "version": "0.0.0-development",
+  "license": "UNLICENSED",
+  "private": true,
+  "scripts": {
+    "dev": "pnpm generate && next dev",
+    "build": "pnpm generate && next build",
+    "start": "next start",
+    "generate": "graphql-codegen --config codegen.yml",
+    "lint": "eslint .",
+    "format": "prettier --write '**/*.{js,jsx,ts,tsx,css,json,md,mdx,html,yml,graphql}'"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.6.6",
+    "graphql": ">=15 <16",
+    "luxon": "^2.4.0",
+    "next": "^12.1.6",
+    "pino": "^8.0.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  },
+  "devDependencies": {
+    "@graphql-codegen/cli": "^2.6.2",
+    "@graphql-codegen/introspection": "^2.1.1",
+    "@graphql-codegen/typescript": "^2.4.11",
+    "@graphql-codegen/typescript-operations": "^2.4.0",
+    "@graphql-codegen/typescript-react-apollo": "^3.2.14",
+    "@types/luxon": "^2.3.2",
+    "@types/node": "^17.0.40",
+    "@types/react": "^18.0.12",
+    "eslint": "^8.19.0",
+    "eslint-config-next": "^12.2.2",
+    "graphql-tag": "^2.12.6",
+    "prettier": "^2.6.2",
+    "typescript": "^4.7.3"
+  }
+}