Merge pull request #14 from devshred/feature/new-layout

implement new layout based on Adrianes prototype

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -22,3 +22,11 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.nvmrc

@@ -0,0 +1 @@
+v20

README.md

@@ -1,12 +1,58 @@
-# Frontend of GPS-Tools based on React and Vite
-This is the frontend of [GPS-Tools Backend](https://github.com/devshred/gps-tools-backend)
+<p align="center">
+    <a href="https://github.com/devshred/gps-tools-frontend/actions/workflows/release.yaml" alt="Release Pipeline">
+        <img src="https://github.com/devshred/gps-tools-frontend/actions/workflows/release.yaml/badge.svg" /></a>
+</p>
 
-# Production
-[GPS-Tools](https://gps-tools.pages.dev/)
+# Frontend of GPS-Tools based on React and Leaflet
+This is the frontend of [GPS-Tools Backend](https://github.com/devshred/gps-tools-backend). It provides some useful features for dealing with GPS files:
+* Merging files
+* Converting between formats (FIT, GPX, TCX, GeoJSON)
+* Visualizing GPS-files
+* Adding, changing and removing waypoints
+* Optimization of waypoints to improve performance on GPS-devices
 
-# How-to start locally
+## Production
+The prod website is hosted by [Cloudflare](https://www.cloudflare.com/) at: https://gps-tools.pages.dev/ 
+
+## How-to run
+### … with mocks for development and tests
+While running in develoment mode, all APIs (GPS-Tools-backend, tile-server, photon) are mocked with [Mock Service Worker](https://mswjs.io/).
 ```sh
 npm run dev
 ```
-
 Open http://localhost:5173/
+
+### … locally with all external APIs
+Start the GPT-Tool-backend
+```sh
+docker run -p 7001:7001 devshred/gps-tools-backend
+```
+
+Create the file `.env.local` and add the URL of the backend-API:
+```sh
+VITE_BACKEND_BASE_URL=http://localhost:7001/api/v1
+```
+Build and start the application
+```sh
+npm run build
+npm run preview
+```
+
+Open http://localhost:4173/
+
+## Release process
+This project is using [semantic versioning](https://semver.org/) and [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/). It's recommended to use [Commitizen](https://commitizen-tools.github.io/commitizen/) to commit changes.
+
+Codequality will be checked by [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/). To use these tools, automatically fix problems and execute the tests, run
+```sh
+npm run check:fix
+```
+_See [package.json](./package.json) for more options on using these tools._
+
+As soon as code has been pushed to the main branch, a [GitHub Actions workflow](.github/workflows/release.yaml) checks for fixes or new features and, if necessary, creates a new tag and a new release. Every new release [triggers the deployment](.github/workflows/deploy.yaml) to Cloudflare.
+
+## End-to-end tests
+The e2e tests are based on [Playwright](https://playwright.dev/) and [Axe](https://www.deque.com/axe/) to check for accessibility of content and functionality. You can run these tests by
+```sh
+npm run test:e2e
+```

e2e/about.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test'
+import AxeBuilder from '@axe-core/playwright'
+
+test.describe('About page', () => {
+  test('shows backend version', async ({ page }) => {
+    await page.goto('/about')
+
+    await expect(page).toHaveTitle(/GPS-Tools/)
+
+    const heading = page.locator('h1')
+    await expect(heading).toHaveText('GPS-Tools')
+
+    const backendVersion = page.locator('#backendVersion')
+    await expect(backendVersion).toHaveText('1.2.3') // as provided by msw
+  })
+
+  test('should not have accessibility issues', async ({ page }) => {
+    await page.goto('/about')
+
+    await page.locator('#root main').waitFor()
+
+    const axe = new AxeBuilder({ page })
+
+    const accessibilityScanResults = await axe.include('#root').analyze()
+
+    expect(accessibilityScanResults.violations).toEqual([])
+  })
+})

index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>GPS-Tools</title>
   </head>