syn

.github/workflows/webpack.yml

@@ -0,0 +1,28 @@
+name: NodeJS with Webpack
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x, 22.x]
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Build
+      run: |
+        npm install
+        npx webpack

.gitignore

@@ -44,4 +44,5 @@ next-env.d.ts
 # git repositories
 /git/
 
-dump.rdb
+dump.rdb
+.env

package.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build",
-    "start": "next start",
+    "dev": "npx next dev --turbopack",
+    "build": "npx next build",
+    "start": "npx next start",
     "lint": "next lint"
   },
   "dependencies": {

src/app/api/user-apps/route.ts

@@ -0,0 +1,12 @@
+import { NextResponse } from "next/server";
+import { getUserApps } from "@/actions/user-apps";
+
+export async function GET() {
+  try {
+    const userApps = await getUserApps();
+    return NextResponse.json(userApps);
+  } catch (error) {
+    console.error("Error fetching user apps:", error);
+    return NextResponse.json({ error: "Failed to fetch user apps" }, { status: 500 });
+  }
+}

src/app/app/new/page.tsx

@@ -2,6 +2,8 @@ import { createApp } from "@/actions/create-app";
 import { redirect } from "next/navigation";
 import { getUser } from "@/auth/stack-auth";
 
+export const dynamic = 'force-dynamic';
+
 // This page is never rendered. It is used to:
 // - Force user login without losing the user's initial message and template selection.
 // - Force a loading page to be rendered (loading.tsx) while the app is being created.

src/app/page.tsx

@@ -9,9 +9,13 @@ import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { ExampleButton } from "@/components/ExampleButton";
 import { UserButton } from "@stackframe/stack";
-import { UserApps } from "@/components/user-apps";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { PromptInputTextareaWithTypingAnimation } from "@/components/prompt-input";
+import dynamic from "next/dynamic";
+
+const UserApps = dynamic(() => import("@/components/user-apps").then(mod => ({ default: mod.UserApps })), {
+  ssr: false
+});
 
 const queryClient = new QueryClient();
 

src/components/user-apps.tsx

@@ -1,12 +1,22 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { getUserApps } from "@/actions/user-apps";
 import { AppCard } from "./app-card";
 
 export function UserApps() {
   const queryClient = useQueryClient();
   const { data } = useQuery({
     queryKey: ["userApps"],
-    queryFn: getUserApps,
+    queryFn: async () => {
+      const response = await fetch("/api/user-apps");
+      if (!response.ok) {
+        throw new Error("Failed to fetch user apps");
+      }
+      const apps = await response.json();
+      // Convert createdAt string to Date object
+      return apps.map((app: any) => ({
+        ...app,
+        createdAt: new Date(app.createdAt),
+      }));
+    },
     initialData: [],
   });