chore: support db

Author: zouhangwithsweet

.env

@@ -0,0 +1,7 @@
+# Environment variables declared in this file are automatically made available to Prisma.
+# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
+
+# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
+# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
+
+DATABASE_URL="file:./db/sqlite3.db"

app/auto-imports.d.ts

@@ -0,0 +1,3 @@
+import { PrismaClient } from '@prisma/client'
+
+export const prisma = new PrismaClient()

app/lib/db.ts

@@ -1,13 +1,23 @@
+import { prisma } from '@/lib/db'
+
 import { Welcome } from '../welcome/welcome'
 import type { Route } from './+types/home'
 
 export function meta(_: Route.MetaArgs) {
   return [
-    { title: 'New React Router App' },
-    { name: 'description', content: 'Welcome to React Router!' },
+    { title: 'fisand-remix' },
+    { name: 'description', content: 'Welcome to fisand remix!' },
   ]
 }
 
-export default function Home() {
-  return <Welcome />
+export async function loader() {
+  const users = await prisma.user.findMany()
+  return { users }
+}
+
+export default function Home({
+  loaderData,
+}: Route.ComponentProps) {
+  const author = loaderData.users?.[0]
+  return <Welcome author={author} />
 }

app/routes/home.tsx

@@ -1,9 +1,11 @@
+import type { User } from '@prisma/client'
+
 import { HeroGeometric } from '@/components/layout/HeroSection'
 
-export function Welcome() {
+export function Welcome({ author }: { author: User }) {
   return (
     <HeroGeometric
-      badge="Fisand template"
+      badge={`Fisand template created by ${author.name}`}
       title1="Simple design"
       title2="Built for efficiency"
     />

app/welcome/welcome.tsx

@@ -6,11 +6,13 @@
     "build": "react-router build",
     "dev": "react-router dev",
     "lint": "eslint . --fix",
+    "prisma:generate": "prisma generate",
     "start": "react-router-serve ./build/server/index.js",
     "typecheck": "react-router typegen && tsc"
   },
   "dependencies": {
     "@hookform/resolvers": "^4.1.2",
+    "@prisma/client": "6.4.1",
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-alert-dialog": "^1.1.6",
     "@radix-ui/react-aspect-ratio": "^1.1.2",
@@ -52,6 +54,7 @@
     "isbot": "^5.1.17",
     "lucide-react": "^0.477.0",
     "next-themes": "^0.4.4",
+    "prisma": "^6.4.1",
     "react": "^19.0.0",
     "react-day-picker": "8.10.1",
     "react-dom": "^19.0.0",

package.json

@@ -0,0 +1,19 @@
+-- CreateTable
+CREATE TABLE "User" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "email" TEXT NOT NULL,
+    "name" TEXT
+);
+
+-- CreateTable
+CREATE TABLE "Post" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "title" TEXT NOT NULL,
+    "content" TEXT,
+    "published" BOOLEAN NOT NULL DEFAULT false,
+    "authorId" INTEGER NOT NULL,
+    CONSTRAINT "Post_authorId_fkey" FOREIGN KEY ("authorId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");

pnpm-lock.yaml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (e.g., Git)
+provider = "sqlite"

prisma/db/sqlite3.db

@@ -0,0 +1,27 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
+}
+
+model User {
+  id    Int     @id @default(autoincrement())
+  email String  @unique
+  name  String?
+  posts Post[]
+}
+
+model Post {
+  id        Int     @id @default(autoincrement())
+  title     String
+  content   String?
+  published Boolean @default(false)
+  author    User    @relation(fields: [authorId], references: [id])
+  authorId  Int
+}

prisma/migrations/20250307145527_init/migration.sql

@@ -18,13 +18,13 @@ export default defineConfig({
       compiler: 'jsx',
       jsx: 'react',
       customCollections: {
-        'fisand-icons': FileSystemIconLoader(`${resolve(import.meta.dirname, 'src/assets/icons')}/`, svg =>
+        'fisand-icons': FileSystemIconLoader(`${resolve(import.meta.dirname, 'app/assets/icons')}/`, svg =>
           svg.replace(/^<svg /, '<svg fill="currentColor" ')),
       },
     }),
     AutoImport({
       imports: ['react'],
-      dts: './auto-imports.d.ts',
+      dts: './app/auto-imports.d.ts',
       resolvers: [
         IconsResolver({
           componentPrefix: 'Icon',