How to vibe codeDropbox

Prerequisites

• Node.jsfree

  Required runtime for Next.js and frontend tooling.

• GitHubfree

  Source code repository and deployment bridge.

• Cloudflare accountfree

  Object storage (R2) and edge deployment hosting.

AI coding tools

• Claude Code

  Primary agentic coding tool for scaffolding the Next.js app, database schema, and R2 upload flows from the terminal.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js application with Tailwind CSS and configure Turso SQLite with Drizzle ORM to track users, folders, and file metadata.

   Create a new Next.js TypeScript project with Tailwind CSS. Set up Drizzle ORM connected to a Turso SQLite database. Define schema tables for `users`, `folders` (id, userId, name, parentId, createdAt), and `files` (id, userId, folderId, name, size, mimeType, r2Key, createdAt). Ensure all foreign keys and indexes are correctly configured.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication Integration

   Implement local authentication using better-auth to secure user sessions and tie files and folders to individual users.

   Install and configure better-auth in the Next.js application using Turso as the adapter. Set up email/password sign-up and login routes, protect dashboard layouts, and ensure user session state is correctly passed to frontend components.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Cloudflare R2 Storage Integration

   Configure S3-compatible Cloudflare R2 bindings and build secure upload/download utilities for file binary data.

   Configure an AWS SDK S3 client pointing to Cloudflare R2. Write backend utility functions to generate pre-signed upload URLs and pre-signed download URLs. Implement a multipart upload endpoint in Next.js API routes to handle files up to several gigabytes securely.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04File Browser & Folder Tree UI

   Build a responsive web dashboard mimicking Dropbox's file manager with folder navigation, breadcrumbs, and list/grid views.

   Build a dashboard UI in Next.js using Tailwind CSS that replicates a cloud file manager. Include a sidebar for navigation, a breadcrumb trail for folder paths, and a main content area displaying folders and files. Implement client-side state for navigating into subfolders, creating new folders, and deleting items.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Drag-and-Drop Uploads & Progress

   Implement drag-and-drop file uploading with real-time progress bars connecting directly to R2 pre-signed URLs.

   Add drag-and-drop file upload capabilities to the dashboard view. When files are dropped, request a pre-signed upload URL from the backend, upload directly to Cloudflare R2 with progress tracking via Axios or fetch XHR, and save the file metadata to the Turso database upon completion.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06File Sharing & Public Links

   Enable secure file sharing via public links with optional expiration times and view-only permissions.

   Implement a sharing feature where users can generate a unique public link for any file. Create a public download route (`/share/[token]`) that checks token validity and expiration before streaming the file from Cloudflare R2 to the recipient.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Dropbox