mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
feat: add authentication in native
This commit is contained in:
Aman Varshney
@@ -1,268 +1,395 @@
|
||||
import {
|
||||
AppWindow,
|
||||
Boxes,
|
||||
Component,
|
||||
Database,
|
||||
FastForward,
|
||||
Lock,
|
||||
Palette,
|
||||
ServerCog,
|
||||
Workflow,
|
||||
} from "lucide-react";
|
||||
import type { TechNode } from "./types";
|
||||
|
||||
export const technologies = [
|
||||
{
|
||||
name: "Bun",
|
||||
category: "core",
|
||||
angle: -25,
|
||||
icon: FastForward,
|
||||
color: "bg-yellow-100",
|
||||
textColor: "text-black",
|
||||
description: "Fast all-in-one JavaScript runtime",
|
||||
top: "top-[2px]",
|
||||
left: "left-[11rem]",
|
||||
},
|
||||
{
|
||||
name: "tRPC",
|
||||
category: "core",
|
||||
angle: 25,
|
||||
icon: Workflow,
|
||||
color: "bg-blue-600",
|
||||
textColor: "text-white",
|
||||
description: "End-to-end type-safe APIs",
|
||||
left: "left-[5rem]",
|
||||
},
|
||||
|
||||
{
|
||||
name: "TanStack Router",
|
||||
category: "frontend",
|
||||
angle: 30,
|
||||
icon: AppWindow,
|
||||
color: "bg-red-500",
|
||||
textColor: "text-white",
|
||||
description: "Type-safe routing",
|
||||
top: "top-[2px]",
|
||||
left: "left-[8.5rem]",
|
||||
},
|
||||
{
|
||||
name: "Tailwind CSS",
|
||||
category: "frontend",
|
||||
angle: 90,
|
||||
icon: Palette,
|
||||
color: "bg-sky-400",
|
||||
textColor: "text-white",
|
||||
description: "Utility-first CSS framework",
|
||||
},
|
||||
{
|
||||
name: "shadcn/ui",
|
||||
category: "frontend",
|
||||
angle: 150,
|
||||
icon: Component,
|
||||
color: "bg-gray-900",
|
||||
textColor: "text-white",
|
||||
description: "Re-usable components",
|
||||
left: "-left-[2rem]",
|
||||
},
|
||||
|
||||
{
|
||||
name: "Hono",
|
||||
category: "backend",
|
||||
angle: -150,
|
||||
icon: ServerCog,
|
||||
color: "bg-orange-500",
|
||||
textColor: "text-white",
|
||||
description: "Ultrafast web framework",
|
||||
left: "left-[0rem]",
|
||||
},
|
||||
{
|
||||
name: "Better-Auth",
|
||||
category: "backend",
|
||||
angle: -110,
|
||||
icon: Lock,
|
||||
color: "bg-indigo-600",
|
||||
textColor: "text-white",
|
||||
description: "Modern authentication solution",
|
||||
},
|
||||
{
|
||||
name: "Drizzle ORM",
|
||||
category: "backend",
|
||||
angle: -70,
|
||||
icon: Database,
|
||||
color: "bg-green-400",
|
||||
textColor: "text-black",
|
||||
description: "TypeScript ORM",
|
||||
left: "left-[4rem]",
|
||||
},
|
||||
{
|
||||
name: "Sqlite",
|
||||
category: "backend",
|
||||
angle: -30,
|
||||
icon: Boxes,
|
||||
color: "bg-gray-600",
|
||||
textColor: "text-white",
|
||||
description: "SQLite-compatible database engine",
|
||||
left: "left-[6rem]",
|
||||
},
|
||||
];
|
||||
|
||||
export const initialNodes: TechNode[] = [
|
||||
{
|
||||
id: "bun",
|
||||
type: "techNode",
|
||||
position: { x: 536, y: 204 },
|
||||
data: {
|
||||
label: "Bun",
|
||||
category: "core",
|
||||
description: "Fast all-in-one JavaScript runtime",
|
||||
isDefault: true,
|
||||
isActive: true,
|
||||
isStatic: true,
|
||||
export const TECH_OPTIONS = {
|
||||
frontend: [
|
||||
{
|
||||
id: "tanstack-router",
|
||||
name: "TanStack Router",
|
||||
description: "Modern type-safe router for React",
|
||||
icon: "🌐",
|
||||
color: "from-blue-400 to-blue-600",
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "tanstack",
|
||||
type: "techNode",
|
||||
position: { x: 362, y: 296 },
|
||||
data: {
|
||||
label: "TanStack Router",
|
||||
category: "frontend",
|
||||
description: "Type-safe routing",
|
||||
isDefault: true,
|
||||
isActive: true,
|
||||
isStatic: true,
|
||||
group: "router",
|
||||
{
|
||||
id: "react-router",
|
||||
name: "React Router",
|
||||
description: "Declarative routing for React",
|
||||
icon: "🧭",
|
||||
color: "from-cyan-400 to-cyan-600",
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "tailwind",
|
||||
type: "techNode",
|
||||
position: { x: 494, y: 379 },
|
||||
data: {
|
||||
label: "Tailwind CSS",
|
||||
category: "frontend",
|
||||
description: "Utility-first CSS framework",
|
||||
isDefault: true,
|
||||
isActive: true,
|
||||
isStatic: true,
|
||||
{
|
||||
id: "native",
|
||||
name: "React Native",
|
||||
description: "Expo with NativeWind",
|
||||
icon: "📱",
|
||||
color: "from-purple-400 to-purple-600",
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "shadcn",
|
||||
type: "techNode",
|
||||
position: { x: 358, y: 486 },
|
||||
data: {
|
||||
label: "shadcn/ui",
|
||||
category: "frontend",
|
||||
description: "Re-usable components",
|
||||
isDefault: true,
|
||||
isActive: true,
|
||||
isStatic: true,
|
||||
{
|
||||
id: "none",
|
||||
name: "No Frontend",
|
||||
description: "API-only backend",
|
||||
icon: "⚙️",
|
||||
color: "from-gray-400 to-gray-600",
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "hono",
|
||||
type: "techNode",
|
||||
position: { x: 700, y: 325 },
|
||||
data: {
|
||||
label: "Hono",
|
||||
category: "backend",
|
||||
],
|
||||
runtime: [
|
||||
{
|
||||
id: "bun",
|
||||
name: "Bun",
|
||||
description: "Fast JavaScript runtime & toolkit",
|
||||
icon: "🥟",
|
||||
color: "from-amber-400 to-amber-600",
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "node",
|
||||
name: "Node.js",
|
||||
description: "JavaScript runtime environment",
|
||||
icon: "🟩",
|
||||
color: "from-green-400 to-green-600",
|
||||
},
|
||||
],
|
||||
backendFramework: [
|
||||
{
|
||||
id: "hono",
|
||||
name: "Hono",
|
||||
description: "Ultrafast web framework",
|
||||
isDefault: true,
|
||||
isActive: true,
|
||||
isStatic: true,
|
||||
group: "backend",
|
||||
icon: "⚡",
|
||||
color: "from-blue-500 to-blue-700",
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "sqlite",
|
||||
type: "techNode",
|
||||
position: { x: 544, y: 532 },
|
||||
data: {
|
||||
label: "SQLite",
|
||||
category: "database",
|
||||
description: "SQLite-compatible database",
|
||||
isDefault: true,
|
||||
isActive: true,
|
||||
group: "database",
|
||||
{
|
||||
id: "elysia",
|
||||
name: "Elysia",
|
||||
description: "TypeScript web framework",
|
||||
icon: "🦊",
|
||||
color: "from-purple-500 to-purple-700",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "postgres",
|
||||
type: "techNode",
|
||||
position: { x: 318, y: 579 },
|
||||
data: {
|
||||
label: "PostgreSQL",
|
||||
category: "database",
|
||||
],
|
||||
database: [
|
||||
{
|
||||
id: "sqlite",
|
||||
name: "SQLite",
|
||||
description: "File-based SQL database",
|
||||
icon: "🗃️",
|
||||
color: "from-blue-400 to-cyan-500",
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "postgres",
|
||||
name: "PostgreSQL",
|
||||
description: "Advanced SQL database",
|
||||
isDefault: false,
|
||||
isActive: false,
|
||||
group: "database",
|
||||
icon: "🐘",
|
||||
color: "from-indigo-400 to-indigo-600",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "no-database",
|
||||
type: "techNode",
|
||||
position: { x: 420, y: 710 },
|
||||
data: {
|
||||
label: "No Database",
|
||||
category: "database",
|
||||
description: "Skip database setup",
|
||||
isDefault: false,
|
||||
isActive: false,
|
||||
group: "database",
|
||||
{
|
||||
id: "none",
|
||||
name: "No Database",
|
||||
description: "Skip database integration",
|
||||
icon: "🚫",
|
||||
color: "from-gray-400 to-gray-600",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "drizzle",
|
||||
type: "techNode",
|
||||
position: { x: 559, y: 651 },
|
||||
data: {
|
||||
label: "Drizzle",
|
||||
category: "orm",
|
||||
],
|
||||
orm: [
|
||||
{
|
||||
id: "drizzle",
|
||||
name: "Drizzle",
|
||||
description: "TypeScript ORM",
|
||||
isDefault: true,
|
||||
isActive: true,
|
||||
group: "orm",
|
||||
icon: "💧",
|
||||
color: "from-cyan-400 to-cyan-600",
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "prisma",
|
||||
name: "Prisma",
|
||||
description: "Next-gen ORM",
|
||||
icon: "◮",
|
||||
color: "from-purple-400 to-purple-600",
|
||||
},
|
||||
],
|
||||
auth: [
|
||||
{
|
||||
id: "true",
|
||||
name: "Better Auth",
|
||||
description: "Simple authentication",
|
||||
icon: "🔐",
|
||||
color: "from-green-400 to-green-600",
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "false",
|
||||
name: "No Auth",
|
||||
description: "Skip authentication",
|
||||
icon: "🔓",
|
||||
color: "from-red-400 to-red-600",
|
||||
},
|
||||
],
|
||||
turso: [
|
||||
{
|
||||
id: "true",
|
||||
name: "Turso",
|
||||
description: "SQLite cloud database",
|
||||
icon: "☁️",
|
||||
color: "from-pink-400 to-pink-600",
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
id: "false",
|
||||
name: "No Turso",
|
||||
description: "Skip Turso integration",
|
||||
icon: "🚫",
|
||||
color: "from-gray-400 to-gray-600",
|
||||
default: true,
|
||||
},
|
||||
],
|
||||
prismaPostgres: [
|
||||
{
|
||||
id: "true",
|
||||
name: "Prisma PostgreSQL",
|
||||
description: "Set up PostgreSQL with Prisma",
|
||||
icon: "🐘",
|
||||
color: "from-indigo-400 to-indigo-600",
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
id: "false",
|
||||
name: "Skip Prisma PostgreSQL",
|
||||
description: "Basic Prisma setup",
|
||||
icon: "🚫",
|
||||
color: "from-gray-400 to-gray-600",
|
||||
default: true,
|
||||
},
|
||||
],
|
||||
packageManager: [
|
||||
{
|
||||
id: "npm",
|
||||
name: "npm",
|
||||
description: "Default package manager",
|
||||
icon: "📦",
|
||||
color: "from-red-500 to-red-700",
|
||||
},
|
||||
{
|
||||
id: "pnpm",
|
||||
name: "pnpm",
|
||||
description: "Fast, disk space efficient",
|
||||
icon: "🚀",
|
||||
color: "from-orange-500 to-orange-700",
|
||||
},
|
||||
{
|
||||
id: "bun",
|
||||
name: "bun",
|
||||
description: "All-in-one toolkit",
|
||||
icon: "🥟",
|
||||
color: "from-amber-500 to-amber-700",
|
||||
default: true,
|
||||
},
|
||||
],
|
||||
addons: [
|
||||
{
|
||||
id: "pwa",
|
||||
name: "PWA",
|
||||
description: "Progressive Web App",
|
||||
icon: "📱",
|
||||
color: "from-blue-500 to-blue-700",
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
id: "tauri",
|
||||
name: "Tauri",
|
||||
description: "Desktop app support",
|
||||
icon: "🖥️",
|
||||
color: "from-amber-500 to-amber-700",
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
id: "biome",
|
||||
name: "Biome",
|
||||
description: "Linting & formatting",
|
||||
icon: "🌿",
|
||||
color: "from-green-500 to-green-700",
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
id: "husky",
|
||||
name: "Husky",
|
||||
description: "Git hooks & lint-staged",
|
||||
icon: "🐶",
|
||||
color: "from-purple-500 to-purple-700",
|
||||
default: false,
|
||||
},
|
||||
],
|
||||
examples: [
|
||||
{
|
||||
id: "todo",
|
||||
name: "Todo Example",
|
||||
description: "Simple todo application",
|
||||
icon: "✅",
|
||||
color: "from-indigo-500 to-indigo-700",
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
id: "ai",
|
||||
name: "AI Example",
|
||||
description: "AI integration example using AI SDK",
|
||||
icon: "🤖",
|
||||
color: "from-purple-500 to-purple-700",
|
||||
default: false,
|
||||
},
|
||||
],
|
||||
git: [
|
||||
{
|
||||
id: "true",
|
||||
name: "Git",
|
||||
description: "Initialize Git repository",
|
||||
icon: "📝",
|
||||
color: "from-gray-500 to-gray-700",
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "false",
|
||||
name: "No Git",
|
||||
description: "Skip Git initialization",
|
||||
icon: "🚫",
|
||||
color: "from-red-400 to-red-600",
|
||||
},
|
||||
],
|
||||
install: [
|
||||
{
|
||||
id: "true",
|
||||
name: "Install Dependencies",
|
||||
description: "Install packages automatically",
|
||||
icon: "📥",
|
||||
color: "from-green-400 to-green-600",
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "false",
|
||||
name: "Skip Install",
|
||||
description: "Skip dependency installation",
|
||||
icon: "⏭️",
|
||||
color: "from-yellow-400 to-yellow-600",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const PRESET_TEMPLATES = [
|
||||
{
|
||||
id: "default",
|
||||
name: "Default Stack",
|
||||
description: "Standard web app with TanStack Router, Bun, Hono and SQLite",
|
||||
stack: {
|
||||
projectName: "my-better-t-app",
|
||||
frontend: ["tanstack-router"],
|
||||
runtime: "bun",
|
||||
backendFramework: "hono",
|
||||
database: "sqlite",
|
||||
orm: "drizzle",
|
||||
auth: "true",
|
||||
turso: "false",
|
||||
prismaPostgres: "false",
|
||||
packageManager: "bun",
|
||||
addons: [],
|
||||
examples: [],
|
||||
git: "true",
|
||||
install: "true",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "prisma",
|
||||
type: "techNode",
|
||||
position: { x: 707, y: 675 },
|
||||
data: {
|
||||
label: "Prisma",
|
||||
category: "orm",
|
||||
description: "Next-generation ORM",
|
||||
isDefault: false,
|
||||
isActive: false,
|
||||
group: "orm",
|
||||
id: "native-app",
|
||||
name: "Mobile App",
|
||||
description: "React Native with Expo and SQLite database",
|
||||
stack: {
|
||||
projectName: "my-better-t-app",
|
||||
frontend: ["native"],
|
||||
runtime: "bun",
|
||||
backendFramework: "hono",
|
||||
database: "sqlite",
|
||||
orm: "drizzle",
|
||||
auth: "true",
|
||||
turso: "false",
|
||||
prismaPostgres: "false",
|
||||
packageManager: "bun",
|
||||
addons: [],
|
||||
examples: [],
|
||||
git: "true",
|
||||
install: "true",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "better-auth",
|
||||
type: "techNode",
|
||||
position: { x: 770, y: 502 },
|
||||
data: {
|
||||
label: "Better-Auth",
|
||||
category: "auth",
|
||||
description: "Modern authentication",
|
||||
isDefault: true,
|
||||
isActive: true,
|
||||
group: "auth",
|
||||
id: "api-only",
|
||||
name: "API Only",
|
||||
description: "Backend API with Hono and PostgreSQL",
|
||||
stack: {
|
||||
projectName: "my-better-t-app",
|
||||
frontend: ["none"],
|
||||
runtime: "bun",
|
||||
backendFramework: "hono",
|
||||
database: "postgres",
|
||||
orm: "drizzle",
|
||||
auth: "false",
|
||||
turso: "false",
|
||||
prismaPostgres: "false",
|
||||
packageManager: "bun",
|
||||
addons: [],
|
||||
examples: [],
|
||||
git: "true",
|
||||
install: "true",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "no-auth",
|
||||
type: "techNode",
|
||||
position: { x: 950, y: 621 },
|
||||
data: {
|
||||
label: "No Auth",
|
||||
category: "auth",
|
||||
description: "No authentication needed",
|
||||
isDefault: false,
|
||||
isActive: false,
|
||||
group: "auth",
|
||||
id: "full-featured",
|
||||
name: "Full Featured",
|
||||
description: "Complete setup with all the bells and whistles",
|
||||
stack: {
|
||||
projectName: "my-better-t-app",
|
||||
frontend: ["tanstack-router", "native"],
|
||||
runtime: "bun",
|
||||
backendFramework: "hono",
|
||||
database: "sqlite",
|
||||
orm: "drizzle",
|
||||
auth: "true",
|
||||
turso: "true",
|
||||
prismaPostgres: "false",
|
||||
packageManager: "bun",
|
||||
addons: ["pwa", "biome", "husky", "tauri"],
|
||||
examples: ["todo", "ai"],
|
||||
git: "true",
|
||||
install: "true",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export type StackState = {
|
||||
projectName: string;
|
||||
frontend: string[];
|
||||
runtime: string;
|
||||
backendFramework: string;
|
||||
database: string;
|
||||
orm: string | null;
|
||||
auth: string;
|
||||
turso: string;
|
||||
prismaPostgres: string;
|
||||
packageManager: string;
|
||||
addons: string[];
|
||||
examples: string[];
|
||||
git: string;
|
||||
install: string;
|
||||
};
|
||||
|
||||
export const DEFAULT_STACK: StackState = {
|
||||
projectName: "my-better-t-app",
|
||||
frontend: ["tanstack-router"],
|
||||
runtime: "bun",
|
||||
backendFramework: "hono",
|
||||
database: "sqlite",
|
||||
orm: "drizzle",
|
||||
auth: "true",
|
||||
turso: "false",
|
||||
prismaPostgres: "false",
|
||||
packageManager: "bun",
|
||||
addons: [],
|
||||
examples: [],
|
||||
git: "true",
|
||||
install: "true",
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user