franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

add orpc

Browse Source
This commit is contained in:
Aman Varshney
2025-04-14 21:45:28 +05:30
parent 8b03441909
commit 7f441ef670
268 changed files with 3513 additions and 3039 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/app/(home)/_components/CodeContainer.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { motion } from "framer-motion";
import { Check, ClipboardCopy, Terminal } from "lucide-react";
import { motion } from "motion/react";
import { useEffect, useRef, useState } from "react";
const CodeContainer = () => {

2
apps/web/src/app/(home)/_components/CustomizableSection.tsx
View File

@@ -1,5 +1,5 @@
import { motion } from "framer-motion";
import { Code, Sliders, Terminal, TerminalSquare } from "lucide-react";
import { motion } from "motion/react";
import StackArchitect from "./StackArchitech";
export default function CustomizableSection() {

1192
apps/web/src/app/(home)/_components/StackArchitech.tsx
View File

File diff suppressed because it is too large Load Diff

2
apps/web/src/app/(home)/_components/TechShowcase.tsx
View File

@@ -1,4 +1,4 @@
import { motion } from "framer-motion";
import { motion } from "motion/react";
import React, { useState } from "react";
interface TechItem {

2
apps/web/src/app/(home)/_components/Testimonials.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { motion } from "framer-motion";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { motion } from "motion/react";
import { useEffect, useState } from "react";
import { Tweet } from "react-tweet";

6
apps/web/src/app/(home)/layout.tsx
View File

@@ -1,13 +1,9 @@
import type { ReactNode } from "react";
import Footer from "./_components/Footer";
import Navbar from "./_components/Navbar";
export default function Layout({ children }: { children: ReactNode }) {
return (
<main className="relative z-10 grid min-h-svh grid-cols-1 grid-rows-[auto_1fr_auto] overflow-hidden bg-gradient-to-b from-gray-50 to-gray-100 transition-color duration-300 dark:from-gray-950 dark:to-black">
<Navbar />
<div className="pt-16">{children}</div>
<Footer />
{children}
</main>
);
}

53
apps/web/src/app/(home)/new/page.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { motion } from "framer-motion";
import { motion } from "motion/react";
import Link from "next/link";
import { useEffect } from "react";
import StackArchitect from "../_components/StackArchitech";
@@ -13,44 +14,34 @@ export default function FullScreenStackArchitect() {
setVh();
window.addEventListener("resize", setVh);
return () => window.removeEventListener("resize", setVh);
document.body.style.overflow = "hidden";
return () => {
window.removeEventListener("resize", setVh);
document.body.style.overflow = "";
};
}, []);
return (
<div className="flex min-h-[calc(var(--vh,1vh)*100)] flex-col bg-gradient-to-b from-white to-gray-50 dark:from-gray-950 dark:to-gray-900">
<div className="flex h-[calc(var(--vh,1vh)*100)] flex-col bg-gradient-to-b from-white to-gray-50 dark:from-gray-950 dark:to-gray-900">
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5 }}
className="flex-1 px-4 py-8"
transition={{ duration: 0.3 }}
className="w-full flex-1"
>
<div className="mx-auto max-w-6xl">
<div className="mb-8 max-w-3xl">
<h1 className="mb-3 font-bold font-mono text-2xl sm:text-3xl md:text-4xl">
Design Your Ideal Full Stack
</h1>
<p className="text-gray-700 text-lg dark:text-gray-300">
Configure every aspect of your TypeScript application with the
interactive stack architect. Choose your technologies, add
features, and generate your startup command.
</p>
</div>
<StackArchitect fullscreen={true} />
<div className="mt-8 rounded-lg border border-blue-100 bg-blue-50 p-4 dark:border-blue-900 dark:bg-blue-900/20">
<h3 className="mb-2 font-medium text-blue-800 dark:text-blue-300">
Need help getting started?
</h3>
<p className="text-blue-700 dark:text-blue-400">
Select a preset template for common configurations, or customize
each component of your stack. When you are ready, copy the
generated command and run it in your terminal to create your
project.
</p>
</div>
</div>
<StackArchitect fullscreen={true} />
</motion.div>
<div className="flex-shrink-0 border-gray-200 border-t bg-blue-50/80 p-2 px-4 text-xs sm:p-3 dark:border-gray-800 dark:bg-blue-950/50">
<p className="text-center text-blue-700 dark:text-blue-400">
Tip: Use presets (⭐), save (💾), reset (🔄), or copy (📋) the
command.{" "}
<Link href="/" className="underline hover:text-blue-500">
Exit Fullscreen
</Link>
</p>
</div>
</div>
);
}

206
apps/web/src/app/(home)/page.tsx
View File

@@ -1,86 +1,166 @@
"use client";
import ShinyText from "@/app/(home)/_components/ShinyText";
import { motion } from "motion/react";
import React from "react";
import BackgroundGradients from "./_components/BackgroundGradients";
import CodeContainer from "./_components/CodeContainer";
import CustomizableSection from "./_components/CustomizableSection";
import Footer from "./_components/Footer";
import Navbar from "./_components/Navbar";
import NpmPackage from "./_components/NpmPackage";
import Testimonials from "./_components/Testimonials";
export default function HomePage() {
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.15,
},
},
};
const itemVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.5,
ease: "easeOut",
},
},
};
const sectionVariants = {
hidden: { opacity: 0, y: 30 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.6,
ease: "easeOut",
},
},
};
return (
<main className="flex flex-col items-center justify-start px-0 pt-12 pb-10 sm:px-4 sm:pb-16 md:px-8 md:pt-16 lg:pt-20">
<BackgroundGradients />
<div className="relative z-10 mx-auto mb-10 max-w-5xl text-center sm:mb-16">
<div className="px-1 sm:px-6 lg:px-8">
<div className="flex flex-col items-center justify-center space-y-3 text-center sm:space-y-4">
<h1 className="font-bold font-mono text-4xl xs:text-5xl tracking-tight sm:text-6xl md:text-7xl">
<span className="border-blue-500 border-b-2 pb-1 text-gray-900 dark:text-blue-100">
Better-T Stack
</span>
</h1>
<>
<Navbar />
<main className="flex min-h-screen flex-col items-center justify-start overflow-x-hidden px-0 pt-24 pb-10 sm:px-4 sm:pb-16 md:px-8 md:pt-28 lg:pt-32">
<BackgroundGradients />
<div className="mb-1 sm:mb-2">
<NpmPackage />
<motion.div
className="relative z-10 mx-auto mb-16 max-w-5xl text-center sm:mb-20"
initial="hidden"
animate="visible"
variants={containerVariants}
>
<div className="px-1 sm:px-6 lg:px-8">
<div className="flex flex-col items-center justify-center space-y-4 text-center sm:space-y-5">
<motion.h1
className="font-bold font-mono text-4xl xs:text-5xl tracking-tight sm:text-6xl md:text-7xl"
variants={itemVariants}
>
<span className="border-blue-500 border-b-2 pb-1 text-gray-900 dark:text-blue-100">
Better-T Stack
</span>
</motion.h1>
<motion.div className="mb-1 sm:mb-2" variants={itemVariants}>
<NpmPackage />
</motion.div>
<motion.p
className="max-w-2xl px-1 font-mono text-gray-600 text-lg sm:text-xl dark:text-gray-300"
variants={itemVariants}
>
A modern CLI tool for scaffolding end-to-end type-safe
TypeScript projects with best practices and customizable
configurations
</motion.p>
<motion.div
className="mx-auto mt-2 w-full max-w-3xl sm:mt-3"
variants={itemVariants}
>
<CodeContainer />
</motion.div>
<motion.div variants={itemVariants}>
<ShinyText
text="Type-safe. Modern. Minimal. Fast."
speed={3}
className="font-mono text-gray-600 text-xs xs:text-sm sm:text-base dark:text-gray-400"
/>
</motion.div>
</div>
<p className="max-w-2xl px-1 font-mono text-gray-600 text-lg sm:text-xl dark:text-gray-300">
A modern CLI tool for scaffolding end-to-end type-safe TypeScript
projects with best practices and customizable configurations
</p>
<div className="mx-auto mt-1 w-full max-w-3xl sm:mt-2">
<CodeContainer />
</div>
<ShinyText
text="Type-safe. Modern. Minimal. Fast."
speed={3}
className="font-mono text-gray-600 text-xs xs:text-sm sm:text-base dark:text-gray-400"
/>
</div>
</div>
</div>
</motion.div>
<CustomizableSection />
<motion.div
className="w-full"
initial="hidden"
whileInView="visible"
viewport={{ once: true, amount: 0.2 }}
variants={sectionVariants}
>
<CustomizableSection />
</motion.div>
<div className="relative w-full pt-8 sm:pt-12">
<div className="relative mx-auto max-w-5xl">
<div className="flex items-center justify-center">
<div className="hidden w-1/3 items-center sm:flex">
<div className="h-px flex-grow bg-gradient-to-r from-transparent to-blue-500/40" />
<div className="h-2 w-2 rounded-full bg-blue-500/50" />
</div>
<motion.div
className="relative w-full pt-10 sm:pt-16"
initial="hidden"
whileInView="visible"
viewport={{ once: true, amount: 0.5 }}
variants={sectionVariants}
>
<div className="relative mx-auto max-w-5xl">
<div className="flex items-center justify-center">
<div className="hidden w-1/3 items-center sm:flex">
<div className="h-px flex-grow bg-gradient-to-r from-transparent via-blue-500/30 to-blue-500/50" />
<div className="h-2 w-2 rounded-full bg-blue-500/60 shadow-sm" />
</div>
<div className="px-4 sm:px-6">
<div className="flex h-7 w-7 items-center justify-center rounded-full border border-blue-500 bg-white sm:h-8 sm:w-8 dark:bg-gray-900">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-3.5 w-3.5 text-blue-500 sm:h-4 sm:w-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<title>Code Icon</title>
<path
fillRule="evenodd"
d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
<div className="px-4 sm:px-6">
<div className="flex h-8 w-8 items-center justify-center rounded-full border border-blue-500/80 bg-white shadow-md sm:h-9 sm:w-9 dark:border-blue-400/70 dark:bg-gray-900">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4 text-blue-500 sm:h-5 sm:w-5 dark:text-blue-400"
viewBox="0 0 20 20"
fill="currentColor"
>
<title>Code Icon</title>
<path
fillRule="evenodd"
d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</div>
</div>
<div className="hidden w-1/3 items-center sm:flex">
<div className="h-2 w-2 rounded-full bg-blue-500/60 shadow-sm" />
<div className="h-px flex-grow bg-gradient-to-l from-transparent via-blue-500/30 to-blue-500/50" />
</div>
</div>
<div className="hidden w-1/3 items-center sm:flex">
<div className="h-2 w-2 rounded-full bg-blue-500/50" />
<div className="h-px flex-grow bg-gradient-to-l from-transparent to-blue-500/40" />
</div>
<div className="mt-6 h-px w-full bg-gradient-to-r from-transparent via-blue-500/30 to-transparent sm:hidden" />
</div>
</motion.div>
<div className="mt-6 h-px w-full bg-blue-500/20 sm:hidden" />
</div>
</div>
<Testimonials />
</main>
<motion.div
className="w-full"
initial="hidden"
whileInView="visible"
viewport={{ once: true, amount: 0.15 }}
variants={sectionVariants}
>
<Testimonials />
</motion.div>
</main>
<Footer />
</>
);
}

40
apps/web/src/lib/constant.ts
View File

@@ -1,4 +1,28 @@
export const TECH_OPTIONS = {
api: [
{
id: "trpc",
name: "tRPC",
description: "End-to-end typesafe APIs",
icon: "🔗",
color: "from-blue-500 to-blue-700",
default: true,
},
{
id: "orpc",
name: "oRPC",
description: "Opinionated RPC framework",
icon: "🧩",
color: "from-indigo-400 to-indigo-600",
},
{
id: "none",
name: "No API",
description: "Skip API layer integration",
icon: "🚫",
color: "from-gray-400 to-gray-600",
},
],
frontend: [
{
id: "tanstack-router",
@@ -279,6 +303,14 @@ export const TECH_OPTIONS = {
color: "from-purple-500 to-purple-700",
default: false,
},
{
id: "turborepo",
name: "Turborepo",
description: "Monorepo build system",
icon: "🌀",
color: "from-gray-400 to-gray-700",
default: false,
},
],
examples: [
{
@@ -353,6 +385,7 @@ export const PRESET_TEMPLATES = [
examples: [],
git: "true",
install: "true",
api: "trpc",
},
},
{
@@ -373,6 +406,7 @@ export const PRESET_TEMPLATES = [
examples: [],
git: "true",
install: "true",
api: "trpc",
},
},
{
@@ -393,6 +427,7 @@ export const PRESET_TEMPLATES = [
examples: [],
git: "true",
install: "true",
api: "trpc",
},
},
{
@@ -409,10 +444,11 @@ export const PRESET_TEMPLATES = [
dbSetup: "turso",
auth: "true",
packageManager: "bun",
addons: ["pwa", "biome", "husky", "tauri", "starlight"],
addons: ["pwa", "biome", "husky", "tauri", "starlight", "turborepo"],
examples: ["todo", "ai"],
git: "true",
install: "true",
api: "trpc",
},
},
];
@@ -431,6 +467,7 @@ export type StackState = {
examples: string[];
git: string;
install: string;
api: string;
};
export const DEFAULT_STACK: StackState = {
@@ -447,4 +484,5 @@ export const DEFAULT_STACK: StackState = {
examples: [],
git: "true",
install: "true",
api: "trpc",
};