diff --git a/README.md b/README.md index 7d50b92..a7ed400 100644 --- a/README.md +++ b/README.md @@ -1,67 +1,134 @@ -# T12 -Project-2 - Artex +# T12 - Project 2 - Artex -Repository for team IT2810-H26-T12 in IT2810-H26. +## Virtual machine -## Getting started +The webpage can be accessed through the group’s virtual machine at: + +- http://it2810-12.idi.ntnu.no/project2/ + +The project uses a MongoDB database hosted on the group’s virtual machine. The GraphQL backend is configured to run on port `3001`. + +## Overview + +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 ``` -Start the development server: +Start the development server with: -``` +```bash npm run dev ``` -### Backend +The webpage will then be available at the local URL provided in the terminal, normally: + +- http://localhost:5173/ -The backend is built with Node.js, TypeScript, GraphQL, and Apollo Server. +### Database connection -Navigate to the backend directory and install the dependencies: +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 @it2810-12.idi.ntnu.no ``` + +Replace `` 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 development server: +Start the backend with the MongoDB connection through the SSH tunnel: +```bash +MONGODB_URI=mongodb://127.0.0.1:27018 npm run dev ``` -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 be available at http://localhost:3001/. +The GraphQL API will then be available at: -To verify that the server is running, execute the following query in Apollo Sandbox: +- http://localhost:3001/ -``` -query { -hello -} -``` +To run the application locally, the SSH tunnel, backend and frontend must run at the same time. -#### Build and run +## Developed by -To check for TypeScript errors: +- Emma Fredriksen +- Mina Ellingsen +- Karen Skauge +- Gurveer Singh -``` -npm run typecheck -``` +## Technologies -To compile the backend: +The project is developed using the following technologies and tools: -``` -npm run build -``` +- React +- Vite +- TypeScript +- Tailwind CSS +- React Router +- Lucide React +- Node.js +- GraphQL +- Apollo Server +- MongoDB +- ESLint +- Prettier -To start the compiled backend: +## Technical choices -``` -npm start -``` +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 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. + +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. + +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. + +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. + +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 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. + +## Use of AI + +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. + +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. + +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. + +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. \ No newline at end of file