From 520d96b37bec1aaf8956cbe15e89b8277d339a67 Mon Sep 17 00:00:00 2001 From: Thomas Date: Thu, 24 Jul 2025 08:18:57 +0200 Subject: [PATCH 1/6] Add a (Base for) Home Page --- README.md | 10 +++ src/app/(home)/page.tsx | 138 +++++++++++++++++++++++++++++++++++++++- 2 files changed, 146 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index bf383cb..959dbde 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,16 @@ To apply the same base UI in a project, run the following command: npx shadcn@latest add "https://v0.dev/chat/b/b_fFQhsfElqQi" ``` +#### 🏠 Homepage + +The homepage layout was also crafted using v0. The generation prompt for it was: + +```text +A minimal homepage for a Google Drive clone named T4S Drive. It should be just a +marketing page with a "get started" button. A gradient would be nice, please use +black and dark neutral grays. +``` + ### 🧰 Learn More about the T3 Stack To explore more about the [T3 Stack](https://create.t3.gg/), refer to the diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 74ab28a..24a40b3 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -1,3 +1,137 @@ -export default async function HomePage() { - return

Welcome to your Drive

; +import { Cloud, Shield, Users, Zap } from "lucide-react"; +import Link from "next/link"; +import { Button } from "~/components/ui/button"; + +export default function HomePage() { + return ( +
+ {/* Navigation */} + + + {/* Hero Section */} +
+
+

+ Your files, +
+ + everywhere + +

+ +

+ Store, sync, and share your files with T4S Drive. Access your + documents from any device, anywhere in the world. +

+ +
+ +
+ +

+ Free 15GB storage • No credit card required +

+
+
+ + {/* Features Section */} +
+
+
+
+ +
+

Secure Storage

+

+ Your files are encrypted and protected with enterprise-grade + security. +

+
+ +
+
+ +
+

Lightning Fast

+

+ Upload and download files at blazing speeds with our global CDN. +

+
+ +
+
+ +
+

Easy Sharing

+

+ Share files and folders with anyone, with granular permission + controls. +

+
+
+
+ + {/* Footer */} +
+
+
+ + + © 2024 T4S Drive. All rights reserved. + +
+
+ + Privacy + + + Terms + + + Support + +
+
+
+
+ ); } From 225ab05e4ef8a2a4569c77bb47828c6eda53f6ea Mon Sep 17 00:00:00 2001 From: Thomas Date: Fri, 25 Jul 2025 07:57:54 +0200 Subject: [PATCH 2/6] Handle 'Get Started' Button --- src/app/(home)/page.tsx | 18 +++++++++++++++--- src/app/drive/page.tsx | 3 +++ src/app/sign-in/page.tsx | 26 ++++++++++++++++++++++++++ 3 files changed, 44 insertions(+), 3 deletions(-) create mode 100644 src/app/drive/page.tsx create mode 100644 src/app/sign-in/page.tsx diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 24a40b3..cbfc081 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -1,5 +1,8 @@ +import { auth } from "@clerk/nextjs/server"; import { Cloud, Shield, Users, Zap } from "lucide-react"; import Link from "next/link"; +import { redirect } from "next/navigation"; + import { Button } from "~/components/ui/button"; export default function HomePage() { @@ -49,14 +52,23 @@ export default function HomePage() { documents from any device, anywhere in the world.

-
+
{ + "use server"; + const session = await auth(); + if (!session.userId) return redirect("/sign-in"); + redirect("/drive"); + }} + > -
+

Free 15GB storage • No credit card required diff --git a/src/app/drive/page.tsx b/src/app/drive/page.tsx new file mode 100644 index 0000000..b36b498 --- /dev/null +++ b/src/app/drive/page.tsx @@ -0,0 +1,3 @@ +export default function DrivePage() { + return

; +} diff --git a/src/app/sign-in/page.tsx b/src/app/sign-in/page.tsx new file mode 100644 index 0000000..01f7ab3 --- /dev/null +++ b/src/app/sign-in/page.tsx @@ -0,0 +1,26 @@ +import { SignInButton } from "@clerk/nextjs"; + +export default function HomePage() { + return ( +
+
+
+

+ Your files, +
+ + everywhere + +

+ +

+ Store, sync, and share your files with T4S Drive. Access your + documents from any device, anywhere in the world. +

+ + +
+
+
+ ); +} From 33e7ce39801b54daa56f5f575fc1c1b3c701a026 Mon Sep 17 00:00:00 2001 From: Thomas Date: Fri, 25 Jul 2025 08:13:57 +0200 Subject: [PATCH 3/6] Handle Redirect to Root Folder --- src/app/drive/page.tsx | 15 +++++++++++++-- src/app/sign-in/page.tsx | 11 ++++++++++- src/server/db/queries.ts | 10 +++++++++- 3 files changed, 32 insertions(+), 4 deletions(-) diff --git a/src/app/drive/page.tsx b/src/app/drive/page.tsx index b36b498..8e82090 100644 --- a/src/app/drive/page.tsx +++ b/src/app/drive/page.tsx @@ -1,3 +1,14 @@ -export default function DrivePage() { - return
; +import { auth } from "@clerk/nextjs/server"; +import { redirect } from "next/navigation"; + +import * as queries from "~/server/db/queries"; + +export default async function DrivePage() { + const session = await auth(); + if (!session.userId) return redirect("/sign-in"); + + const rootFolder = await queries.getRootFolderForUser(session.userId); + if (!rootFolder) return redirect("/drive/create-root-folder"); + + return redirect(`/f/${rootFolder.id}`); } diff --git a/src/app/sign-in/page.tsx b/src/app/sign-in/page.tsx index 01f7ab3..7c2f54c 100644 --- a/src/app/sign-in/page.tsx +++ b/src/app/sign-in/page.tsx @@ -1,5 +1,7 @@ import { SignInButton } from "@clerk/nextjs"; +import { Button } from "~/components/ui/button"; + export default function HomePage() { return (
@@ -18,7 +20,14 @@ export default function HomePage() { documents from any device, anywhere in the world.

- +
diff --git a/src/server/db/queries.ts b/src/server/db/queries.ts index c8aed30..9bb5e4f 100644 --- a/src/server/db/queries.ts +++ b/src/server/db/queries.ts @@ -1,6 +1,6 @@ import "server-only"; // Ensure this file is only run on the server -import { eq } from "drizzle-orm"; +import { and, eq, isNull } from "drizzle-orm"; import { db } from "~/server/db"; import { @@ -27,6 +27,14 @@ export async function getAllParentsForFolder(folderId: number) { return parents; } +export async function getRootFolderForUser(ownerId: string) { + const folders = await db + .select() + .from(folderSchema) + .where(and(eq(folderSchema.ownerId, ownerId), isNull(folderSchema.parent))); + return folders[0]; +} + export function getAllFolders(folderId: number) { return db .select() From 4c0883ccb950b7bffff0ade41d85011e55a0fdf5 Mon Sep 17 00:00:00 2001 From: Thomas Date: Fri, 25 Jul 2025 08:38:59 +0200 Subject: [PATCH 4/6] Onboard New Users --- src/app/drive/page.tsx | 17 ++++++++++++++++- src/server/db/mutations.ts | 23 ++++++++++++++++++++++- 2 files changed, 38 insertions(+), 2 deletions(-) diff --git a/src/app/drive/page.tsx b/src/app/drive/page.tsx index 8e82090..1c780a8 100644 --- a/src/app/drive/page.tsx +++ b/src/app/drive/page.tsx @@ -1,14 +1,29 @@ import { auth } from "@clerk/nextjs/server"; import { redirect } from "next/navigation"; +import { Button } from "~/components/ui/button"; import * as queries from "~/server/db/queries"; +import * as mutations from "~/server/db/mutations"; export default async function DrivePage() { const session = await auth(); if (!session.userId) return redirect("/sign-in"); const rootFolder = await queries.getRootFolderForUser(session.userId); - if (!rootFolder) return redirect("/drive/create-root-folder"); + + if (!rootFolder) { + return ( +
{ + "use server"; + const rootFolderId = await mutations.onboardUser(session.userId); + return redirect(`/f/${rootFolderId}`); + }} + > + +
+ ); + } return redirect(`/f/${rootFolder.id}`); } diff --git a/src/server/db/mutations.ts b/src/server/db/mutations.ts index bfedb51..6d05caf 100644 --- a/src/server/db/mutations.ts +++ b/src/server/db/mutations.ts @@ -1,5 +1,26 @@ import { db } from "~/server/db"; -import { type File, files_table as filesSchema } from "~/server/db/schema"; +import { + type File, + folders_table as folderSchema, + files_table as filesSchema, +} from "~/server/db/schema"; + +export async function onboardUser(userId: string) { + const [rootFolder] = await db + .insert(folderSchema) + .values({ name: "root", parent: null, ownerId: userId }) + .$returningId(); + + const rootFolderId = rootFolder!.id; + + await db.insert(folderSchema).values([ + { name: "Trash", parent: rootFolderId, ownerId: userId }, + { name: "Shared", parent: rootFolderId, ownerId: userId }, + { name: "Documents", parent: rootFolderId, ownerId: userId }, + ]); + + return rootFolderId; +} export function createFile( file: Pick, From 1e49db94eb1f3c3377fe7e9a7f2d3de6050adcac Mon Sep 17 00:00:00 2001 From: Thomas Date: Sat, 26 Jul 2025 15:55:45 +0200 Subject: [PATCH 5/6] Better Folder Structure --- src/app/{ => (home)}/drive/page.tsx | 10 +- src/app/(home)/layout.tsx | 129 +++++++++++++++++++++++ src/app/(home)/page.tsx | 156 +++------------------------- src/app/(home)/sign-in/page.tsx | 15 +++ src/app/sign-in/page.tsx | 35 ------- 5 files changed, 168 insertions(+), 177 deletions(-) rename src/app/{ => (home)}/drive/page.tsx (72%) create mode 100644 src/app/(home)/layout.tsx create mode 100644 src/app/(home)/sign-in/page.tsx delete mode 100644 src/app/sign-in/page.tsx diff --git a/src/app/drive/page.tsx b/src/app/(home)/drive/page.tsx similarity index 72% rename from src/app/drive/page.tsx rename to src/app/(home)/drive/page.tsx index 1c780a8..98b4e3f 100644 --- a/src/app/drive/page.tsx +++ b/src/app/(home)/drive/page.tsx @@ -2,8 +2,8 @@ import { auth } from "@clerk/nextjs/server"; import { redirect } from "next/navigation"; import { Button } from "~/components/ui/button"; -import * as queries from "~/server/db/queries"; import * as mutations from "~/server/db/mutations"; +import * as queries from "~/server/db/queries"; export default async function DrivePage() { const session = await auth(); @@ -20,7 +20,13 @@ export default async function DrivePage() { return redirect(`/f/${rootFolderId}`); }} > - + ); } diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx new file mode 100644 index 0000000..58e3313 --- /dev/null +++ b/src/app/(home)/layout.tsx @@ -0,0 +1,129 @@ +import { Cloud, Shield, Users, Zap } from "lucide-react"; +import Link from "next/link"; + +export default function HomePage({ children }: { children: React.ReactNode }) { + return ( +
+ {/* Navigation */} + + + {/* Hero Section */} +
+
+

+ Your files, +
+ + everywhere + +

+ +

+ Store, sync, and share your files with T4S Drive. Access your + documents from any device, anywhere in the world. +

+ + {children} + +

+ Free 15GB storage • No credit card required +

+
+
+ + {/* Features Section */} +
+
+
+
+ +
+

Secure Storage

+

+ Your files are encrypted and protected with enterprise-grade + security. +

+
+ +
+
+ +
+

Lightning Fast

+

+ Upload and download files at blazing speeds with our global CDN. +

+
+ +
+
+ +
+

Easy Sharing

+

+ Share files and folders with anyone, with granular permission + controls. +

+
+
+
+ + {/* Footer */} +
+
+
+ + + © 2024 T4S Drive. All rights reserved. + +
+
+ + Privacy + + + Terms + + + Support + +
+
+
+
+ ); +} diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index cbfc081..88456b6 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -1,149 +1,25 @@ import { auth } from "@clerk/nextjs/server"; -import { Cloud, Shield, Users, Zap } from "lucide-react"; -import Link from "next/link"; import { redirect } from "next/navigation"; import { Button } from "~/components/ui/button"; export default function HomePage() { return ( -
- {/* Navigation */} - - - {/* Hero Section */} -
-
-

- Your files, -
- - everywhere - -

- -

- Store, sync, and share your files with T4S Drive. Access your - documents from any device, anywhere in the world. -

- -
{ - "use server"; - const session = await auth(); - if (!session.userId) return redirect("/sign-in"); - redirect("/drive"); - }} - > - -
- -

- Free 15GB storage • No credit card required -

-
-
- - {/* Features Section */} -
-
-
-
- -
-

Secure Storage

-

- Your files are encrypted and protected with enterprise-grade - security. -

-
- -
-
- -
-

Lightning Fast

-

- Upload and download files at blazing speeds with our global CDN. -

-
- -
-
- -
-

Easy Sharing

-

- Share files and folders with anyone, with granular permission - controls. -

-
-
-
- - {/* Footer */} -
-
-
- - - © 2024 T4S Drive. All rights reserved. - -
-
- - Privacy - - - Terms - - - Support - -
-
-
-
+
{ + "use server"; + const session = await auth(); + if (!session.userId) return redirect("/sign-in"); + redirect("/drive"); + }} + > + +
); } diff --git a/src/app/(home)/sign-in/page.tsx b/src/app/(home)/sign-in/page.tsx new file mode 100644 index 0000000..ae558ad --- /dev/null +++ b/src/app/(home)/sign-in/page.tsx @@ -0,0 +1,15 @@ +import { SignInButton } from "@clerk/nextjs"; + +import { Button } from "~/components/ui/button"; + +export default function HomePage() { + return ( + + ); +} diff --git a/src/app/sign-in/page.tsx b/src/app/sign-in/page.tsx deleted file mode 100644 index 7c2f54c..0000000 --- a/src/app/sign-in/page.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { SignInButton } from "@clerk/nextjs"; - -import { Button } from "~/components/ui/button"; - -export default function HomePage() { - return ( -
-
-
-

- Your files, -
- - everywhere - -

- -

- Store, sync, and share your files with T4S Drive. Access your - documents from any device, anywhere in the world. -

- - -
-
-
- ); -} From c6251ffe170a872a2ffbd032a9ff61dd58e9bd2f Mon Sep 17 00:00:00 2001 From: Thomas Date: Sat, 26 Jul 2025 15:55:53 +0200 Subject: [PATCH 6/6] Update README.md --- README.md | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 959dbde..d68667b 100644 --- a/README.md +++ b/README.md @@ -118,7 +118,7 @@ The database and UI are now connected, some improvements to make: - [x] Change folders to link components, remove all client state - [x] Clean up the database and data fetching patterns -- [ ] Real homepage +- [x] Real homepage ### 📝 Note from 7-4-2025 @@ -134,7 +134,13 @@ can be approved: ## 🎯 Fun Follow Ups -### Folder deletion - -Make sure to fetch all of the folders that have it as a parent, and their -children too. +- [ ] **Folder creation**
Make a server action that takes a name and + parentId, and creates a folder with that name and parentId (don't forget + to set the ownerId). +- [ ] **Folder deletion**
Make sure to fetch all of the folders that have + it as a parent, and their children too. +- [ ] **Access Control**
Check if user is owner before showing the folder + page. +- [ ] **Make a "file view" page** +- [ ] **Access control** +- [ ] **Toasts notifications**