Merge for second delivery of P2

README.md

@@ -1,46 +1,134 @@
-# T12 -Project-2 - Artex
+# T12 - Project 2 - Artex
 
-Repository for team IT2810-H26-T12 in IT2810-H26.
+## Virtual machine
 
-## Project idea
+The webpage can be accessed through the group’s virtual machine at:
 
-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.
+- http://it2810-12.idi.ntnu.no/project2/
 
-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.
+The project uses a MongoDB database hosted on the group’s virtual machine. The GraphQL backend is configured to run on port `3001`.
 
-## API
+## Overview
 
-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:
+Artex is a searchable artwork catalogue developed as part of IT2810. The application allows users to explore artwork stored in our own database through a React frontend and a GraphQL backend.
 
+The application is based on artwork data from the Metropolitan Museum of Art collection. Artwork information is stored in a MongoDB database and accessed through our own GraphQL API.
+
+For the second delivery, the main focus has been establishing a working connection between the frontend, backend and database. The application currently retrieves artwork data from the database and presents the results in a responsive grid. Pagination is used to load a limited number of artworks at a time instead of loading the complete dataset into the client.
+
+The application will be developed further with search, filtering, sorting, artwork details and persistent user-generated data in later deliveries.
+
+## Get started
+
+Before running the project, make sure Node.js and npm are installed.
+
+The project is divided into separate `frontend` and `backend` directories.
+
+### Frontend
+
+Navigate to the frontend directory and install the dependencies:
+
+```bash
+cd frontend
+npm install
 ```
-https://api.artic.edu/docs/#introduction
+
+Start the development server with:
+
+```bash
+npm run dev
 ```
 
-## Functionality
+The webpage will then be available at the local URL provided in the terminal, normally:
+
+- http://localhost:5173/
+
+### Database connection
+
+The MongoDB database is hosted on the group’s virtual machine. When running the backend locally, an SSH tunnel is used to connect to the database.
+
+Open a terminal and run:
+
+```bash
+ssh -N -L 27018:127.0.0.1:27017 <username>@it2810-12.idi.ntnu.no
+```
+
+Replace `<username>` with your NTNU username and keep the terminal open while running the backend.
+
+### Backend
+
+Open a new terminal, navigate to the backend directory and install the dependencies:
+
+```bash
+cd backend
+npm install
+```
+
+Start the backend with the MongoDB connection through the SSH tunnel:
+
+```bash
+MONGODB_URI=mongodb://127.0.0.1:27018 npm run dev
+```
+
+When the connection is successful, the terminal should display:
+
+```text
+Connected to MongoDB
+Server running at http://127.0.0.1:3001/
+```
+
+The GraphQL API will then be available at:
+
+- http://localhost:3001/
+
+To run the application locally, the SSH tunnel, backend and frontend must run at the same time.
+
+## Developed by
+
+- Emma Fredriksen
+- Mina Ellingsen
+- Karen Skauge
+- Gurveer Singh
+
+## Technologies
+
+The project is developed using the following technologies and tools:
+
+- React
+- Vite
+- TypeScript
+- Tailwind CSS
+- React Router
+- Lucide React
+- Node.js
+- GraphQL
+- Apollo Server
+- MongoDB
+- ESLint
+- Prettier
+
+## Technical choices
+
+The application is divided into a frontend, backend and database. The frontend is built with React and TypeScript using Vite, while the backend is built with Node.js, TypeScript, GraphQL and Apollo Server. MongoDB is used to store the artwork data.
 
-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.
+The frontend is divided into smaller React components to separate responsibilities and make the code easier to understand, maintain and test. Components such as the hero section, artwork cards, artwork grid and pagination can be developed and reused independently.
 
-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.
+GraphQL is used for communication between the frontend and backend. This allows the client to request only the fields it needs and makes it possible to handle functionality such as pagination, search, filtering and sorting on the backend instead of loading the full dataset into the browser.
 
-## Technology choices and reasoning
+Artwork results are loaded using pagination. The frontend sends a `limit` and `offset` to the GraphQL backend, and the backend retrieves only the corresponding artworks from the database. This approach was chosen with scalability in mind, since the application should be able to handle a much larger dataset without transferring all artwork data to the client at once.
 
-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.
+Artwork images use lazy loading so images are loaded when needed instead of all at once. Missing or unavailable images are handled by displaying a placeholder. These choices reduce unnecessary data transfer and are also part of our approach to sustainable web development.
 
-## Architecture
+React Router is used for navigation between pages. Some navigation is temporary for the second delivery. For example, the profile icon currently leads to the login page and will be updated when the final profile and authentication flow is implemented.
 
-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.
+The design is based on our Figma prototype and is implemented responsively so that the layout adapts to different screen sizes. Accessibility is considered by using semantic HTML, appropriate alternative text and accessible labels for controls where needed. Accessibility and responsive behavior will be developed and tested further in later deliveries.
 
-## Sustainability
+## Use of AI
 
-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.
+During development, AI has mainly been used as a supporting tool for discussing implementation approaches, troubleshooting errors, reviewing code, explaining unfamiliar technologies and concepts, and improving formulations in the README.
 
-## Prototype
+We use AI as a coach rather than relying on generated solutions without understanding them. Suggestions are reviewed and adjusted before being included in the project, and we aim to understand and be able to explain the code we commit.
 
-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.
+AI has, among other things, been used to help troubleshoot the local development setup between the React frontend, GraphQL backend and MongoDB database, discuss responsive design and accessibility, review possible implementation choices, and help formulate parts of the project documentation.
 
-<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" >
+We use issues, pull requests and code reviews to maintain control over the development process and to make sure changes are understood and reviewed by the group. Our use of AI will continue to be documented and updated as the project develops.

backend/eslint.config.js

@@ -0,0 +1,4 @@
+import js from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+export default [js.configs.recommended, ...tseslint.configs.recommended];