Drive-Store

A Google Drive clone built with Next.js, featuring folder navigation and file browsing. Following a tutorial by Theo.

Features

• Folder hierarchy with breadcrumb navigation
• File and folder listing with type and size columns
• Upload button (placeholder)
• Responsive dark-themed UI
• Database-backed storage using Drizzle ORM

Technologies

• Next.js 15 (App Router)
• React 19
• TypeScript
• Drizzle ORM with SingleStore/Turso
• Tailwind CSS 4
• Lucide React (icons)
• Zod (validation)

How to Run

pnpm install
pnpm dev

Environment variables (see .env.example):

• Database connection string for SingleStore/Turso

Scripts:

• pnpm dev - Development server with Turbopack
• pnpm build - Production build
• pnpm db:push - Push schema to database
• pnpm db:studio - Open Drizzle Studio

Project Structure

drive-store/
├── src/
│   ├── app/
│   │   ├── page.tsx                 - Root redirect to /f/1
│   │   ├── layout.tsx               - Root layout
│   │   ├── drive-contents.tsx       - File/folder listing component
│   │   ├── file-row.tsx             - File/folder row components
│   │   └── f/[folderId]/page.tsx    - Dynamic folder route
│   ├── components/ui/
│   │   └── button.tsx               - UI button component
│   ├── lib/
│   │   ├── utils.ts                 - Utility functions
│   │   └── mock-data.ts            - Sample data for development
│   ├── server/db/
│   │   ├── index.ts                 - Database connection
│   │   ├── schema.ts               - Files and folders tables
│   │   └── queries.ts              - Database queries
│   └── env.js                       - Environment validation
├── drizzle.config.ts
├── next.config.js
└── package.json