FRS-1 Initial Configuration and Documentaion (#1)

* Netx.js setup code, pre-commit, and linter.

* pre-commit and github workflows

* Added code attribution to github action linter.

* Updated main README.md

* Created PRD

* Decision logs and initial FRS

* Update Node version in Github Action

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/workflows/lint.yml

@@ -0,0 +1,34 @@
+# Copied from https://github.com/marketplace/actions/lint-action
+
+name: Lint
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  run-linters:
+    name: Run linters
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 18
+
+      - name: Install Node.js dependencies
+        run: npm ci
+
+      - name: Run linters
+        uses: wearerequired/lint-action@v2
+        with:
+          eslint: true
+          prettier: true

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.pre-commit-config.yaml

@@ -0,0 +1,9 @@
+repos:
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: "v3.1.0"
+    hooks:
+      - id: prettier
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: "v8.56.0"
+    hooks:
+      - id: eslint

README.md

@@ -1,2 +1,21 @@
-# catan-randomizer-js
-Next.js web application for generating random Settlers of Catan board layouts
+# Catan Randomiser JS
+
+This repo contains a Next.js app that randomly generates Settlers of Catan board layouts based on a different randomisation
+algorithms. The app is a modern version of the original Python Kivy repo which can be found
+[here](https://github.com/stuart-bradley/Catan-Randomiser).
+
+## Documentation
+
+Full documentation can be found in the [documentation](documentation) folder.
+
+## Dependencies
+
+- Next.js `14.1.0`
+- React `18.*`
+
+### Dev Dependencies
+
+- Typescript `v5.*`
+- Tailwind CSS `v3.3.*`
+- ESLint `8.56.0`
+- Prettier `3.2.5`

documentation/decision_logs/decision_log_form_library.md

@@ -0,0 +1,7 @@
+# Decision Log - Form Library
+
+This document outlines the decision process for determining which Form library to use for the project.
+
+## Comparison
+
+## Outcome

documentation/decision_logs/decision_log_js_framework.md

@@ -0,0 +1,29 @@
+# Decision Log - Javascript (JS) Framework
+
+This document outlines the decision process for determining which JS library to use for the project.
+The following projects are under consideration:
+
+- React
+- React + Next.js
+
+## Comparison
+
+| React                                                                                        | React + Next.js                                               |
+| -------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
+| [ + ] Does not require additional framework knowledge                                        | [ + ] Provides API functionality via Node.js                  |
+| [ - ] Does not include App Routing as default                                                | [ + ] Includes native App Routing                             |
+| [ - ] Requires a seperate backend or frontend implementation of the randomisation algorithms | [ + ] Allows for Hydration of static parts of the application |
+|                                                                                              | [ - ] Adds an additional layer of complexity                  |
+
+While the project being built is relatively simple, it is useful to leverage some advanced functionality provided by
+Next.js:
+
+- To align with the Separation of Concerns (SoC) design pattern, the randomisation algorithms should be computed server
+  side. This has the added benefit of being more extensible (e.g. saving boards in a DB), if future Product Requirements
+  change.
+- To allow for sharing of boards, there needs to be dynamically routed pages, which is automatically supported by
+  Next.js.
+
+## Outcome
+
+**Next.js** has been chosen as the JS framework.

documentation/functional_requirements_specification.md

@@ -0,0 +1,65 @@
+# Functional Requirements Specification (FRS)
+
+This document outlines the technical work required to meet the requirements set out by the
+[PRD](product_requirements_document.md).
+
+## Description
+
+The project can be broken down into the following units of work. Where possible, these will align with Pull Requests.
+
+### 1 Initial Setup and Documentation
+
+To begin the project, a `Next.js` project (see [Decision Log](decision_logs/decision_log_js_framework.md)) must be
+created using the `create-next-app` package. The following functionality should be included during setup:
+
+- Enable Typescript: The app should use the Typescript superset to reduce bugs introduced by dynamic typing.
+- Enable ESLint: Development should include ESLint so that the codebase adheres to common standards.
+- Enable Tailwind CSS: Tailwind should be used over custom CSS as there are not specific CSS requirements in the PRD
+  and this should save development time.
+
+In addition to the above, additional repo functionality should be setup:
+
+- Install Prettier for standardised code formatting.
+- Install pre-commit hooks and enable the ESLint and Prettier.
+- Setup a Github Action for linting on PRs with ESLint and Prettier.
+
+Finally, documentation should be created to fully document the design and development process. This should consist of:
+
+- [Readme](/README.md)
+- [License](/LICENSE)
+- [Product Requirements Document (PRD)](product_requirements_document.md)
+- Functional Requirements Specification (FRS)
+- [Decision Logs](decision_logs)
+
+### 2 React Component Library
+
+In the [PRD](product_requirements_document.md), the Wireframe describes 3 high level components:
+
+- The App.
+  - The Canvas.
+  - The Form.
+
+#### 2.1 App
+
+The App Component should contain both the Canvas and the Form and provide high-level CSS to generally style the
+application.
+
+#### 2.2 Form
+
+#### 2.3 Canvas
+
+### 3 Board Generation Algorithms
+
+### 4 API
+
+### 4.1 API Implementation
+
+### 4.2 Board Unique Identifier
+
+### 5 E2E Testing
+
+### 6 Containerisation
+
+#### 6.1 Docker
+
+#### 6.2 Kubernetes