feat: add Backend Frameworks section to Hub below Official Templates

- Add BackendFramework interface and data for Django, FastAPI, Flask, Node.js
- Create BackendFrameworkCard component similar to TemplateCard
- Integrate Backend Frameworks section in Hub page between Official Templates and Community Templates
- Update CreateAppDialog to support backend framework selection
- Backend frameworks can now be selected and used to create apps with proper scaffolding

Author: SFARPak

src/components/BackendFrameworkCard.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { useSettings } from "@/hooks/useSettings";
+import type { BackendFramework } from "@/shared/backendFrameworks";
+import { Button } from "./ui/button";
+import { cn } from "@/lib/utils";
+
+interface BackendFrameworkCardProps {
+  framework: BackendFramework;
+  isSelected: boolean;
+  onSelect: (frameworkId: string) => void;
+  onCreateApp: () => void;
+}
+
+export const BackendFrameworkCard: React.FC<BackendFrameworkCardProps> = ({
+  framework,
+  isSelected,
+  onSelect,
+  onCreateApp,
+}) => {
+  const { settings } = useSettings();
+
+  const handleCardClick = () => {
+    onSelect(framework.id);
+  };
+
+  return (
+    <div
+      onClick={handleCardClick}
+      className={`
+        bg-white dark:bg-gray-800 rounded-xl shadow-sm overflow-hidden
+        transform transition-all duration-300 ease-in-out
+        cursor-pointer group relative
+        ${
+          isSelected
+            ? "ring-2 ring-blue-500 dark:ring-blue-400 shadow-xl"
+            : "hover:shadow-lg hover:-translate-y-1"
+        }
+      `}
+    >
+      <div className="relative">
+        <img
+          src={framework.imageUrl}
+          alt={framework.title}
+          className={`w-full h-52 object-cover transition-opacity duration-300 group-hover:opacity-80 ${
+            isSelected ? "opacity-75" : ""
+          }`}
+        />
+        {isSelected && (
+          <span className="absolute top-3 right-3 bg-blue-600 text-white text-xs font-bold px-3 py-1.5 rounded-md shadow-lg">
+            Selected
+          </span>
+        )}
+      </div>
+      <div className="p-4">
+        <div className="flex justify-between items-center mb-1.5">
+          <h2
+            className={`text-lg font-semibold ${
+              isSelected
+                ? "text-blue-600 dark:text-blue-400"
+                : "text-gray-900 dark:text-white"
+            }`}
+          >
+            {framework.title}
+          </h2>
+          <span
+            className={`text-xs font-semibold px-2 py-0.5 rounded-full ${
+              isSelected
+                ? "bg-blue-100 text-blue-700 dark:bg-blue-600 dark:text-blue-100"
+                : "bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-200"
+            }`}
+          >
+            {framework.language}
+          </span>
+        </div>
+        <p className="text-sm text-gray-500 dark:text-gray-400 mb-3 h-16 overflow-y-auto">
+          {framework.description}
+        </p>
+
+        <Button
+          onClick={(e) => {
+            e.stopPropagation();
+            onCreateApp();
+          }}
+          size="sm"
+          className={cn(
+            "w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold mt-2",
+            settings?.selectedBackendFramework !== framework.id && "invisible",
+          )}
+        >
+          Create App
+        </Button>
+      </div>
+    </div>
+  );
+};

src/components/CreateAppDialog.tsx

@@ -92,7 +92,11 @@ export function CreateAppDialog({
         <DialogHeader>
           <DialogTitle>Create New App</DialogTitle>
           <DialogDescription>
-            {`Create a new app using the ${template?.title} template.`}
+            {template
+              ? `Create a new app using the ${template.title} template.`
+              : selectedBackendFramework
+              ? `Create a new app with the ${selectedBackendFramework} backend framework.`
+              : "Create a new app."}
           </DialogDescription>
         </DialogHeader>
 

src/pages/hub.tsx

@@ -5,8 +5,10 @@ import { useRouter } from "@tanstack/react-router";
 import { useSettings } from "@/hooks/useSettings";
 import { useTemplates } from "@/hooks/useTemplates";
 import { TemplateCard } from "@/components/TemplateCard";
+import { BackendFrameworkCard } from "@/components/BackendFrameworkCard";
 import { CreateAppDialog } from "@/components/CreateAppDialog";
 import { NeonConnector } from "@/components/NeonConnector";
+import { backendFrameworksData, type BackendFramework } from "@/shared/backendFrameworks";
 
 const HubPage: React.FC = () => {
   const router = useRouter();
@@ -19,6 +21,10 @@ const HubPage: React.FC = () => {
     updateSettings({ selectedTemplateId: templateId });
   };
 
+  const handleBackendFrameworkSelect = (frameworkId: string) => {
+    updateSettings({ selectedBackendFramework: frameworkId });
+  };
+
   const handleCreateApp = () => {
     setIsCreateDialogOpen(true);
   };
@@ -28,6 +34,8 @@ const HubPage: React.FC = () => {
   const communityTemplates =
     templates?.filter((template) => !template.isOfficial) || [];
 
+  const selectedBackendFramework = settings?.selectedBackendFramework;
+
   return (
     <div className="min-h-screen px-8 py-4">
       <div className="max-w-5xl mx-auto pb-12">
@@ -70,6 +78,24 @@ const HubPage: React.FC = () => {
           </section>
         )}
 
+        {/* Backend Frameworks Section */}
+        <section className="mb-12">
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
+            Backend frameworks
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {backendFrameworksData.map((framework) => (
+              <BackendFrameworkCard
+                key={framework.id}
+                framework={framework}
+                isSelected={framework.id === selectedBackendFramework}
+                onSelect={handleBackendFrameworkSelect}
+                onCreateApp={handleCreateApp}
+              />
+            ))}
+          </div>
+        </section>
+
         {/* Community Templates Section */}
         {communityTemplates.length > 0 && (
           <section className="mb-12">
@@ -97,6 +123,7 @@ const HubPage: React.FC = () => {
         open={isCreateDialogOpen}
         onOpenChange={setIsCreateDialogOpen}
         template={templates.find((t) => t.id === settings?.selectedTemplateId)}
+        selectedBackendFramework={settings?.selectedBackendFramework}
       />
     </div>
   );

src/shared/backendFrameworks.ts

@@ -0,0 +1,38 @@
+export interface BackendFramework {
+  id: string;
+  title: string;
+  description: string;
+  imageUrl: string;
+  language: string;
+}
+
+export const backendFrameworksData: BackendFramework[] = [
+  {
+    id: "django",
+    title: "Django",
+    description: "High-level Python web framework that encourages rapid development and clean, pragmatic design.",
+    imageUrl: "assets/backend-frameworks/django-screenshot.svg",
+    language: "Python",
+  },
+  {
+    id: "fastapi",
+    title: "FastAPI",
+    description: "Modern, fast web framework for building APIs with Python 3.7+ based on standard Python type hints.",
+    imageUrl: "assets/backend-frameworks/fastapi-screenshot.svg",
+    language: "Python",
+  },
+  {
+    id: "flask",
+    title: "Flask",
+    description: "Lightweight WSGI web application framework designed to make getting started quick and easy.",
+    imageUrl: "assets/backend-frameworks/flask-screenshot.svg",
+    language: "Python",
+  },
+  {
+    id: "nodejs",
+    title: "Node.js + Express",
+    description: "JavaScript runtime built on Chrome's V8 JavaScript engine with Express.js web application framework.",
+    imageUrl: "assets/backend-frameworks/nodejs-screenshot.svg",
+    language: "JavaScript",
+  },
+];