-
- --multiple-database-options
-
-
- --flexible-authentication
-
-
- --alternative-orms
-
-
- --framework-choices
-
+
+
+ --multiple-runtimes
+
+
+
+
+
+ --database-options
+
+
+
+ --customizable-addons
+
-
-
+
+
);
}
+
+// Helper component for colored badge pills
+function Badge({
+ children,
+ color,
+}: { children: React.ReactNode; color: string }) {
+ const colorMap = {
+ amber:
+ "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
+ blue: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
+ indigo:
+ "bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300",
+ cyan: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-300",
+ green:
+ "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
+ violet:
+ "bg-violet-100 text-violet-800 dark:bg-violet-900/30 dark:text-violet-300",
+ };
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/apps/web/src/app/(home)/_components/CustomizableStack.tsx b/apps/web/src/app/(home)/_components/CustomizableStack.tsx
deleted file mode 100644
index 91f2410..0000000
--- a/apps/web/src/app/(home)/_components/CustomizableStack.tsx
+++ /dev/null
@@ -1,463 +0,0 @@
-"use client";
-
-import {
- Background,
- type Connection,
- ReactFlow,
- useEdgesState,
- useNodesState,
-} from "@xyflow/react";
-import { useCallback, useEffect, useState } from "react";
-import { TechSelector } from "./TechSelector";
-import "@xyflow/react/dist/style.css";
-import { initialNodes } from "@/lib/constant";
-import { CommandDisplay } from "./CommandDisplay";
-import { TechNodeComponent } from "./TechNodeComponent";
-
-// Define initial edges with proper connections
-const initialEdges = [
- { id: "bun-hono", source: "bun", target: "hono", animated: true },
- { id: "bun-tanstack", source: "bun", target: "tanstack", animated: true },
- { id: "hono-sqlite", source: "hono", target: "sqlite", animated: true },
- { id: "sqlite-drizzle", source: "sqlite", target: "drizzle", animated: true },
- {
- id: "hono-better-auth",
- source: "hono",
- target: "better-auth",
- animated: true,
- },
- { id: "bun-tailwind", source: "bun", target: "tailwind", animated: true },
- {
- id: "tailwind-shadcn",
- source: "tailwind",
- target: "shadcn",
- animated: true,
- },
-];
-
-const nodeTypes = {
- techNode: TechNodeComponent,
-};
-
-interface ActiveNodes {
- backend: string;
- database: string;
- orm: string;
- auth: string;
- packageManager: string;
- addons: {
- docker: boolean;
- githubActions: boolean;
- seo: boolean;
- git: boolean;
- };
-}
-
-const CustomizableStack = () => {
- const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
- const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
- const [activeNodes, setActiveNodes] = useState
({
- backend: "hono",
- database: "sqlite",
- orm: "drizzle",
- auth: "better-auth",
- packageManager: "npm",
- addons: {
- docker: false,
- githubActions: false,
- seo: false,
- git: true,
- },
- });
- const [windowSize, setWindowSize] = useState("lg");
- const [command, setCommand] = useState("npx create-better-t-stack my-app -y");
-
- useEffect(() => {
- const handleResize = () => {
- if (window.innerWidth < 1024 && window.innerWidth > 768) {
- setWindowSize("md");
- } else if (window.innerWidth < 768) {
- setWindowSize("sm");
- } else {
- setWindowSize("lg");
- }
- };
-
- handleResize();
- window.addEventListener("resize", handleResize);
- return () => window.removeEventListener("resize", handleResize);
- }, []);
-
- // biome-ignore lint/correctness/useExhaustiveDependencies:
- useEffect(() => {
- // Generate command whenever activeNodes changes and update the command state
- setCommand(generateCommand());
- }, [activeNodes]);
-
- // Function to remove connections related to specific category
- const removeConnectionsByCategory = useCallback(
- (category: string) => {
- setEdges((eds) => {
- return eds.filter((edge) => {
- // Find source and target nodes
- const sourceNode = nodes.find((n) => n.id === edge.source);
- const targetNode = nodes.find((n) => n.id === edge.target);
-
- if (!sourceNode || !targetNode) return true;
-
- // Remove edges connected to the category being changed
- if (targetNode.data.category === category) return false;
-
- // Remove edges that connect from the category being changed
- if (sourceNode.data.category === category) return false;
-
- // For database changes, also remove ORM connections
- if (category === "database" && targetNode.data.category === "orm")
- return false;
-
- return true;
- });
- });
- },
- [nodes, setEdges],
- );
-
- const handleTechSelect = useCallback(
- (category: string, techId: string) => {
- // Update active nodes state
- setActiveNodes((prev) => ({
- ...prev,
- [category]: techId,
- ...(category === "addons" && {
- addons: {
- ...prev.addons,
- [techId]: !prev.addons[techId as keyof typeof prev.addons],
- },
- }),
- }));
-
- // Update node active states
- setNodes((nds) =>
- nds.map((node) => ({
- ...node,
- data: {
- ...node.data,
- isActive: node.data.isStatic
- ? true
- : node.data.category === category
- ? node.id === techId
- : node.data.isActive,
- },
- })),
- );
-
- // Remove old connections for this category
- removeConnectionsByCategory(category);
-
- // Create new connections based on the selected tech
- if (category === "backend") {
- // Connect backend to database, auth, and other core components
- const database = activeNodes.database;
- const auth = activeNodes.auth;
-
- setEdges((eds) => [
- ...eds,
- {
- id: `bun-${techId}`,
- source: "bun",
- target: techId,
- animated: true,
- },
- {
- id: `${techId}-${database}`,
- source: techId,
- target: database,
- animated: true,
- },
- {
- id: `${techId}-${auth}`,
- source: techId,
- target: auth,
- animated: true,
- },
- {
- id: `${techId}-tanstack`,
- source: techId,
- target: "tanstack",
- animated: true,
- },
- ]);
- } else if (category === "database") {
- // Connect backend to database and database to ORM
- const orm = activeNodes.orm;
-
- setEdges((eds) => [
- ...eds,
- {
- id: `hono-${techId}`,
- source: "hono",
- target: techId,
- animated: true,
- },
- // Only add ORM connection if database is not "no-database"
- ...(techId !== "no-database"
- ? [
- {
- id: `${techId}-${orm}`,
- source: techId,
- target: orm,
- animated: true,
- },
- ]
- : []),
- ]);
- } else if (category === "orm") {
- // Connect database to ORM
- const database = activeNodes.database;
-
- // Only add connection if database is not "no-database"
- if (database !== "no-database") {
- setEdges((eds) => [
- ...eds,
- {
- id: `${database}-${techId}`,
- source: database,
- target: techId,
- animated: true,
- },
- ]);
- }
- } else if (category === "auth") {
- // Connect backend to auth
- setEdges((eds) => [
- ...eds,
- {
- id: `hono-${techId}`,
- source: "hono",
- target: techId,
- animated: true,
- },
- ]);
- }
- },
- [activeNodes, setNodes, setEdges, removeConnectionsByCategory],
- );
-
- const isValidConnection = useCallback(
- (connection: Connection) => {
- const sourceNode = nodes.find((n) => n.id === connection.source);
- const targetNode = nodes.find((n) => n.id === connection.target);
-
- if (!sourceNode || !targetNode) return false;
-
- // Define valid connection patterns
- if (sourceNode.id === "hono" && targetNode.data.category === "database") {
- return ["postgres", "sqlite", "no-database"].includes(targetNode.id);
- }
-
- if (sourceNode.id === "hono" && targetNode.data.category === "auth") {
- return ["better-auth", "no-auth"].includes(targetNode.id);
- }
-
- if (
- ["postgres", "sqlite"].includes(sourceNode.id) &&
- targetNode.data.category === "orm"
- ) {
- return ["drizzle", "prisma"].includes(targetNode.id);
- }
-
- return false;
- },
- [nodes],
- );
-
- const onConnect = useCallback(
- (connection: Connection) => {
- if (!isValidConnection(connection)) return;
-
- const targetNode = nodes.find((n) => n.id === connection.target);
- if (!targetNode || !targetNode.data.category) return;
-
- // Remove existing connections for the category we're connecting to
- removeConnectionsByCategory(targetNode.data.category);
-
- // Update active nodes state
- setActiveNodes((prev) => ({
- ...prev,
- [targetNode.data.category]: connection.target,
- }));
-
- // Update node active states
- setNodes((nds) =>
- nds.map((node) => ({
- ...node,
- data: {
- ...node.data,
- isActive: node.data.isStatic
- ? true
- : node.data.category === targetNode.data.category
- ? node.id === connection.target
- : node.data.isActive,
- },
- })),
- );
-
- // Add the new connection
- setEdges((eds) => [
- ...eds,
- {
- id: `${connection.source}-${connection.target}`,
- source: connection.source,
- target: connection.target,
- animated: true,
- },
- ]);
-
- // If connecting to database, also connect to the active ORM
- if (
- targetNode.data.category === "database" &&
- targetNode.id !== "no-database"
- ) {
- const activeOrm = nodes.find(
- (n) => n.data.category === "orm" && n.data.isActive,
- );
- if (activeOrm) {
- setEdges((eds) => [
- ...eds,
- {
- id: `${connection.target}-${activeOrm.id}`,
- source: connection.target,
- target: activeOrm.id,
- animated: true,
- },
- ]);
- }
- }
- },
- [nodes, setEdges, setNodes, removeConnectionsByCategory, isValidConnection],
- );
-
- const generateCommand = useCallback(() => {
- // Start with the base command
- const command = "npx create-better-t-stack my-app";
- const flags: string[] = [];
-
- const isAllDefaults =
- activeNodes.database === "sqlite" &&
- activeNodes.auth === "better-auth" &&
- activeNodes.orm === "drizzle" &&
- activeNodes.packageManager === "npm" &&
- activeNodes.addons.git === true &&
- !activeNodes.addons.docker &&
- !activeNodes.addons.githubActions &&
- !activeNodes.addons.seo;
-
- // If using all defaults, just use -y flag
- if (isAllDefaults) {
- return `${command} -y`;
- }
-
- // Database options
- if (activeNodes.database === "postgres") {
- flags.push("--postgres");
- } else if (activeNodes.database === "sqlite") {
- flags.push("--sqlite");
- } else if (activeNodes.database === "no-database") {
- flags.push("--no-database");
- }
-
- // Authentication options
- if (activeNodes.auth === "better-auth") {
- flags.push("--auth");
- } else if (activeNodes.auth === "no-auth") {
- flags.push("--no-auth");
- }
-
- // ORM options
- if (activeNodes.orm === "drizzle") {
- flags.push("--drizzle");
- } else if (activeNodes.orm === "prisma") {
- flags.push("--prisma");
- }
-
- // Package manager options
- if (activeNodes.packageManager !== "npm") {
- flags.push(`--${activeNodes.packageManager}`);
- }
-
- // Feature flags
- if (activeNodes.addons.docker) {
- flags.push("--docker");
- }
-
- if (activeNodes.addons.githubActions) {
- flags.push("--github-actions");
- }
-
- if (activeNodes.addons.seo) {
- flags.push("--seo");
- }
-
- if (!activeNodes.addons.git) {
- flags.push("--no-git");
- }
-
- return flags.length > 0 ? `${command} ${flags.join(" ")}` : command;
- }, [activeNodes]);
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Select technologies from the left panel to customize your stack. The
- graph will automatically update connections.
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ Stack Architect Terminal
+
+
+
+
+
+
+
+
+
+ $
+
+ {command}
+
+
+
+
+
+
+
+
+ Configure{" "}
+ {activeTab.charAt(0).toUpperCase() + activeTab.slice(1)}
+
+
+
+
+ {TECH_OPTIONS[activeTab as keyof typeof TECH_OPTIONS].map(
+ (tech) => {
+ let isSelected = false;
+ if (activeTab === "addons" || activeTab === "examples") {
+ isSelected = stack[activeTab].includes(tech.id);
+ } else {
+ isSelected =
+ stack[activeTab as keyof StackState] === tech.id;
+ }
+
+ const isDisabled =
+ (activeTab === "orm" && stack.database === "none") ||
+ (activeTab === "turso" && stack.database !== "sqlite");
+
+ return (
+
+ !isDisabled &&
+ handleTechSelect(
+ activeTab as keyof typeof TECH_OPTIONS,
+ tech.id,
+ )
+ }
+ >
+
+
+ {isSelected ? (
+
+ ) : (
+
+ )}
+
+
+
+ {tech.icon}
+
+ {tech.name}
+
+
+
+ {tech.description}
+
+
+ {tech.default && !isSelected && (
+
+ Default
+
+ )}
+
+ );
+ },
+ )}
+
+
+
+
+ Selected Stack
+
+
+
+ {
+ TECH_OPTIONS.runtime.find((t) => t.id === stack.runtime)
+ ?.icon
+ }{" "}
+ {
+ TECH_OPTIONS.runtime.find((t) => t.id === stack.runtime)
+ ?.name
+ }
+
+
+
+ {
+ TECH_OPTIONS.backendFramework.find(
+ (t) => t.id === stack.backendFramework,
+ )?.icon
+ }{" "}
+ {
+ TECH_OPTIONS.backendFramework.find(
+ (t) => t.id === stack.backendFramework,
+ )?.name
+ }
+
+
+
+ {
+ TECH_OPTIONS.database.find((t) => t.id === stack.database)
+ ?.icon
+ }{" "}
+ {
+ TECH_OPTIONS.database.find((t) => t.id === stack.database)
+ ?.name
+ }
+
+
+ {stack.orm && (
+
+ {TECH_OPTIONS.orm.find((t) => t.id === stack.orm)?.icon}{" "}
+ {TECH_OPTIONS.orm.find((t) => t.id === stack.orm)?.name}
+
+ )}
+
+
+ {TECH_OPTIONS.auth.find((t) => t.id === stack.auth)?.icon}{" "}
+ {TECH_OPTIONS.auth.find((t) => t.id === stack.auth)?.name}
+
+
+ {stack.turso === "true" && stack.database === "sqlite" && (
+
+ {TECH_OPTIONS.turso.find((t) => t.id === stack.turso)?.icon}{" "}
+ {TECH_OPTIONS.turso.find((t) => t.id === stack.turso)?.name}
+
+ )}
+
+ {stack.addons.map((addonId) => {
+ const addon = TECH_OPTIONS.addons.find(
+ (a) => a.id === addonId,
+ );
+ return addon ? (
+
+ {addon.icon} {addon.name}
+
+ ) : null;
+ })}
+
+
+
+
+
+
+ {Object.keys(TECH_OPTIONS).map((category) => (
+
+ ))}
+
+
+
-
- TS
-
-
- {technologies.map((tech, index) => {
- const radius = calculateRadius(tech.category);
- const x = Math.cos((tech.angle * Math.PI) / 180) * radius;
- const y = Math.sin((tech.angle * Math.PI) / 180) * radius;
-
- return (
-
{
- techRefs.current[tech.name] = el;
- }}
- className={`absolute z-20 transform -translate-x-1/2 -translate-y-1/2 transition-all duration-1000
- ${isVisible ? "scale-100 opacity-100" : "scale-0 opacity-0"}`}
- style={{
- left: `calc(50% + ${x}px)`,
- top: `calc(50% + ${y}px)`,
- transitionDelay: `${index * 100}ms`,
- }}
- >
-
-
-
-
-
-
{tech.name}
-
{tech.description}
-
-
-
-
- {tech.name}
-
-
{tech.description}
-
-
-
- );
- })}
-
- {isVisible && (
- <>
- {renderCategoryBeams("core")}
- {renderCategoryBeams("frontend")}
- {renderCategoryBeams("backend")}
-
- )}
-
-
- {stars.map((star) => (
-
- ))}
-
-
- {/* Floating particles effect */}
-
- {[...Array(6)].map((_, i) => (
-
- key={i}
- className="absolute rounded-full bg-blue-500/10 dark:bg-blue-500/10 blur-xl"
- style={{
- width: `${Math.random() * 200 + 50}px`,
- height: `${Math.random() * 200 + 50}px`,
- top: `${Math.random() * 100}%`,
- left: `${Math.random() * 100}%`,
- animation: `float ${Math.random() * 10 + 10}s linear infinite`,
- opacity: Math.random() * 0.5,
- }}
- />
- ))}
-
-
- {/* Main container */}
-
- {/* Gradient border effect */}
-
-
- {/* Terminal header */}
-
-
-
-
- user@better-t-stack
-
- :
-
- ~/tech-matrix
-
- $
-
-
- v1.0.0
-
-
- {/* Command line interface effect */}
-
- $
- {typedCommand}
-
-
-
- {/* Category filters */}
-
-
-
-
- {categories.map((category) => (
-
- ))}
-
-
- {/* Tech stack display */}
-
-
-
-
- {"// Better-T Stack Tech Matrix"}
-
-
- {"const techStack = {"}
-
-
-
-
- {filteredTech.map((tech, index) => (
-
-
-
-
- {tech.logo && (
-
- )}
-
-
-
- {tech.name}
-
-
- :{" "}
-
-
- "{tech.description}"
-
- {index < filteredTech.length - 1 && (
-
- ,
-
- )}
-
-
-
- {`// ${tech.category}`}
-
- [installed]
-
-
-
-
-
-
-
{"};"}
-
- {/* Terminal footer */}
-
-
- ${" "}
- run better-t-stack --with-typesafety
-
-
- Ready for deployment...
-
-
-
-
-
- {/* Add animated style tag for custom animations */}
-
-
- );
-}
diff --git a/apps/web/src/app/(home)/_components/TechNodeComponent.tsx b/apps/web/src/app/(home)/_components/TechNodeComponent.tsx
deleted file mode 100644
index d73c246..0000000
--- a/apps/web/src/app/(home)/_components/TechNodeComponent.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Handle, Position } from "@xyflow/react";
-
-const categoryIndicators = {
- core: "before:bg-amber-500",
- frontend: "before:bg-blue-500",
- backend: "before:bg-emerald-500",
- database: "before:bg-purple-500",
- auth: "before:bg-red-500",
- orm: "before:bg-orange-500",
-};
-
-interface TechNodeData {
- category: keyof typeof categoryIndicators;
- isActive: boolean;
- label: string;
- description: string;
- isDefault?: boolean;
- isStatic?: boolean;
-}
-
-export function TechNodeComponent({ data }: { data: TechNodeData }) {
- const baseStyles = `
- relative lg:px-5 lg:py-4 px-3 py-1 rounded-lg
- transition-all duration-300
- dark:border-white/20 border-gray-300/30
- before:content-[''] before:absolute before:left-0 before:top-0 before:w-1.5 before:h-full
- before:rounded-l-xl ${categoryIndicators[data.category]}
- `;
-
- const activeStyles = data.isActive
- ? "opacity-100 dark:bg-gradient-to-br dark:from-indigo-900/30 dark:to-violet-900/30 bg-gradient-to-br from-indigo-50 to-violet-50"
- : "opacity-80 hover:opacity-95 dark:bg-slate-800 bg-slate-100";
-
- return (
-
- {data.label !== "Bun" && (
-
- )}
-
-
-
- {data.label}
-
-
- {data.description}
-
- {!data.isDefault && !data.isStatic && (
-
- Alternative Option
-
- )}
-
-
-
-
- );
-}
diff --git a/apps/web/src/app/(home)/_components/TechSelector.tsx b/apps/web/src/app/(home)/_components/TechSelector.tsx
deleted file mode 100644
index 3865cb0..0000000
--- a/apps/web/src/app/(home)/_components/TechSelector.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-interface ActiveNodes {
- backend: string;
- database: string;
- orm: string;
- auth: string;
- packageManager: string;
- addons: {
- docker: boolean;
- githubActions: boolean;
- seo: boolean;
- git: boolean;
- };
-}
-
-type TechOption = {
- id: string;
- label: string;
- category: string;
-};
-
-const techOptions: Record
= {
- database: [
- { id: "sqlite", label: "SQLite", category: "database" },
- { id: "postgres", label: "PostgreSQL", category: "database" },
- { id: "no-database", label: "No DB", category: "database" },
- ],
- orm: [
- { id: "drizzle", label: "Drizzle", category: "orm" },
- { id: "prisma", label: "Prisma", category: "orm" },
- ],
- auth: [
- { id: "better-auth", label: "Auth", category: "auth" },
- { id: "no-auth", label: "No Auth", category: "auth" },
- ],
- packageManager: [
- { id: "npm", label: "NPM", category: "packageManager" },
- { id: "pnpm", label: "PNPM", category: "packageManager" },
- { id: "bun", label: "Bun", category: "packageManager" },
- ],
- addons: [
- { id: "docker", label: "Docker", category: "addons" },
- { id: "githubActions", label: "GitHub Actions", category: "addons" },
- { id: "seo", label: "SEO", category: "addons" },
- { id: "git", label: "Git", category: "addons" },
- ],
-};
-
-interface TechSelectorProps {
- onSelect: (category: string, techId: string) => void;
- activeNodes: ActiveNodes;
-}
-export function TechSelector({ onSelect, activeNodes }: TechSelectorProps) {
- return (
-
-
- Options
-
-
- {Object.entries(techOptions)
- .filter(([category]) => category !== "addons")
- .map(([category, options]) => (
-
-
- {category}
-
-
- {options.map((option) => (
-
- ] === option.id && "bg-blue-600 dark:text-white text-white"
- }`}
- onClick={() => onSelect(category, option.id)}
- >
- {option.label}
-
- ))}
-
-
- ))}
-
-
-
Addons
-
- {techOptions.addons.map((option) => (
- onSelect("addons", option.id)}
- >
- {option.label}
-
- ))}
-
-
-
-
-
-
-
-
- ➜
- ~
- $
-
- npx create-better-t-stack@latest
-
-
-
-
- {TITLE_TEXT}
-
-
-
-
- {/*