Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
233 changes: 165 additions & 68 deletions README.md

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { BrowserRouter, Routes, Route } from 'react-router';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AppShell } from './components/AppShell/AppShell';
import { BookDetailPage } from './pages/BookDetailPage/BookDetailPage';
import { BrowsePage } from './pages/BrowsePage/BrowsePage';
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/BookGrid/BookGrid.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,4 @@
.withShelfPlank {
overflow-x: clip;
padding-inline: var(--space-2); /* room so focus rings and shadows aren't clipped */
}
}
12 changes: 0 additions & 12 deletions client/src/data/searchBooks.ts

This file was deleted.

3 changes: 1 addition & 2 deletions client/src/pages/BrowsePage/BrowsePage.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,8 @@
}

@media (min-width: 40rem) {

/*tablets and bigger devices*/
.page {
padding: var(--space-8) var(--space-6);
}
}
}
2 changes: 1 addition & 1 deletion client/src/pages/BrowsePage/BrowsePage.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useState } from 'react';
import { useSearchParams } from 'react-router';
import { useSearchParams } from 'react-router-dom';
import { useQuery } from '@apollo/client/react';
import type { Book } from '../../types/book';
import { BookGrid } from '../../components/BookGrid/BookGrid';
Expand Down
115 changes: 68 additions & 47 deletions docs/decisions-and-contracts.md

Large diffs are not rendered by default.

87 changes: 46 additions & 41 deletions docs/project-checklist.md
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
# Project checklist: things to keep in mind

Drafted 2026-09-29 from the Project 2 description, the lectures and the Project 1 peer review. This document was created in the planning phase and might not get updated regularly.
Made from the Project 2 description and the lectures. The checklist itself is the plan. Notes in *italics* show where we are.

Roles: **A** Data, **B** API, **C** Browse + Shelf, **D** Design + Detail. See `roles.md`.
Roles: **A** Data, **B** API, **C** Browse + Shelf, **D** Design + Detail. See `roles-and-rules.md`.

---

## 1. What the project requires

### Functionality
- [ ] Search on single words, case-insensitive, and no unnecessary requests (debounce or a search button)
- [ ] Result list that copes with large result sets (Load more, decided)
- [ ] More details about each book
- [ ] Sort and filter over the **whole** result set, not only what is loaded in the browser
- [ ] User-generated data, saved **on the database server** and shown in the app (our shelf, ratings and notes)
- [x] Search on single words, case-insensitive, and no unnecessary requests (debounce or a search button)
- [x] Result list that copes with large result sets (Load more, decided)
- [x] More details about each book
- [ ] Sort and filter over the **whole** result set, not only what is loaded in the browser — *server done, client UI missing*
- [ ] User-generated data, saved **on the database server** and shown in the app (our shelf, ratings and notes) — *server done, client not connected*
- [ ] Universal design / accessibility
- [ ] Sustainable web development, through design choices
- [ ] Good design and sensible choices that fit the data
- [ ] Database and backend hosted on **our group's VM**
- [x] Database and backend hosted on **our group's VM**
- [ ] Back link and prev/next on the detail page

### Technology
- [ ] React + TypeScript, set up with Vite
- [x] React + TypeScript, set up with Vite
- [ ] **State management** in use (for example Apollo local state, Redux, MobX). We must be able to point to where and why.
- [ ] Our own GraphQL backend in Node/TypeScript
- [ ] Database installed **directly on the VM**, not in Docker
- [x] Our own GraphQL backend in Node/TypeScript
- [x] Database installed **directly on the VM**, not in Docker
- [ ] Reuse of good third-party libraries is encouraged

### Testing and quality
- [ ] Linting **and** Prettier (ESLint comes with Vite, Prettier must be added). Both in client and server.
- [x] Linting **and** Prettier (ESLint comes with Vite, Prettier must be added). Both in client and server.
- [ ] Component tests with **Vitest**
- [ ] Some **automated end-to-end test** (a longer sequence of interactions)
- [ ] Tests of the **API**
Expand All @@ -42,11 +42,11 @@ Roles: **A** Data, **B** API, **C** Browse + Shelf, **D** Design + Detail. See `
- [ ] Take part in the peer review after each delivery (individual)

### VM and deployment
- [ ] App served through Apache at `http://it2810-xx.idi.ntnu.no/project2`
- [ ] Backend preferably on port **3001**
- [x] App served through Apache at `http://it2810-xx.idi.ntnu.no/project2`
- [x] Backend preferably on port **3001**
- [ ] Everything needed to start the backend is available to the teaching staff (documented in Git, or in a file readable with sudo on the VM). No real secrets in Git.

**Storage note:** Project 2 does not list `localStorage` or `sessionStorage` as requirements (Project 1 did). We use `localStorage` for the anonymous ID. `sessionStorage` is optional (for example an unsaved note draft).
**Storage note:** Project 2 does not list `localStorage` or `sessionStorage` as requirements. We plan to use `localStorage` for the anonymous ID (not built yet). `sessionStorage` is optional (for example an unsaved note draft).

---

Expand All @@ -65,27 +65,31 @@ Every delivery is used for peer review, so the earlier ones are for learning. Ai

## 3. Tasks that still need an owner

| Task | Suggested owner | Needed by |
|---|---|---|
| Move the app into `client/`, add `server/`, check `.gitignore` | D | 1 |
| Choose database engine | A + B | 2 |
| Install the database on the VM (no Docker) | A | 2 |
| Backend running on the VM on port 3001, restart after reboot | B | 2 |
| Vite `base` path and router base for `/project2`, and Apache setting so page reloads on sub-pages work | B + C | 2 |
| `.env.example` and a startup guide staff can follow | B | 2 |
| ESLint and Prettier config for client and server, and a rule to run them before every pull request | D | 2 |
| Choose state management and use it for something real | C | 3 |
| Accessibility check (keyboard only, screen reader, contrast, an automated tool such as Lighthouse or axe) | D, then everyone fixes their own | 3 |
| List of sustainability choices made (paging, lazy-loaded images, few fonts, small images, debounce, caching) and a README section on them | Everyone adds their own, D collects | 3 |
| Component tests with Vitest for the shared components and pages | Each owner tests their own components | 4 |
| API tests | B | 4 |
| End-to-end test (for example search, open a book, add to shelf, add a note, see it on the shelf) and choosing a tool | C + D | 4 |
| README (setup, choices and why, testing, AI use, sustainability, accessibility) | Each writes their own section, one person merges | 2 to 4 |
| Time log, and the contribution summary for the submission system | Each keeps their own, one person compiles | Every delivery |
| Peer reviews | Each person, individually | After each delivery |
| Task | Suggested owner | Needed by | Status (16.10.26) |
|---|---|---|---|
| Move the app into `client/`, add `server/`, check `.gitignore` | D | 1 | Done |
| Choose database engine | A + B | 2 | Done (MongoDB) |
| Install the database on the VM (no Docker) | A | 2 | Done |
| Backend running on the VM on port 3001, restart after reboot | B | 2 | Running, reboot untested |
| Vite `base` path and router base for `/project2`, and Apache setting so page reloads on sub-pages work | B + C | 2 | Base paths done, sub-page reload untested |
| `.env.example` and a startup guide staff can follow | B | 2 | To check |
| ESLint and Prettier config for client and server, and a rule to run them before every pull request | D | 2 | Config done |
| Choose state management and use it for something real | C | 3 | To decide |
| Accessibility check (keyboard only, screen reader, contrast, an automated tool such as Lighthouse or axe) | D, then everyone fixes their own | 3 | Planned |
| List of sustainability choices made (paging, lazy-loaded images, few fonts, small images, search on submit, caching) and a README section on them | Everyone adds their own, D collects | 3 | Planned |
| Component tests with Vitest for the shared components and pages | Each owner tests their own components | 4 | Not started |
| API tests | B | 4 | Unknown |
| End-to-end test (for example search, open a book, add to shelf, add a note, see it on the shelf) and choosing a tool | C + D | 4 | Not started |
| README (setup, choices and why, testing, AI use, sustainability, accessibility) | Each writes their own section, one person merges | 2 to 4 | In progress |
| Time log, and the contribution summary for the submission system | Each keeps their own, one person compiles | Every delivery | Ongoing |
| Peer reviews | Each person, individually | After each delivery | Ongoing |

---

## 4. Quality practices we are keeping to

These apply from the start, so they do not have to be fixed at the end.

## 4. Lessons from the Project 1 peer review

- **README must be accurate about tests.** Linting and building are not automated tests. Do not list them as such.
Expand All @@ -102,14 +106,15 @@ Every delivery is used for peer review, so the earlier ones are for learning. Ai

---

## 5. Later, if there is time and energy
## 5. Later, if there is time
- Dark mode (same tokens with a second set of values)
- Genre counts in the filters
- Load more may be refined into infinite scroll only if it stays accessible
- Extra pages, such as an author page
- Clickable genre chips on the detail page
- Narrow the list queries to only the fields the cards need


## Changelog

## 6. Open questions
- Database engine
- CSS approach (CSS Modules or plain files), fonts, UI library
- Which end-to-end tool
- Who compiles the README and the contribution summary
- v1 (29.09.2026): drafted from the Project 2 description and the lectures.
- v2 (16.10.2026): Delivery 2 update. Ticked what is done, added a status column for the tasks. This document update was made with the help of Claude (AI) (code analyse, compare to docs) to ensure that the document reflects actual changes to the app, and the current state.
Loading