Kirimase Init 2. drizzle, postgres, postgres.js

.env

@@ -0,0 +1 @@
+DATABASE_URL=postgres://postgres:postgres@localhost:5432/{DB_NAME}

drizzle.config.ts

@@ -0,0 +1,11 @@
+import type { Config } from "drizzle-kit";
+import { env } from "@/lib/env.mjs";
+
+export default {
+  schema: "./src/lib/db/schema",
+  out: "./src/lib/db/migrations",
+  driver: "pg",
+  dbCredentials: {
+    connectionString: env.DATABASE_URL,
+  }
+} satisfies Config;

kirimase.config.json

@@ -0,0 +1,16 @@
+{
+  "hasSrc": true,
+  "packages": [
+    "drizzle"
+  ],
+  "preferredPackageManager": "bun",
+  "t3": false,
+  "alias": "@",
+  "analytics": true,
+  "rootPath": "src/",
+  "componentLib": null,
+  "driver": "pg",
+  "provider": "postgresjs",
+  "orm": "drizzle",
+  "auth": null
+}

package.json

@@ -6,22 +6,39 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "db:generate": "drizzle-kit generate:pg",
+    "db:migrate": "tsx src/lib/db/migrate.ts",
+    "db:drop": "drizzle-kit drop",
+    "db:pull": "drizzle-kit introspect:pg",
+    "db:studio": "drizzle-kit studio",
+    "db:check": "drizzle-kit check:pg"
   },
   "dependencies": {
+    "@t3-oss/env-nextjs": "^0.9.2",
+    "drizzle-orm": "^0.30.2",
+    "drizzle-zod": "^0.5.1",
+    "lucide-react": "^0.358.0",
+    "nanoid": "^5.0.6",
+    "next": "14.1.3",
+    "postgres": "^3.4.3",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.1.3"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "dotenv": "^16.4.5",
+    "drizzle-kit": "^0.20.14",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.3",
+    "pg": "^8.11.3",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.1.3"
+    "tsx": "^4.7.1",
+    "typescript": "^5"
   }
-}
+}

src/app/(app)/dashboard/page.tsx

@@ -0,0 +1,10 @@
+export default function Home() {
+  return (
+    <main>
+      <h1 className="font-semibold text-2xl">Home</h1>
+      <p className="my-2">
+        Wow, that was easy. Now it&apos;s your turn. Building something cool!
+      </p>
+    </main>
+  );
+}

src/app/(app)/layout.tsx

@@ -0,0 +1,15 @@
+import Navbar from "@/components/Navbar";
+import Sidebar from "@/components/Sidebar";
+export default async function AppLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return ( <main><div className="flex h-screen">
+<Sidebar />
+<main className="flex-1 md:p-8 pt-2 p-8 overflow-y-auto">
+<Navbar />
+{children}
+</main>
+</div></main> )
+}

src/app/globals.css

@@ -1,33 +1,76 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
   }
 }
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
   }
 }