Database Setup

.env.example

@@ -9,9 +9,9 @@
 # When adding additional environment variables, the schema in "/src/env.js"
 # should be updated accordingly.
 
-# Drizzle
-DATABASE_URL="file:./db.sqlite"
-
-# Example:
-# SERVERVAR="foo"
-# NEXT_PUBLIC_CLIENTVAR="bar"
+# SingleStore
+SINGLESTORE_USER="username"
+SINGLESTORE_PASSWORD="password"
+SINGLESTORE_HOST="localhost"
+SINGLESTORE_PORT="1000"
+SINGLESTORE_DATABASE="database"

README.md

@@ -48,6 +48,39 @@ Visit the
 [create-t3-app GitHub repository](https://github.com/t3-oss/create-t3-app) for
 feedback and contributions.
 
+## 🚀 Getting Started
+
+### 🛠️ Environment Variables
+
+To configure the environment variables, copy the example file and update the
+values as needed:
+
+```bash
+cp .env.example .env
+```
+
+Open the `.env` file and fill in the required fields based on the project’s
+needs (e.g., database credentials, API keys, etc.).
+
+### 🗄️ Database Setup
+
+This project uses [SingleStore](https://www.singlestore.com/) as the primary
+database, with [Drizzle ORM](https://orm.drizzle.team) for type-safe, efficient
+data access and schema management.
+
+```bash
+pnpm run db:push       # Push the schema to the database
+pnpm run db:studio     # Launch Drizzle Studio
+```
+
+### 🕹️ Development Server
+
+To start the local development server:
+
+```bash
+pnpm run dev
+```
+
 ## 🚧 Development Logbook
 
 Tracking progress on key features and tasks for the project.
@@ -56,3 +89,12 @@ Tracking progress on key features and tasks for the project.
 - [ ] 🔗 Sync folder open state with the URL
 - [ ] 🔐 Implement user authentication
 - [ ] 📁 Enable file upload functionality
+
+### 📝 Note from 5-28-2025
+
+Just finished up the database connection, next steps:
+
+- [ ] Update schema to show files and folders
+- [ ] Manually insert examples
+- [ ] Render them in the UI
+- [ ] Push and make sure it all works

drizzle.config.ts

@@ -4,9 +4,14 @@ import { env } from "~/env";
 
 export default {
   schema: "./src/server/db/schema.ts",
-  dialect: "sqlite",
+  dialect: "singlestore",
   dbCredentials: {
-    url: env.DATABASE_URL,
+    host: env.SINGLESTORE_HOST,
+    port: env.SINGLESTORE_PORT,
+    user: env.SINGLESTORE_USER,
+    password: env.SINGLESTORE_PASSWORD,
+    database: env.SINGLESTORE_DATABASE,
+    ssl: {},
   },
-  tablesFilter: ["drive-tutorial_*"],
+  tablesFilter: ["drive_tutorial_*"],
 } satisfies Config;

package.json

@@ -27,6 +27,7 @@
     "clsx": "^2.1.1",
     "drizzle-orm": "^0.41.0",
     "lucide-react": "^0.511.0",
+    "mysql2": "^3.14.1",
     "next": "^15.2.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

src/app/file-row.tsx

@@ -0,0 +1,57 @@
+import { FileIcon, Folder as FolderIcon } from "lucide-react";
+
+import type { File, Folder } from "~/lib/mock-data";
+
+export function FileRow(props: { file: File }) {
+  const { file } = props;
+
+  return (
+    <li
+      key={file.id}
+      className="hover:bg-gray-750 border-b border-gray-700 px-6 py-4"
+    >
+      <div className="grid grid-cols-12 items-center gap-4">
+        <div className="col-span-6 flex items-center">
+          <a
+            href={file.url}
+            className="flex items-center text-gray-100 hover:text-blue-400"
+            target="_blank"
+          >
+            <FileIcon className="mr-3" size={20} />
+            {file.name}
+          </a>
+        </div>
+        <div className="col-span-3 text-gray-400">{"file"}</div>
+        <div className="col-span-3 text-gray-400">{file.size}</div>
+      </div>
+    </li>
+  );
+}
+
+export function FolderRow(props: {
+  folder: Folder;
+  onFolderClick: () => void;
+}) {
+  const { folder, onFolderClick } = props;
+
+  return (
+    <li
+      key={folder.id}
+      className="hover:bg-gray-750 border-b border-gray-700 px-6 py-4"
+    >
+      <div className="grid grid-cols-12 items-center gap-4">
+        <div className="col-span-6 flex items-center">
+          <button
+            onClick={onFolderClick}
+            className="flex items-center text-gray-100 hover:text-blue-400"
+          >
+            <FolderIcon className="mr-3" size={20} />
+            {folder.name}
+          </button>
+        </div>
+        <div className="col-span-3 text-gray-400"></div>
+        <div className="col-span-3 text-gray-400"></div>
+      </div>
+    </li>
+  );
+}