diff --git a/documentation/decision_logs/decision_log_form_library.md b/documentation/decision_logs/decision_log_form_library.md new file mode 100644 index 0000000..2e38226 --- /dev/null +++ b/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 diff --git a/documentation/decision_logs/decision_log_js_framework.md b/documentation/decision_logs/decision_log_js_framework.md new file mode 100644 index 0000000..12ba678 --- /dev/null +++ b/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. diff --git a/documentation/functional_requirements_specification.md b/documentation/functional_requirements_specification.md new file mode 100644 index 0000000..1ecf255 --- /dev/null +++ b/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