Adds a react frontend to twichets

.dockerignore

@@ -0,0 +1,9 @@
+# Ignore certain directories
+.git/
+node_modules/
+
+# Ignore certain files
+Dockerfile*
+docker-compose*
+compose*
+README*

.github/workflows/lint-test.yaml → .github/workflows/lint.yaml

@@ -1,4 +1,4 @@
-name: Lint and Test
+name: Lint
 
 on:
   # Manual Invocation
@@ -7,12 +7,9 @@ on:
   # Invocation from workflow
   workflow_call:
 
-env:
-  CI: true
-
 jobs:
-  lint:
-    name: Lint
+  lint-be:
+    name: Lint Backend
     runs-on: ubuntu-latest
     timeout-minutes: 10
     defaults:
@@ -31,8 +28,8 @@ jobs:
       - name: Run lint
         uses: golangci/golangci-lint-action@v8
 
-  test:
-    name: Test
+  lint-fe:
+    name: Lint Frontend
     runs-on: ubuntu-latest
     timeout-minutes: 10
     defaults:
@@ -43,20 +40,22 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@v5
 
-      - name: Setup go
-        uses: actions/setup-go@v6
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
         with:
-          go-version-file: go.mod
+          package_json_file: frontend/package.json
 
-      - name: Setup task
-        uses: arduino/setup-task@v2
+      - name: Setup node
+        uses: actions/setup-node@v6
         with:
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Download dependencies
-        run: go mod download
-
-      - name: Run test
-        run: task test
-        env:
-          TWICKETS_API_KEY: ${{ secrets.TWICKETS_API_KEY }}
+          node-version-file: frontend/package.json
+          cache: pnpm
+          cache-dependency-path: frontend/pnpm-lock.yaml
+
+      - name: Install dependencies
+        working-directory: frontend
+        run: pnpm install
+
+      - name: Run lint
+        working-directory: frontend
+        run: pnpm run lint

.github/workflows/main.yaml

@@ -6,15 +6,20 @@ on:
       - main
 
 jobs:
-  lint-test:
-    name: Lint and Test
-    uses: ./.github/workflows/lint-test.yaml
+  lint:
+    name: Lint
+    uses: ./.github/workflows/lint.yaml
+    secrets: inherit
+
+  test:
+    name: Test
+    uses: ./.github/workflows/test.yaml
     secrets: inherit
 
   build-push:
     name: Build and Push
     uses: ./.github/workflows/build-push.yaml
-    needs: [lint-test]
+    needs: [lint, test]
     secrets: inherit
     with:
       ref: ${{ github.sha }}

.github/workflows/pull-request.yaml

@@ -6,7 +6,12 @@ on:
       - main
 
 jobs:
-  lint-test:
-    name: Lint and Test
-    uses: ./.github/workflows/lint-test.yaml
+  lint:
+    name: Lint
+    uses: ./.github/workflows/lint.yaml
+    secrets: inherit
+
+  test:
+    name: Test
+    uses: ./.github/workflows/test.yaml
     secrets: inherit

.github/workflows/test.yaml

@@ -0,0 +1,35 @@
+name: Test
+
+on:
+  # Manual Invocation
+  workflow_dispatch:
+
+  # Invocation from workflow
+  workflow_call:
+
+jobs:
+  test-backend:
+    name: Test Backend
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    defaults:
+      run:
+        shell: bash
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v5
+
+      - name: Setup go
+        uses: actions/setup-go@v6
+        with:
+          go-version-file: go.mod
+
+      - name: Install dependencies
+        run: go mod download
+
+      - name: Run test
+        run: go test ./...
+        env:
+          TWICKETS_API_KEY: ${{ secrets.TWICKETS_API_KEY }}
+          CI: true

.gitignore

@@ -70,11 +70,6 @@ web_modules/
 # Yarn Integrity file
 .yarn-integrity
 
-# dotenv environment variable files
-.env
-.env.*
-!.env.example
-
 # parcel-bundler cache (https://parceljs.org/)
 .cache
 .parcel-cache

.vscode/launch.json

@@ -5,7 +5,7 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Twitchets",
+      "name": "Backend",
       "type": "go",
       "request": "launch",
       "mode": "auto",

.vscode/settings.json

@@ -16,6 +16,9 @@
   "go.toolsManagement.autoUpdate": true,
   "go.buildTags": "",
 
+  // ---- Javascript Settings ----
+  "biome.configurationPath": "frontend/biome.json",
+
   // Code Spell Checker
   "cSpell.words": ["twickets", "unmarshaller"]
 }

Dockerfile

@@ -1,23 +1,43 @@
-# Builder Image
-FROM golang:1.24 AS builder
+# Frontend builder Image
+FROM node:25-slim AS frontend-builder
 
-WORKDIR /twitchets
+WORKDIR /app
 
+# Setup pnpm
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+# Install dependencies
+COPY ./frontend/package.json .
+COPY ./frontend/pnpm-lock.yaml .
+RUN pnpm install --prod --frozen-lockfile
+
+# Build
+COPY ./frontend .
+RUN pnpm run build
+
+# Backend builder Image
+FROM golang:1.24 AS backend-builder
+
+WORKDIR /app
+
+# Install dependencies
 COPY go.mod go.sum ./
 RUN go mod download
 
+# Build
 COPY . .
+COPY --from=frontend-builder /app/dist ./frontend/dist
 RUN go build -v -o ./bin/ .
 
 # Distribution Image
 FROM alpine:latest
 
 RUN apk add --no-cache libc6-compat
 
-COPY --from=builder /twitchets/bin/twitchets /usr/bin/twitchets
-
-WORKDIR /twitchets
+COPY --from=backend-builder /app/bin/twitchets /usr/bin/twitchets
 
-EXPOSE 5656
+EXPOSE 9000
 
 ENTRYPOINT ["/usr/bin/twitchets"]

README.md

@@ -22,6 +22,10 @@ Powered by [twigots](https://github.com/ahobsonsayers/twigots), a Go package to
 - No need to have the Twickets app or an account
 - Choose from various notification services (Telegram, Ntfy, Gotify currently supported)
 
+### And a fancy configuration UI!
+
+![frontend](assets/frontend.mp4)
+
 ## Getting an API Key
 
 To use this tool, you will need a Twickets API key. Although Twickets doesn't provide a free API, you can easily obtain a key by following these steps:

Taskfile.yaml

@@ -3,19 +3,48 @@ version: "3"
 
 tasks:
   format:
+    - task: format:be
+    - task: format:fe
+
+  format:be:
     cmds:
       - go tool gofumpt -l -w .
 
-  lint:
+  format:fe:
+    dir: frontend
+    cmds:
+      - pnpm run format
+
+  lint:be:
     cmds:
       - go tool golangci-lint run --fix ./...
 
+  lint:
+    - task: lint:be
+    - task: lint:fe
+
+  lint:fe:
+    dir: frontend
+    cmds:
+      - pnpm run lint
+
   generate:
+    - task: build:be
+    - task: build:fe
+
+  generate:be:
     aliases:
-      - gen
+      - gen:be
     cmds:
       - go generate ./...
 
+  generate:fe:
+    dir: frontend
+    aliases:
+      - gen:fe
+    cmds:
+      - pnpm run generate
+
   test:
     cmds:
       - go test ./...
@@ -26,17 +55,31 @@ tasks:
       - task: test
 
   build:
+    - task: build:fe
+    - task: build:be
+
+  build:be:
     cmds:
       - go build -v -o ./bin/ .
 
+  build:fe:
+    dir: frontend
+    cmds:
+      - run build
+
   build:docker:
     cmds:
       - docker build . -t arranhs/twitchets
 
-  run:
+  run:be:
     cmds:
       - go run .
 
+  run:fe:
+    dir: frontend
+    cmds:
+      - pnpm run dev
+
   run:docker:
     deps: [build:docker]
     cmds:

config.example.yaml

@@ -32,11 +32,11 @@ global:
   regions:
     - GBLO # London only
 
-  # Event name similarity matching (0.0 - 1.0)
+  # Required event name similarity (0.0 - 1.0)
   # Default: 0.9 (allows for minor naming differences)
   eventSimilarity: 0.9
 
-  # Minimum number of tickets required in listing
+  # Required Number of tickets
   # Default: Any number of tickets
   numTickets: 2 # Exactly two tickets
 

frontend/.env.development

@@ -0,0 +1,2 @@
+# API Base URL is set in development so it take priority over window.location.origin
+VITE_API_BASE_URL=http://localhost:9000/api

frontend/.env.production

@@ -0,0 +1,2 @@
+# API Base URL is not set in production so window.location.origin is used
+VITE_API_BASE_URL=

frontend/.prettierignore

@@ -0,0 +1,5 @@
+# Ignore certain directories
+src/components/ui/
+
+# Ignore certain files
+src/types/openapi.d.ts

frontend/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "tailwindStylesheet": "./frontend/src/index.css",
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ]
+}

frontend/biome.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.1.3/schema.json",
+  "files": {
+    "includes": ["**", "!src/components/ui", "!dist"],
+    "ignoreUnknown": true
+  },
+  "formatter": {
+    "enabled": false
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": "off"
+      }
+    }
+  }
+}