Frontend Base

.github/workflows/ci.yml

@@ -81,12 +81,12 @@ jobs:
           labels: ${{ steps.meta.outputs.labels }}
 
   frontend:
-    name: "Frontend"
+    name: Frontend
     env:
       # For Docker Image
       IMAGE_NAME: chat-app-frontend
       IMAGE_TITLE: Chat App Frontend
-      IMAGE_DESCRIPTION: Next.js Frontend for the "Use Case App Example - Chat App"
+      IMAGE_DESCRIPTION: Frontend for the sovity Chat App
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -99,19 +99,29 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20.x"
-          cache: "yarn"
+          node-version: "22.x"
           cache-dependency-path: |
-            **/package-lock.json
             **/yarn.lock
 
+      - name: "Set up JDK 21"
+        uses: actions/setup-java@v3
+        with:
+          java-version: "21"
+          distribution: "temurin"
+
+      - name: "Gradle: Validate Gradle Wrapper"
+        uses: gradle/actions/wrapper-validation@v3
+
+      - name: Enable Corepack
+        run: corepack enable
+
       - name: Install Dependencies
         working-directory: frontend
-        run: npm ci
+        run: yarn -v && yarn install --immutable
 
-      - name: Build
+      - name: Build (Prod)
         working-directory: frontend
-        run: npm run build
+        run: yarn build-prod
 
       - name: "Docker: Log in to the Container registry"
         uses: docker/login-action@v2

.junie/guidelines.md

@@ -0,0 +1,51 @@
+# Project Guidelines for Junie
+
+## Project Overview
+This is a chat application that serves as a developer tutorial and demonstration for Eclipse Dataspace Connector (EDC) technology. The application enables secure communication between participants using EDC for data exchange and contract negotiation.
+
+## Project Structure
+- `/frontend`: Next.js-based web application
+  - Uses TypeScript, React, and modern web development tools
+  - Contains API clients, models, and a fake backend for development
+- `/backend`: JVM-based backend application
+  - Uses Gradle for build management
+  - Implements the server-side logic for the chat application
+  - Integrates with EDC for secure data exchange
+- `/docs`: Documentation including architecture diagrams and planning
+- `/.junie`: Guidelines for Junie AI assistant
+
+## Architecture
+The application follows a distributed architecture with multiple components:
+- UI components for user interaction
+- Backend services for business logic
+- EDC components for secure data exchange between participants
+
+The communication flow involves:
+1. Contract negotiation between participants
+2. Secure data transfer using EDC
+3. Real-time message updates
+
+## Build Instructions
+- Frontend:
+  - Navigate to `/frontend` directory
+  - Run `yarn install` to install dependencies
+  - Run `yarn dev` for development or `yarn build` for production build
+
+- Backend:
+  - Navigate to `/backend` directory
+  - Ensure a GitHub access token is configured as described in the main README
+  - Run `./gradlew build` to build the application
+
+## Code Style Guidelines
+- Follow existing code style patterns in the respective directories
+- Use TypeScript for frontend development
+- The frontend framework is Next.js 15, styling is Tailwind v4
+- Follow clean code principles and provide appropriate documentation
+- Ensure proper error handling and logging
+- Avoid too verbose and redundant comments. Comment code only when the code becomes very complicated and hard to understand.
+- Use common libraries whenever possible. Avoid re-inventing the wheel for simple tasks (e.g. UUID generation)
+
+## Important Notes
+- EDC integration is a core part of this application
+- Changes to the data exchange flow should be carefully tested
+- The application demonstrates secure, controlled data sharing between participants

frontend/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

frontend/.env.local-dev

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_USE_FAKE_BACKEND="true"
+NEXT_PUBLIC_BACKEND_URL="http://localhost:8080/api"

frontend/.eslintrc.cjs

@@ -0,0 +1,42 @@
+/** @type {import("eslint").Linter.Config} */
+const config = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: true,
+  },
+  plugins: ['@typescript-eslint'],
+  extends: [
+    'next/core-web-vitals',
+    'plugin:@typescript-eslint/recommended-type-checked',
+    'plugin:@typescript-eslint/stylistic-type-checked',
+  ],
+  rules: {
+    // These opinionated rules are enabled in stylistic-type-checked above.
+    // Feel free to reconfigure them to your own preference.
+    '@typescript-eslint/array-type': 'off',
+    '@typescript-eslint/consistent-type-definitions': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+
+    '@typescript-eslint/consistent-type-imports': [
+      'warn',
+      {
+        prefer: 'type-imports',
+        fixStyle: 'inline-type-imports',
+      },
+    ],
+    '@typescript-eslint/no-unused-vars': ['warn', {argsIgnorePattern: '^_'}],
+    '@typescript-eslint/require-await': 'off',
+    '@typescript-eslint/no-misused-promises': [
+      'error',
+      {
+        checksVoidReturn: {attributes: false},
+      },
+    ],
+    '@typescript-eslint/prefer-nullish-coalescing': 'off',
+    '@typescript-eslint/no-floating-promises': 'warn',
+    '@typescript-eslint/non-nullable-type-assertion-style': 'warn',
+    '@typescript-eslint/no-unsafe-assignment': 'warn',
+  },
+};
+
+module.exports = config;

frontend/.prettierignore

@@ -0,0 +1,6 @@
+.yarn/releases
+src/lib/api/client/**
+
+.eslintignore
+.env
+.env.*

frontend/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

frontend/Dockerfile

@@ -1,22 +1,16 @@
-FROM node:20-alpine
+FROM node:22-bookworm-slim
 WORKDIR /app
 
-# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
-RUN apk add --no-cache libc6-compat
+COPY .env.prod .env
+COPY public ./public
+COPY .next/standalone .
+COPY .next/static .next/static
 
-
-RUN addgroup -g 1001 -S nodejs
-RUN adduser -S nextjs -u 1001
-
-# COPY --chown=nextjs:nodejs public ./public
-COPY --chown=nextjs:nodejs .next/standalone .
-COPY --chown=nextjs:nodejs .next/static .next/static
-
-USER nextjs
+USER node
 
 EXPOSE 3000
 
 ENV PORT=3000
 ENV HOSTNAME=0.0.0.0
 
-CMD node server.js
+CMD ["node", "server.js"]

frontend/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

frontend/next.config.ts

@@ -1,8 +1,8 @@
-import type { NextConfig } from "next";
+import('./src/env.js');
 
-const nextConfig: NextConfig = {
-  /* config options here */
+/** @type {import("next").NextConfig} */
+const config = {
   output: 'standalone',
 };
 
-export default nextConfig;
+export default config;