insforge 0.3.3 → 1.3.0

package/frontend/src/features/auth/services/{oauth.service.ts → oauth-config.service.ts}

@@ -16,7 +16,7 @@ export class OAuthConfigService {
   async getConfigByProvider(
     provider: string
   ): Promise<OAuthConfigSchema & { clientSecret?: string }> {
-    return apiClient.request(`/auth/oauth/configs/${provider}`);
+    return apiClient.request(`/auth/oauth/${provider}/config`);
   }
 
   // Create new OAuth configuration
@@ -32,7 +32,7 @@ export class OAuthConfigService {
     provider: string,
     config: UpdateOAuthConfigRequest
   ): Promise<OAuthConfigSchema> {
-    return apiClient.request(`/auth/oauth/configs/${provider}`, {
+    return apiClient.request(`/auth/oauth/${provider}/config`, {
       method: 'PUT',
       body: JSON.stringify(config),
     });
@@ -40,10 +40,10 @@ export class OAuthConfigService {
 
   // Delete OAuth configuration
   async deleteConfig(provider: string): Promise<{ success: boolean; message: string }> {
-    return apiClient.request(`/auth/oauth/configs/${provider}`, {
+    return apiClient.request(`/auth/oauth/${provider}/config`, {
       method: 'DELETE',
     });
   }
 }
 
-export const oauthConfigService = new OAuthConfigService();
+export const oAuthConfigService = new OAuthConfigService();

package/frontend/src/features/auth/services/{auth.service.ts → user.service.ts}

@@ -1,52 +1,7 @@
 import { apiClient } from '@/lib/api/client';
 import { UserSchema } from '@insforge/shared-schemas';
 
-export class AuthService {
-  async loginWithPassword(email: string, password: string) {
-    const data = await apiClient.request('/auth/admin/sessions', {
-      method: 'POST',
-      body: JSON.stringify({ email, password }),
-    });
-
-    // Set token in apiClient
-    if (data.accessToken) {
-      apiClient.setToken(data.accessToken);
-    }
-
-    // Return unified format
-    return {
-      accessToken: data.accessToken,
-      user: data.user,
-    };
-  }
-
-  async loginWithAuthorizationCode(code: string) {
-    const data = await apiClient.request('/auth/admin/sessions/exchange', {
-      method: 'POST',
-      body: JSON.stringify({ code }),
-    });
-
-    // Set token in apiClient
-    if (data.accessToken) {
-      apiClient.setToken(data.accessToken);
-    }
-
-    // Return unified format
-    return {
-      accessToken: data.accessToken,
-      user: data.user,
-    };
-  }
-
-  async getCurrentUser() {
-    const response = await apiClient.request('/auth/sessions/current');
-    return response.user;
-  }
-
-  logout() {
-    apiClient.clearToken();
-  }
-
+export class UserService {
   /**
    * Get users list
    * @param queryParams - Query parameters for pagination
@@ -86,6 +41,11 @@ export class AuthService {
     return await apiClient.request(`/auth/users/${id}`);
   }
 
+  async getCurrentUser() {
+    const response = await apiClient.request('/auth/sessions/current');
+    return response.user;
+  }
+
   async register(email: string, password: string, name?: string) {
     const response = await apiClient.request('/auth/users', {
       method: 'POST',
@@ -101,12 +61,6 @@ export class AuthService {
       body: JSON.stringify({ userIds }),
     });
   }
-
-  async generateAnonToken(): Promise<{ accessToken: string; message: string }> {
-    return apiClient.request('/auth/tokens/anon', {
-      method: 'POST',
-    });
-  }
 }
 
-export const authService = new AuthService();
+export const userService = new UserService();

package/frontend/src/features/dashboard/components/ConnectionSuccessBanner.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import { X } from 'lucide-react';
+
+export function ConnectionSuccessBanner() {
+  const [isVisible, setIsVisible] = useState(true);
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div className="relative w-full bg-zinc-50 dark:bg-[#333333] border-l-3 border-neutral-600 dark:border-emerald-300 rounded-[8px] py-6 px-8">
+      <div className="flex flex-col items-start gap-3">
+        <p className="text-xl font-semibold text-zinc-950 dark:text-white">
+          Connected successfully!
+        </p>
+        <p className="text-sm text-neutral-600 dark:text-neutral-100">
+          InsForge is running in the background — now head to your coding agent and create real
+          products.
+        </p>
+      </div>
+      <button
+        onClick={handleClose}
+        className="flex-shrink-0 absolute right-6 top-0 bottom-0"
+        aria-label="Close banner"
+      >
+        <X className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
+      </button>
+    </div>
+  );
+}

package/frontend/src/features/dashboard/components/PromptCard.tsx

@@ -0,0 +1,21 @@
+import { ChevronRight, LayoutGrid } from 'lucide-react';
+
+interface PromptCardProps {
+  title: string;
+  onClick?: () => void;
+}
+
+export function PromptCard({ title, onClick }: PromptCardProps) {
+  return (
+    <button
+      onClick={onClick}
+      className="bg-white dark:bg-[#363636] border border-gray-200 dark:border-[#414141] rounded px-6 py-4 flex items-center gap-3 hover:bg-gray-50 hover:border-gray-300 dark:hover:bg-neutral-700 dark:hover:border-[#525252] transition-all group"
+    >
+      <LayoutGrid className="w-6 h-6 text-zinc-700 dark:text-emerald-400 shrink-0" />
+      <p className="flex-1 text-base text-gray-900 dark:text-white font-normal leading-6 text-left truncate">
+        {title}
+      </p>
+      <ChevronRight className="w-5 h-5 text-gray-400 dark:text-neutral-400 shrink-0 group-hover:translate-x-0.5 transition-transform" />
+    </button>
+  );
+}

package/frontend/src/features/dashboard/components/PromptDialog.tsx

@@ -0,0 +1,103 @@
+import { Button, CopyButton, Dialog, DialogContent } from '@/components';
+import { CheckCircle, Lock, Database, HardDrive, Code2, Box } from 'lucide-react';
+import type { PromptTemplate } from '../prompts';
+
+interface PromptDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  promptTemplate: PromptTemplate | null;
+}
+
+const featureIcons: Record<string, typeof Lock> = {
+  Authentication: Lock,
+  Database: Database,
+  Storage: HardDrive,
+  Functions: Code2,
+  'AI Integration': Box,
+};
+
+export function PromptDialog({ open, onOpenChange, promptTemplate }: PromptDialogProps) {
+  if (!promptTemplate) {
+    return null;
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[90vh] p-0 bg-white dark:bg-neutral-800 border border-gray-200 dark:border-neutral-700 overflow-y-auto">
+        {/* Content area with border bottom */}
+        <div className="flex flex-col gap-10 p-6 border-b border-gray-200 dark:border-neutral-700">
+          {/* Header and Prompt Section */}
+          <div className="flex flex-col gap-6">
+            {/* Title */}
+            <div className="flex flex-col gap-3">
+              <h2 className="text-2xl font-semibold text-gray-900 dark:text-white tracking-[-0.144px] leading-8">
+                {promptTemplate.title}
+              </h2>
+            </div>
+
+            {/* Prompt Box */}
+            <div className="flex flex-col gap-3">
+              <p className="text-sm text-gray-500 dark:text-neutral-400 leading-6">
+                {promptTemplate.description}
+              </p>
+              <div className="bg-gray-50 dark:bg-neutral-900 rounded p-3 h-60 overflow-y-auto relative">
+                {/* Badge only */}
+                <div className="flex items-center justify-between mb-2">
+                  <div className="bg-gray-200 dark:bg-neutral-700 rounded px-2 py-0 inline-flex items-center justify-center">
+                    <span className="text-xs text-gray-900 dark:text-neutral-50 leading-5">
+                      Prompt
+                    </span>
+                  </div>
+                </div>
+                {/* Prompt Text */}
+                <p className="text-sm text-gray-900 dark:text-white leading-6 whitespace-pre-wrap">
+                  {promptTemplate.prompt}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Features Section */}
+          <div className="flex flex-col gap-3">
+            <p className="text-sm text-gray-500 dark:text-neutral-400 leading-6">
+              Features included:
+            </p>
+            <div className="flex flex-col gap-1">
+              {promptTemplate.features.map((feature, index) => {
+                const Icon = featureIcons[feature] || Box;
+                return (
+                  <div key={index} className="flex items-center gap-3 h-9 px-2 py-0">
+                    <CheckCircle className="w-5 h-5 text-emerald-500 shrink-0" />
+                    <Icon className="w-5 h-5 text-gray-500 dark:text-neutral-400 shrink-0" />
+                    <p className="text-sm text-gray-900 dark:text-white font-medium leading-6">
+                      {feature}
+                    </p>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-2.5 p-3">
+          <Button
+            onClick={() => onOpenChange(false)}
+            variant="secondary"
+            className="h-8 px-3 text-sm font-medium bg-gray-200 text-gray-900 hover:bg-gray-300 dark:bg-neutral-700 dark:text-white dark:hover:bg-neutral-600"
+          >
+            Cancel
+          </Button>
+          <CopyButton
+            text={promptTemplate.prompt}
+            showText={true}
+            variant="primary"
+            className="h-8 px-3 text-sm font-medium"
+            copyText="Copy Prompt"
+            copiedText="Copied!"
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/frontend/src/features/dashboard/components/StatsCard.tsx

@@ -0,0 +1,50 @@
+import { Card, CardContent, Skeleton } from '@/components';
+import { LucideIcon } from 'lucide-react';
+
+interface StatsCardProps {
+  icon: LucideIcon;
+  title: string;
+  value: string | number;
+  unit: string;
+  description: string;
+  isLoading?: boolean;
+}
+
+export function StatsCard({
+  icon: Icon,
+  title,
+  value,
+  unit,
+  description,
+  isLoading,
+}: StatsCardProps) {
+  return (
+    <Card className="flex-1 bg-white dark:bg-[#333333] rounded-lg border border-gray-200 dark:border-neutral-700 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)] h-full">
+      <CardContent className="px-8 py-6 h-full flex flex-col gap-6">
+        <div className="flex items-center gap-2 h-7">
+          <Icon className="w-5 h-5 text-gray-700 dark:text-neutral-400" />
+          <span className="text-base font-normal text-gray-900 dark:text-white">{title}</span>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          {isLoading ? (
+            <Skeleton className="h-8 w-24 bg-gray-200 dark:bg-neutral-700" />
+          ) : (
+            <p className="text-2xl font-normal text-gray-900 dark:text-white tracking-[-0.144px] leading-8">
+              {value}{' '}
+              <span className="text-sm font-normal text-gray-500 dark:text-neutral-400 leading-6">
+                {unit}
+              </span>
+            </p>
+          )}
+
+          {isLoading ? (
+            <Skeleton className="h-6 w-32 bg-gray-200 dark:bg-neutral-700" />
+          ) : (
+            <p className="text-base text-gray-500 dark:text-neutral-400 leading-6">{description}</p>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/frontend/src/features/dashboard/components/index.ts

@@ -0,0 +1,4 @@
+export { ConnectionSuccessBanner } from './ConnectionSuccessBanner';
+export { StatsCard } from './StatsCard';
+export { PromptCard } from './PromptCard';
+export { PromptDialog } from './PromptDialog';

package/frontend/src/features/dashboard/pages/DashboardPage.tsx

@@ -0,0 +1,212 @@
+import { useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useMetadata } from '@/lib/hooks/useMetadata';
+import { useUsers } from '@/features/auth';
+import { Users, Database, HardDrive, Lock, ChevronRight } from 'lucide-react';
+import { ConnectionSuccessBanner, StatsCard, PromptCard, PromptDialog } from '../components';
+import { useMcpUsage } from '@/features/logs/hooks/useMcpUsage';
+import { LogsDataGrid, type LogsColumnDef } from '@/features/logs/components/LogsDataGrid';
+import { cn, formatTime } from '@/lib/utils/utils';
+import { Button } from '@/components';
+import { quickStartPrompts, type PromptTemplate } from '../prompts';
+
+export default function DashboardPage() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [selectedPrompt, setSelectedPrompt] = useState<PromptTemplate | null>(null);
+  const [promptDialogOpen, setPromptDialogOpen] = useState(false);
+  const { metadata, auth, tables, storage, isLoading } = useMetadata();
+  const { totalUsers } = useUsers();
+  const { records } = useMcpUsage();
+
+  const authCount = auth?.oauths.length ?? 0;
+  const tableCount = tables?.length ?? 0;
+  const showBanner = location.state?.showSuccessBanner === true;
+
+  const mcpColumns: LogsColumnDef[] = [
+    {
+      key: 'tool_name',
+      name: 'MCP Call',
+      width: '12fr',
+      renderCell: ({ row }) => (
+        <p className="text-sm text-gray-900 dark:text-white font-normal leading-6">
+          {String(row.tool_name ?? '')}
+        </p>
+      ),
+    },
+    {
+      key: 'created_at',
+      name: 'Time',
+      width: 'minmax(200px, 1fr)',
+      renderCell: ({ row }) => (
+        <p className="text-sm text-gray-900 dark:text-white font-normal leading-6">
+          {formatTime(String(row.created_at ?? ''))}
+        </p>
+      ),
+    },
+  ];
+
+  const handleViewMoreClick = () => {
+    void navigate('/dashboard/logs/MCP');
+  };
+
+  return (
+    <main className="h-full bg-white dark:bg-neutral-800 overflow-y-auto px-6">
+      <div className="flex flex-col gap-16 w-full max-w-[1080px] mx-auto pt-6 pb-8">
+        <div className="flex flex-col gap-6">
+          {/* Connection Success Banner - Only shows once on first connection */}
+          {showBanner && <ConnectionSuccessBanner />}
+          <h1 className="text-xl font-semibold text-gray-900 dark:text-white tracking-[-0.1px]">
+            Dashboard
+          </h1>
+
+          {/* Stats Section */}
+          <section className="flex flex-col gap-6 w-full">
+            <div className="flex gap-6 w-full h-[176px]">
+              <StatsCard
+                icon={Users}
+                title="AUTH"
+                value={(totalUsers || 0).toLocaleString()}
+                unit={totalUsers === 1 ? 'user' : 'users'}
+                description={`${authCount} OAuth ${authCount === 1 ? 'provider' : 'providers'} enabled`}
+                isLoading={isLoading}
+              />
+
+              <StatsCard
+                icon={Database}
+                title="Database"
+                value={(metadata?.database?.totalSizeInGB || 0).toFixed(2)}
+                unit="GB"
+                description={`${tableCount} ${tableCount === 1 ? 'Table' : 'Tables'}`}
+                isLoading={isLoading}
+              />
+
+              <StatsCard
+                icon={HardDrive}
+                title="Storage"
+                value={(storage?.totalSizeInGB || 0).toFixed(2)}
+                unit="GB"
+                description={`${storage?.buckets?.length || 0} ${storage?.buckets?.length === 1 ? 'Bucket' : 'Buckets'}`}
+                isLoading={isLoading}
+              />
+            </div>
+          </section>
+        </div>
+
+        {/* Quick Start Prompt Section */}
+        <section className="flex flex-col gap-6 w-full">
+          <div className="flex flex-col gap-1 w-full">
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-white tracking-[-0.1px]">
+              Quick Start Prompt
+            </h2>
+            <p className="text-sm text-gray-500 dark:text-neutral-400 leading-6">
+              Paste the prompts below into your agent to quickly start building real apps.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-3 gap-6 w-full">
+            {quickStartPrompts.map((prompt, index) => (
+              <PromptCard
+                key={index}
+                title={prompt.title}
+                onClick={() => {
+                  setSelectedPrompt(prompt);
+                  setPromptDialogOpen(true);
+                }}
+              />
+            ))}
+          </div>
+
+          <PromptDialog
+            open={promptDialogOpen}
+            onOpenChange={setPromptDialogOpen}
+            promptTemplate={selectedPrompt}
+          />
+        </section>
+
+        {/* Templates & Components Section */}
+        <section className="flex flex-col gap-6 w-full">
+          <div className="flex flex-col gap-1 w-full">
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-white tracking-[-0.1px]">
+              Explore Our Platform
+            </h2>
+            <p className="text-sm text-gray-500 dark:text-neutral-400 leading-6">
+              InsForge gives you every backend feature you need. Use the whole platform or just the
+              features you want.
+            </p>
+          </div>
+
+          <div className="flex gap-6 w-full">
+            {/* Sign-in Component Card */}
+            <button
+              onClick={() => void navigate('/dashboard/authentication/auth-methods')}
+              className="flex-1 bg-white dark:bg-[#363636] border border-gray-200 dark:border-[#414141] rounded-lg p-4 flex items-center gap-3 hover:bg-gray-50 hover:border-gray-300 dark:hover:bg-neutral-700 dark:hover:border-[#525252] hover:shadow-sm transition-all group"
+            >
+              <div className="flex-1 flex items-center gap-4">
+                <div className="bg-gray-100 dark:bg-neutral-800 rounded p-3.5 flex items-center justify-center shrink-0">
+                  <Lock className="w-6 h-6 text-gray-600 dark:text-neutral-400" />
+                </div>
+                <div className="flex flex-col gap-1 items-start text-left">
+                  <p className="text-base text-gray-900 dark:text-white font-normal leading-6">
+                    Authentication
+                  </p>
+                  <p className="text-sm text-gray-500 dark:text-neutral-400 leading-6">
+                    User Authentication and management
+                  </p>
+                </div>
+              </div>
+              <ChevronRight className="w-5 h-5 text-gray-400 dark:text-neutral-400 shrink-0 group-hover:translate-x-0.5 transition-transform" />
+            </button>
+
+            {/* Database Templates Card */}
+            <button
+              onClick={() => void navigate('/dashboard/tables')}
+              className="flex-1 bg-white dark:bg-[#363636] border border-gray-200 dark:border-[#414141] rounded-lg p-4 flex items-center gap-3 hover:bg-gray-50 hover:border-gray-300 dark:hover:bg-neutral-700 dark:hover:border-[#525252] hover:shadow-sm transition-all group"
+            >
+              <div className="flex-1 flex items-center gap-4">
+                <div className="bg-gray-100 dark:bg-neutral-800 rounded p-3.5 flex items-center justify-center shrink-0">
+                  <Database className="w-6 h-6 text-gray-600 dark:text-neutral-400" />
+                </div>
+                <div className="flex flex-col gap-1 items-start text-left">
+                  <p className="text-base text-gray-900 dark:text-white font-normal leading-6">
+                    Database
+                  </p>
+                  <p className="text-sm text-gray-500 dark:text-neutral-400 leading-6">
+                    Manage your tables and data
+                  </p>
+                </div>
+              </div>
+              <ChevronRight className="w-5 h-5 text-gray-400 dark:text-neutral-400 shrink-0 group-hover:translate-x-0.5 transition-transform" />
+            </button>
+          </div>
+        </section>
+
+        {/* MCP Call Records Section */}
+        <section className="flex flex-col gap-6 w-full">
+          <div className="flex items-center justify-between w-full">
+            <p className="text-xl font-semibold text-gray-900 dark:text-white">MCP Call Records</p>
+            <Button
+              onClick={handleViewMoreClick}
+              className="h-8 px-4 font-medium dark:bg-emerald-300 dark:text-black"
+            >
+              View More
+            </Button>
+          </div>
+
+          <div className={cn('w-full overflow-hidden', !records.length && 'h-60')}>
+            <LogsDataGrid
+              columnDefs={mcpColumns}
+              data={records.slice(0, 5)}
+              emptyState={
+                <div className="h-20 text-sm text-zinc-500 dark:text-zinc-400">
+                  No MCP call records found
+                </div>
+              }
+              noPadding
+            />
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}

package/frontend/src/features/dashboard/prompts/ai-chatbot.ts

@@ -0,0 +1,13 @@
+export const aiChatbotPrompt = {
+  title: 'AI Chatbot',
+  description: 'Paste below prompts to your agent as a quick start for building real apps',
+  prompt: `Build an AI chatbot app using InsForge as the backend platform with these features:
+• Sign in and sign out before chatting
+• Chat window with message history per conversation
+• Create and delete conversations
+• Upload images in chat and store them in InsForge storage
+• Show uploaded images inline
+• Clear all messages in a conversation
+• Each user only sees their own chats and files`,
+  features: ['Authentication', 'Database', 'Storage', 'AI Integration'],
+};

package/frontend/src/features/dashboard/prompts/crm-system.ts

@@ -0,0 +1,13 @@
+export const crmSystemPrompt = {
+  title: 'CRM',
+  description: 'Paste below prompts to your agent as a quick start for building real apps',
+  prompt: `Build a lightweight CRM app using InsForge as the backend platform with these features:
+• Contacts with search and simple tags
+• Companies and linked contacts
+• Deals pipeline with stages and easy stage updates
+• Deal detail with notes, tasks, and next follow up date
+• Reminders for upcoming tasks and follow ups
+• Activity timeline that logs deal stage changes and notes
+• File attachments stored in InsForge storage and shown on the deal page`,
+  features: ['Authentication', 'Database', 'Storage'],
+};

package/frontend/src/features/dashboard/prompts/ecommerce-platform.ts

@@ -0,0 +1,12 @@
+export const ecommercePlatformPrompt = {
+  title: 'E-commerce',
+  description: 'Paste below prompts to your agent as a quick start for building real apps',
+  prompt: `Build an app similar to a modern online store using InsForge as the backend platform that has these features:
+• Displays a list of products with images, names, prices, and descriptions
+• Allows users to add products to a shopping cart
+• Has a "Cart" page for reviewing and removing items before checkout
+• Has a simple checkout form for entering shipping details
+• Allows business owners to add, edit, and delete products
+• Stores product images in InsForge storage`,
+  features: ['Authentication', 'Database', 'Storage'],
+};

package/frontend/src/features/dashboard/prompts/index.ts

@@ -0,0 +1,31 @@
+import { crmSystemPrompt } from './crm-system';
+import { aiChatbotPrompt } from './ai-chatbot';
+import { ecommercePlatformPrompt } from './ecommerce-platform';
+import { redditClonePrompt } from './reddit-clone';
+import { instagramClonePrompt } from './instagram-clone';
+import { notionClonePrompt } from './notion-clone';
+
+export interface PromptTemplate {
+  title: string;
+  description: string;
+  prompt: string;
+  features: string[];
+}
+
+export const quickStartPrompts: PromptTemplate[] = [
+  crmSystemPrompt,
+  aiChatbotPrompt,
+  ecommercePlatformPrompt,
+  redditClonePrompt,
+  instagramClonePrompt,
+  notionClonePrompt,
+];
+
+export {
+  crmSystemPrompt,
+  aiChatbotPrompt,
+  ecommercePlatformPrompt,
+  redditClonePrompt,
+  instagramClonePrompt,
+  notionClonePrompt,
+};

package/frontend/src/features/dashboard/prompts/instagram-clone.ts

@@ -0,0 +1,11 @@
+export const instagramClonePrompt = {
+  title: 'Instagram Clone',
+  description: 'Paste below prompts to your agent as a quick start for building real apps',
+  prompt: `Build an app similar to Instagram with a global shared image stream using InsForge as the backend platform that has these features:
+• Has a drag and drop box for uploading images to InsForge storage with an optional caption
+• Has a "Feed" tab for viewing the global image stream
+• Has a "My Photos" tab for viewing and deleting your own images
+• Allows liking images in the "Feed" tab
+• Shows like count for each image`,
+  features: ['Authentication', 'Database', 'Storage'],
+};

package/frontend/src/features/dashboard/prompts/notion-clone.ts

@@ -0,0 +1,14 @@
+export const notionClonePrompt = {
+  title: 'Notion Clone',
+  description: 'Paste below prompts to your agent as a quick start for building real apps',
+  prompt: `Make a notes app like Notion using InsForge as the backend platform with these features:
+• User authentication for sign in and sign out
+• Pages list in a sidebar with create and delete
+• Each page has a title and rich text or simple markdown content
+• Support private pages for each user and public pages visible to all users
+• Search over page titles
+• Clean and minimal interface with white space and a neutral color palette
+• Focus on readable text with minimal distractions
+• Optional file attachments stored in InsForge storage and shown inside the page`,
+  features: ['Authentication', 'Database', 'Storage'],
+};

package/frontend/src/features/dashboard/prompts/reddit-clone.ts

@@ -0,0 +1,12 @@
+export const redditClonePrompt = {
+  title: 'Reddit Clone',
+  description: 'Paste below prompts to your agent as a quick start for building real apps',
+  prompt: `Build an app similar to Reddit with community-based discussion threads using InsForge as the backend platform that has these features:
+• Has a "Communities" list where users can browse or create communities
+• Each community has its own posts feed
+• Users can create posts with a title and body (text or image upload to InsForge storage)
+• Users can comment on posts and reply to other comments
+• Allows upvoting and downvoting for both posts and comments
+• Shows vote counts and comment counts for each post`,
+  features: ['Authentication', 'Database', 'Storage'],
+};