NextJs Frontend Web App

.github/workflows/production-web.yml

@@ -10,7 +10,7 @@ permissions:
 jobs:
   release-web:
     runs-on: ubuntu-latest
-    if: contains(github.event.release.tag_name, 'web')
+    if: contains(github.event.release.tag_name, 'web-legacy')
     steps:
       - uses: actions/checkout@v4
 
@@ -45,15 +45,15 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: pnpm install --filter=web
+        run: pnpm install --filter=web-legacy
 
       - name: Build and push
         uses: docker/build-push-action@v5
         with:
           push: true
-          tags: ghcr.io/${{ github.repository_owner }}/web:latest
+          tags: ghcr.io/${{ github.repository_owner }}/web-legacy:latest
           context: .
-          file: ./web.Dockerfile
+          file: ./web-legacy.Dockerfile
           labels: |
             org.opencontainers.image.title=BeatForge Web
             org.opencontainers.image.description=The frontend for BeatForge

.github/workflows/release.yml

@@ -16,10 +16,10 @@ jobs:
       - uses: google-github-actions/release-please-action@v3
         with:
           token: ${{ secrets.RELEASE_GITHUB_TOKEN }}
-          package-name: '@beat-forge/web'
+          package-name: '@beat-forge/web-legacy'
           monorepo-tags: true
           release-type: node
-          path: 'apps/web'
+          path: 'apps/web-legacy'
 
   release-gui:
     runs-on: ubuntu-latest

.github/workflows/staging-web.yml

@@ -3,13 +3,13 @@ on:
     branches:
       - main
     paths:
-      - 'apps/web/**'
+      - 'apps/web-legacy/**'
       - 'packages/**'
   pull_request:
     branches:
       - main
     paths:
-      - 'apps/web/**'
+      - 'apps/web-legacy/**'
       - 'packages/**'
 
 permissions:
@@ -55,14 +55,14 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: pnpm install --filter=web
+        run: pnpm install --filter=web-legacy
 
       - name: Upload to GitHub Container Registry
         uses: docker/build-push-action@v5
         with:
           push: ${{ github.event_name == 'push' }}
-          tags: ghcr.io/${{ github.repository_owner }}/web:nightly
-          file: web.Dockerfile
+          tags: ghcr.io/${{ github.repository_owner }}/web-legacy:nightly
+          file: web-legacy.Dockerfile
           context: .
           labels: |
             org.opencontainers.image.title=BeatForge Web

.gitignore

@@ -30,4 +30,5 @@ yarn-error.log*
 .env
 
 # rust
-target/
+target/
+/apps/web/src/__generated__/

README.md

@@ -28,11 +28,11 @@ cd clients
 ### Web Client
 
 ```bash
-# Install dependencies for the web client
-pnpm install --filter=web
+# Install dependencies for the web-legacy client
+pnpm install --filter=web-legacy
 
-# Start the web client in development mode
-pnpm run dev --filter=web
+# Start the web-legacy client in development mode
+pnpm run dev --filter=web-legacy
 ```
 
 ### GUI Client

apps/gui/tailwind.config.cjs

@@ -5,10 +5,10 @@ export default {
 	presets: [base],
 	content: [
 		'./stories/**/*.svelte',
-		'../../apps/web/src/routes/**/*.svelte', // for using 'apps/web'
-		'../../apps/web/src/lib/**/*.svelte', // for using 'apps/web'
-		'../../apps/gui/src/routes/**/*.svelte', // for using 'apps/web'
-		'../../apps/gui/src/lib/**/*.svelte', // for using 'apps/web'
+		'../../apps/web-legacy/src/routes/**/*.svelte', // for using 'apps/web-legacy'
+		'../../apps/web-legacy/src/lib/**/*.svelte', // for using 'apps/web-legacy'
+		'../../apps/gui/src/routes/**/*.svelte', // for using 'apps/web-legacy'
+		'../../apps/gui/src/lib/**/*.svelte', // for using 'apps/web-legacy'
 		'../../packages/ui/**/*.svelte' // for using 'packages/ui'
 	]
 };

apps/story/tailwind.config.js

@@ -5,7 +5,7 @@ export default {
   presets: [base],
   content: [
     './stories/**/*.svelte',
-    '../../apps/web/src/lib/**/*.svelte', // for using 'apps/web'
+    '../../apps/web-legacy/src/lib/**/*.svelte', // for using 'apps/web-legacy'
     '../../packages/ui/**/*.svelte', // for using 'packages/ui'
   ],
 };

apps/web-legacy/.env.example

@@ -0,0 +1,4 @@
+# apps/web-legacy
+BEATFORGE_API_URL=
+BEATFORGE_GITHUB_CALLBACK_URL=
+MEILI_PREFIX=

apps/web-legacy/.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vercel
+.output
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

apps/web-legacy/package.json

@@ -0,0 +1,43 @@
+{
+	"name": "web-legacy",
+	"version": "1.0.1",
+	"scripts": {
+		"dev": "vite dev --port 3000",
+		"build": "vite build",
+		"preview": "vite preview",
+		"run": "vite build && node build",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"devDependencies": {
+		"@fontsource/fira-mono": "^5.0.8",
+		"@neoconfetti/svelte": "^1.0.0",
+		"@sveltejs/adapter-auto": "^2.1.0",
+		"@sveltejs/adapter-node": "^1.3.1",
+		"@sveltejs/kit": "^1.22.6",
+		"@types/cookie": "^0.5.1",
+		"autoprefixer": "^10.4.15",
+		"install": "^0.13.0",
+		"postcss": "^8.4.28",
+		"postcss-load-config": "^4.0.1",
+		"prettier": "^3.0.2",
+		"prettier-plugin-svelte": "^3.0.3",
+		"svelte": "^4.2.0",
+		"svelte-check": "^3.5.0",
+		"svelte-local-storage-store": "^0.6.0",
+		"tailwindcss": "^3.3.3",
+		"tslib": "^2.6.1",
+		"typescript": "^5.1.6",
+		"vite": "^5.0.0"
+	},
+	"type": "module",
+	"dependencies": {
+		"jwt-decode": "^4.0.0",
+		"sugar": "^2.0.6",
+		"svelte-tiny-virtual-list": "^2.0.5",
+		"tailwind-preset-base": "workspace:^",
+		"ui": "workspace:^"
+	}
+}

apps/web/tailwind.config.cjs → apps/web-legacy/tailwind.config.cjs

@@ -5,10 +5,10 @@ export default {
 	presets: [base],
 	content: [
 		'./stories/**/*.svelte',
-		'../../apps/web/src/routes/**/*.svelte', // for using 'apps/web'
-		'../../apps/web/src/lib/**/*.svelte', // for using 'apps/web'
-		'../../apps/gui/src/routes/**/*.svelte', // for using 'apps/web'
-		'../../apps/gui/src/lib/**/*.svelte', // for using 'apps/web'
+		'../../apps/web-legacy/src/routes/**/*.svelte', // for using 'apps/web-legacy'
+		'../../apps/web-legacy/src/lib/**/*.svelte', // for using 'apps/web-legacy'
+		'../../apps/gui/src/routes/**/*.svelte', // for using 'apps/web-legacy'
+		'../../apps/gui/src/lib/**/*.svelte', // for using 'apps/web-legacy'
 		'../../packages/ui/**/*.svelte' // for using 'packages/ui'
 	]
 };

apps/web-legacy/tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

apps/web/.env.example

@@ -1,4 +1,3 @@
-# apps/web
 BEATFORGE_API_URL=
 BEATFORGE_GITHUB_CALLBACK_URL=
-MEILI_PREFIX=
+MEILI_PREFIX=

apps/web/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

apps/web/.gitignore

@@ -1,12 +1,37 @@
-.DS_Store
-node_modules
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
 /build
-/.svelte-kit
-/package
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
 .env
-.env.*
-!.env.example
+
+# vercel
 .vercel
-.output
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+/schema.graphql

apps/web/codegen.ts

@@ -0,0 +1,27 @@
+import { CodegenConfig } from "@graphql-codegen/cli"
+
+const config: CodegenConfig = {
+  schema: `${process.env.NEXT_PUBLIC_BEATFORGE_API_URL}/graphql`,
+  // this assumes that all your source files are in a top-level `src/` directory - you might need to adjust this to your file structure
+  documents: ["src/**/*.{ts,tsx}"],
+  generates: {
+    "./src/__generated__/": {
+      preset: "client",
+      plugins: [],
+      presetConfig: {
+        gqlTagName: "gql",
+      },
+      config: {
+        scalars: {
+          Uuid: "string",
+        },
+      },
+    },
+    "./schema.graphql": {
+      plugins: ["schema-ast"],
+    },
+  },
+  ignoreNoDocuments: true,
+}
+
+export default config

apps/web/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@beatforge/web/components",
+    "utils": "@beatforge/web/utils"
+  }
+}

apps/web/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig