diff --git a/apps/cli/package.json b/apps/cli/package.json index 9b380ee..73acb57 100644 --- a/apps/cli/package.json +++ b/apps/cli/package.json @@ -1,16 +1,13 @@ { "name": "create-better-t-stack", "version": "1.3.3", - "description": "CLI tool to scaffold Better-T Stack projects", + "description": "A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations", "type": "module", "license": "MIT", "bin": { "create-better-t-stack": "dist/index.js" }, - "files": [ - "dist", - "template" - ], + "files": ["dist", "template"], "keywords": [], "repository": { "type": "git", diff --git a/apps/web/src/app/(home)/_components/BackgroundGradients.tsx b/apps/web/src/app/(home)/_components/BackgroundGradients.tsx index c634331..96e9da4 100644 --- a/apps/web/src/app/(home)/_components/BackgroundGradients.tsx +++ b/apps/web/src/app/(home)/_components/BackgroundGradients.tsx @@ -3,18 +3,11 @@ import React from "react"; const BackgroundGradients = () => { return (
-
- -
-
- -
- -
- -
+
+
+
+
-
); diff --git a/apps/web/src/app/(home)/_components/CodeContainer.tsx b/apps/web/src/app/(home)/_components/CodeContainer.tsx index bb3b6d6..f3d44f3 100644 --- a/apps/web/src/app/(home)/_components/CodeContainer.tsx +++ b/apps/web/src/app/(home)/_components/CodeContainer.tsx @@ -1,9 +1,11 @@ "use client"; +import { motion } from "framer-motion"; +import { Check, CircleCheck, ClipboardCopy, Terminal } from "lucide-react"; import { useEffect, useRef, useState } from "react"; const CodeContainer = () => { const [isOpen, setIsOpen] = useState(false); - const [selectedPM, setSelectedPM] = useState<"npm" | "pnpm" | "bun">("npm"); + const [selectedPM, setSelectedPM] = useState<"npm" | "pnpm" | "bun">("bun"); const [copied, setCopied] = useState(false); const menuRef = useRef(null); const [typingComplete, setTypingComplete] = useState(false); @@ -21,9 +23,9 @@ const CodeContainer = () => { }, []); const commands = { - npm: "npx create-better-t-stack@latest", - pnpm: "pnpm create better-t-stack@latest", - bun: "bun create better-t-stack@latest", + npm: "npx create-better-t-stack@latest my-better-t-app --yes", + pnpm: "pnpm create better-t-stack@latest my-better-t-app --yes", + bun: "bun create better-t-stack@latest my-better-t-app --yes", }; const copyToClipboard = async (pm: "npm" | "pnpm" | "bun") => { @@ -52,31 +54,31 @@ const CodeContainer = () => { return (
-
-
-
-
-
-
-
-
-
- terminal -
+
+
+
+
+
+
+
+
+ Quick Install Terminal
- {/* Package Manager Selector */}
{isOpen && ( -
+
    {(Object.keys(commands) as Array<"npm" | "pnpm" | "bun">).map( (pm) => (
    • ), )}
-
+ )}
-
+
- $ - + $ + {commands[selectedPM]} { ▌
- +
{typingComplete && ( - <> -
+ +
{currentStep >= 1 && ( -

= 1 ? "opacity-100" : "opacity-0" - }`} + Creating a new Better-T-Stack project -

+ )} {currentStep >= 2 && ( -
-

+ +

Project name:{" "} - - my-t-stack + + my-better-t-app

-

+

+ Frontend:{" "} + + React Web + +

+

+ Runtime:{" "} + + Bun + +

+

+ Backend:{" "} + + Hono + +

+

Database:{" "} - - postgres + + SQLite + Drizzle

-

- ORM:{" "} - - drizzle - -

-

- Authentication:{" "} - - yes - -

-

- Addons:{" "} - - docker, github-actions, SEO - -

-
+ )}
- {currentStep >= 3 && ( -
-

- ✓ Creating project structure -

- {currentStep >= 4 && ( -

- ✓ Installing dependencies -

- )} - {currentStep >= 5 && ( - <> -

- ✓ Setting up database -

-

- ✓ Configuring authentication -

-

- Project ready! Happy coding! -

- - )} -
- )} - + + {currentStep >= 3 && ( + + + Completed + + Creating project structure + + )} + {currentStep >= 4 && ( + + + Completed + + Installing dependencies + + )} + {currentStep >= 5 && ( + + + + Completed + + Setting up database schema + + + + Completed + + Configuring authentication + + + + Success + + + + + Project ready! Run{" "} + + cd my-better-t-app + {" "} + and{" "} + + {selectedPM === "npm" && "npm run dev"} + {selectedPM === "pnpm" && "pnpm dev"} + {selectedPM === "bun" && "bun dev"} + + + + + )} + + )} -
- $ +
= 5 && typingComplete ? "" : "hidden" + }`} + > + $ ▌
+ +
+
+ + For custom options, use + + {selectedPM === "npm" && "npx"} + {selectedPM === "pnpm" && "pnpm dlx"} + {selectedPM === "bun" && "bunx"} create-better-t-stack + + without flags + +
+
); }; -const CopyIcon = ({ className = "" }) => ( - - copy - - -); - -const CheckIcon = ({ className = "" }) => ( - - check - - -); - export default CodeContainer; diff --git a/apps/web/src/app/(home)/_components/CustomizableSection.tsx b/apps/web/src/app/(home)/_components/CustomizableSection.tsx index cebad88..2c3e836 100644 --- a/apps/web/src/app/(home)/_components/CustomizableSection.tsx +++ b/apps/web/src/app/(home)/_components/CustomizableSection.tsx @@ -4,57 +4,62 @@ import StackArchitect from "./StackArchitech"; export default function CustomizableSection() { return ( -
-
-
- - - {">"} - - - Your Stack, Your Choice - - -
-
- +
+
-

- ${" "} - Better-T Stack with defaults, - - {" "} - customizable options - {" "} - for your perfect development environment +

+ + {">"} + + + Your Stack, Your Choice + +

+
+ + + +

+ Configure your ideal TypeScript environment with all the options you + need

-
-
- - --multiple-runtimes +
+
+ + Runtime Options + + --runtime
-
- - --framework-choices +
+ + Framework Options + + --framework
-
- - --database-options +
+ + Database Options + + --database
-
- - --customizable-addons +
+ + Addon Options + + --addons
@@ -62,54 +67,55 @@ export default function CustomizableSection() { Bun or Node Hono or Elysia SQLite or PostgreSQL Drizzle or Prisma - Authentication Options + Authentication Optional 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", + "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300 border-amber-200 dark:border-amber-800/30", + blue: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 border-blue-200 dark:border-blue-800/30", 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", + "bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300 border-indigo-200 dark:border-indigo-800/30", + cyan: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-300 border-cyan-200 dark:border-cyan-800/30", green: - "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300", + "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 border-green-200 dark:border-green-800/30", violet: - "bg-violet-100 text-violet-800 dark:bg-violet-900/30 dark:text-violet-300", + "bg-violet-100 text-violet-800 dark:bg-violet-900/30 dark:text-violet-300 border-violet-200 dark:border-violet-800/30", }; return ( {children} diff --git a/apps/web/src/app/(home)/_components/Footer.tsx b/apps/web/src/app/(home)/_components/Footer.tsx index 311155b..abf8d3a 100644 --- a/apps/web/src/app/(home)/_components/Footer.tsx +++ b/apps/web/src/app/(home)/_components/Footer.tsx @@ -1,69 +1,120 @@ +import { Github } from "lucide-react"; import Link from "next/link"; const Footer = () => { return ( -