From 94e90b12836c5b2864f00902254b4ecee6408a13 Mon Sep 17 00:00:00 2001 From: Lars Johan Folde Date: Thu, 1 Oct 2026 13:21:22 +0200 Subject: [PATCH 1/2] chore: document the system architecture --- docs/architecture.md | 28 ++++++++++++++++++++++++++++ docs/images/architecture.svg | 2 ++ 2 files changed, 30 insertions(+) create mode 100644 docs/architecture.md create mode 100644 docs/images/architecture.svg diff --git a/docs/architecture.md b/docs/architecture.md new file mode 100644 index 0000000..1c5df30 --- /dev/null +++ b/docs/architecture.md @@ -0,0 +1,28 @@ +# Architecture + +## Overview + +In contrast to `IT2810-H26/T24-Project-1`, `IT2810-H26/T24-Project-2` has a +distinct frontend and backend. The backend is hosted on the group's virutal +machine, and will be responsible for the custom `GraphQL` backend, and we will use +`MySQL` as our database solution. `Apache2` will be used as the web server. + +Refer to this diagram for an overview of the basic system architecture. +Deviations from this plan may occur depending on the direction of the project. +![System Architecture](images/architecture.svg) + +## Client + +The client is responsible for the rendering of the UI Components. We will use +`React` to create reusable components for the frontend. Data will be stored on +the browser and is managed by `Apollo Client`. The user will be able to create +Pokemon Teams, which will be saved to their local browser storage so they are +persistent between sessions. These can later be published for other users to see +on the website by utilizing `GraphQL` to make a new database row. These other +teams can be liked to mutate the database row. + +## Backend + +The backend hosts the `GraphQL API endpoint`. Queries made towards it will be +resolved and it will query the `MySQL` database, which holds the Pokemon data +imported from Smogon. diff --git a/docs/images/architecture.svg b/docs/images/architecture.svg new file mode 100644 index 0000000..b934737 --- /dev/null +++ b/docs/images/architecture.svg @@ -0,0 +1,2 @@ +Client (browser)UI ComponentsSearch, team, details,filters, resultsPokemon TeamSaved to local storageSearch FiltersSaved to session storageGraphQL APIMySQL DatabaseSmogon datasetImport and normalizeit2810-t24.idi.ntnu.noResolversGraphQL query(http/https)Systemd(keep theservicerunning)GraphQL mutation(publish team, liketeam...)(Typescript)Apollo ClientManages storage From 244e797590664668c1c0776684f3754bd0905f23 Mon Sep 17 00:00:00 2001 From: Lars Johan Folde Date: Thu, 1 Oct 2026 13:23:26 +0200 Subject: [PATCH 2/2] style: add a line between the diagram and the previous paragraph --- docs/architecture.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/architecture.md b/docs/architecture.md index 1c5df30..755958f 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -9,6 +9,7 @@ machine, and will be responsible for the custom `GraphQL` backend, and we will u Refer to this diagram for an overview of the basic system architecture. Deviations from this plan may occur depending on the direction of the project. + ![System Architecture](images/architecture.svg) ## Client