Merge for first delivery of P2

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,24 +1,46 @@
-# T12-Project-2
+# T12 -Project-2 - Artex
 
 Repository for team IT2810-H26-T12 in IT2810-H26.
 
-## Working in this repository
+## Project idea
 
-`main` is protected — you cannot push to it directly. Work on a branch and
-open a pull request:
+Artex is a webpage that allows users to explore artworks from all around the world by searching, sorting and filtering through them. Users can create their own accounts to save artworks in their own lists.
 
-```bash
-git checkout -b my-feature
-git push -u origin my-feature
+The Idea was brought to light by one of the students in the group as soon as the project description was announced. We were a bit unsure that the art gallery would be accepted as there were no direct GraphQL APIs out there, but after asking the academic staff, we got reassurance, and started on the Figma.
+
+## API
+
+There were several APIs that offered similar functionality. Some provided access to larger art collections, while others had more modern structures and features. To help us compare the available options, we used an LLM to summarize the main differences between the APIs we were considering. Based on this comparison, the Art Institute of Chicago API appeared to be the most suitable option for our project. After conducting some additional research and reviewing the API ourselves, we decided to use the Art Institute of Chicago API for the project. Link to API documentation:
+
+```
+https://api.artic.edu/docs/#introduction
 ```
 
-Before a pull request can be merged:
+## Functionality
+
+The user will start on the landing page, where all content will be accessible without an account. Users can select a specific artwork to view more information about it, such as its backstory, the year it was created, its country of origin, and other relevant details. Users who are not logged in will not be able to add artworks to their gallery, and the add ("+") button will not be visible. After creating an account on the “Create Account” page and logging in through the “Log In” page, users will be able to add artworks to their personal gallery using the “+” button, which will then become visible. The user's gallery can be accessed from the “Profile” page, along with additional options for managing their account. This page has not yet been implemented in the Figma prototype but is planned for the final application.
+
+Users will also be able to filter artworks based on different criteria, such as artwork type, artist, place, and date. The displayed artworks can also be sorted by title, artist, or date.
+
+## Technology choices and reasoning
+
+The application will be developed using React, TypeScript and Vite, following the requirements of the project. For styling, we plan to use Tailwind CSS, as it makes it easier to create a consistent and responsive design while keeping the styling close to the components. We also plan to use Lucide for icons, since it provides a simple and consistent set of icons that fits well with the visual style of the application. The backend will be developed using GraphQL, while the choice of database will be decided later in the project.
+
+## Architecture
+
+The application is planned with a clear separation between the frontend, backend and database. Data from the Art Institute of Chicago API will be imported into our own database. The React frontend will communicate with our own GraphQL backend, which will handle requests such as searching, filtering, retrieving artwork details and managing user-generated data. The backend will then communicate with the database rather than having the frontend access the external API directly. Both the backend and database will later be hosted on the group’s virtual machine.
+
+## Sustainability
+
+We aim to consider sustainability by making choices that reduce unnecessary data usage and system load. This includes using caching where appropriate, limiting unnecessary API requests, and only fetching the data that is actually needed. To reduce the number of API calls, we plan to use pagination when loading artworks. We also plan to use a time-based approach for search functionality to avoid making an API request for every keystroke.
+
+## Prototype
+
+To visualize our ideas, we developed a Figma prototype, with snapshots shown below. The prototype demonstrates several of the features described earlier, along with some additional functionality. The design follows a clean and minimal visual style that keeps the artworks at the center of the experience. We also considered accessibility when selecting colors and designing the interface, aiming for sufficient contrast, clear navigation, and an intuitive experience for a wide range of users.
 
-1. **A member of IT2810-H26-T12 must approve it.** You cannot approve your own pull
-   request, and approvals from staff do not count — you review each other's
-   code.
-2. **Every review comment must be marked resolved.** Reply to each one, fix it
-   or explain why not, then click *Resolve conversation*.
-3. **Pushing new commits dismisses the approval**, so if you change something
-   after being approved, ask for another review. This is deliberate: what was
-   approved is what gets merged.
+<p>
+  <img src="/docs/images/create_account.png" width="400">
+  <img src="/docs/images/log_in.png" width="400">
+</p>
+<img src="/docs/images/artwork.png" >
+<img src="/docs/images/artex_main.png" >

frontend/README.md

@@ -0,0 +1,78 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
+
+Note: This will impact Vite dev & build performances.
+You can also try [the experimental native React Compiler support in plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md#rust-react-compiler) by using `compiler: true` in the plugin options instead of using the Babel plugin.
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+
+```
+
+You can also install [eslint-plugin-react-x](https://npmx.dev/package/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://npmx.dev/package/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+
+```

frontend/eslint.config.js

@@ -0,0 +1,22 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>