Drive Tutorial - Building a Google Drive Clone

A Google Drive Clone built with the latest tools and technologies of the Web Development industry. 🗂️☁️

This project is inspired by a YouTube tutorial of Theo. Check out this link to watch the full video.

📖 About This Project

This project utilizes the T3 Stack and was initialized with create-t3-app. It demonstrates a modern, high-performance approach to application development through seamless integration of cutting-edge tools and technologies.

For more information about the technologies used in this project, consult the official documentation linked below. Additional support is available via the T3 Community Discord.

• Next.js
• Drizzle
• Tailwind CSS

🎨 UI Scaffolding

The base UI for this project was created using v0, a tool that enables fast UI generation through vibe coding. An example of this approach can be seen in Theo’s walkthrough on YouTube.

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:

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, refer to the following resources:

• Official Documentation
• Learning Resources — A collection of awesome tutorials

Visit the create-t3-app GitHub repository for feedback and contributions.

🚀 Getting Started

🛠️ Environment Variables

To configure the environment variables, copy the example file and update the values as needed:

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 as the primary database, with Drizzle ORM for type-safe, efficient data access and schema management.

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:

pnpm run dev

🚧 Development Logbook

Tracking progress on key features and tasks for the project.

• 🛢️ Set up the database and define data models
• 🔗 Sync folder open state with the URL
• 🔐 Implement user authentication
• 📁 Enable file upload functionality
• 📊 Add analytics tracking

Click to expand the logbook

📝 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

📝 Note from 6-4-2025

The database and UI are now connected, some improvements to make:

• Change folders to link components, remove all client state
• Clean up the database and data fetching patterns
• Real homepage

📝 Note from 7-4-2025

Uploading a file to 'uploadthing' works, things that can be approved:

• Add "ownership" to files and folders
• Upload files to the right folder
• Delete file button
• Allow files that are not images to be uploaded

🎯 Fun Follow Ups

• 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