Final merge

README.md

@@ -1,24 +1,86 @@
-# T23-Project-1
+# T23-Project-1 — Country Explorer
 
-Repository for team IT2810-H26-T23 in IT2810-H26.
+**[Open the web app on the group VM](http://it2810-23.idi.ntnu.no/project1/)**
+
+Country Explorer lets you browse European countries, filter by subregion, sort by
+name or population, and save favorites. Built with React, TypeScript and Vite by
+team IT2810-H26-T23.
+
+## Run locally
+
+1. Clone the repository and enter the application folder:
+
+   ```bash
+   git clone https://git.ntnu.no/IT2810-H26/T23-Project-1.git
+   cd T23-Project-1/country-explorer
+   ```
+
+2. Install the locked dependencies:
+
+   ```bash
+   npm ci
+   ```
+
+3. Start the development server:
+
+   ```bash
+   npm run dev
+   ```
+
+4. Open [the local app](http://localhost:5173/project1/). If Vite reports a
+   different port, use that port instead. Stop the server with `Ctrl+C`.
+
+## Test and build
+
+Run these commands from `country-explorer/`:
+
+```bash
+npm test              # Run automated tests
+npm run lint          # Check code with ESLint
+npm run format:check  # Check formatting
+npm run build         # Type-check and generate dist/
+npm run preview       # Preview the production build locally
+```
+
+The preview normally runs at `http://localhost:4173/project1/`.
+See the deployment document below for serving the build on the VM.
+
+## Documentation
+
+- [Component structure](docs/component-structure.md): components, props, state ownership and initial wireframes.
+- [API performance](docs/api-performance.md): observed network requests and TanStack Query caching.
+- [Testing](docs/testing.md): automated checks, PC/iPhone testing and coverage limitations.
+- [Deployment](docs/deployment.md): production build, VM setup and deployment verification.
+- [Usability evaluation](docs/usability-evaluation.md): the group's assessment and possible mobile improvements.
+- [AI usage](docs/ai-usage.md): tools used, their role and the group's review of suggestions.
+- [Git workflow](docs/git-workflow.md): branch and commit templates, pull requests and review rules.
+- [Sprint process](docs/sprint-process.md): weekly meetings, issue allocation and progress discussions.
+- [REST API details](country-explorer/src/api/README.md): data source, country fields and error handling.
 
 ## Working in this repository
 
-`main` is protected — you cannot push to it directly. Work on a branch and
-open a pull request:
+Development work is integrated through `dev`. Start each issue branch from an
+up-to-date `dev` branch, push the issue branch, and open a pull request into
+`dev`:
 
 ```bash
-git checkout -b my-feature
-git push -u origin my-feature
+git switch dev
+git pull --ff-only
+git switch -c "<issue-number>-<short-description>"
+git push -u origin "<issue-number>-<short-description>"
 ```
 
+When the complete project is ready for release, `dev` is merged into `main`.
+Both shared branches are protected, so changes reach them through reviewed
+merge requests rather than direct pushes.
+
 Before a pull request can be merged:
 
 1. **A member of IT2810-H26-T23 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*.
+   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.
+   approved is what gets merged.

country-explorer/.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?

country-explorer/.prettierignore

@@ -0,0 +1,17 @@
+# Dependencies
+node_modules
+
+# Build output
+dist
+dist-ssr
+
+# Logs
+*.log
+
+# Auto-generated, not meant to be formatted
+package-lock.json
+
+# Editor / OS
+.vscode
+.idea
+.DS_Store

country-explorer/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "endOfLine": "lf"
+}

country-explorer/README.md

@@ -0,0 +1,39 @@
+# Country Explorer application
+
+This directory contains the React, TypeScript, and Vite application. It fetches
+European country data from a REST API and lets users filter, sort, navigate, and
+save favorite countries.
+
+Project-level installation, testing, deployment, and Git workflow instructions
+are in the [main README](../README.md). Details about the data source and mapping
+are in the [API documentation](./src/api/README.md).
+
+## Project structure
+
+```text
+src/
+├── api/         # REST API client and API documentation
+├── components/  # React components, styles, and component tests
+├── hooks/       # Custom React and TanStack Query hooks
+├── lib/         # Shared library configuration
+├── test/        # Shared test setup and fixtures
+├── types/       # Shared TypeScript types and interfaces
+├── utils/       # Storage and sorting helpers
+├── assets/      # Images and other bundled assets
+├── index.css    # Global stylesheet
+└── main.tsx     # Application entry point
+```
+
+Naming conventions:
+
+- Components use PascalCase file names matching their default export and keep
+  their CSS and tests beside the component.
+- Hooks use camelCase names beginning with `use`.
+- API functions and utilities use descriptive camelCase names.
+- Shared domain types use descriptive camelCase file names.
+
+## Tooling
+
+The app uses React, TanStack Query, TypeScript, Vite, ESLint, Prettier, Vitest,
+and Testing Library. The React Compiler is not enabled. Vite's base path is
+`/project1/`, matching the deployment path on the group VM.

country-explorer/eslint.config.js

@@ -0,0 +1,26 @@
+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';
+import eslintConfigPrettier from 'eslint-config-prettier';
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+      // Must stay last: turns off ESLint stylistic rules that would
+      // otherwise conflict with Prettier's formatting.
+      eslintConfigPrettier,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+    },
+  },
+]);

country-explorer/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>Country Explorer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>