Dropbox

Prerequisites

• Node.jsfree

  Required runtime for modern full-stack web development frameworks.

• GitHubfree

  Source control and deployment pipeline integration.

AI coding tools

• Claude Code

  Unmatched agentic execution for scaffolding full-stack applications, writing complex database schemas, and iterating through file upload streams.

• Cursor

  Excellent for fine-tuning the Tailwind CSS layout, drag-and-drop file upload zones, and tree view components.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js application with Tailwind CSS, shadcn/ui, and configure the Supabase database schema for users, folders, files, and sharing links.

   Create a new Next.js project using App Router, TypeScript, and Tailwind CSS. Install shadcn/ui components including buttons, dropdown-menus, dialogs, input fields, and tables. Set up Drizzle ORM connected to a Supabase PostgreSQL instance. Define the database schema with tables for users, folders (supporting hierarchical nested paths via parent_id), files (storing filename, file_size, mime_type, storage_path, version_number, uploader_id, and timestamps), and shared_links (storing file_id, token, password_hash, expires_at). Configure Supabase Auth for email/password authentication. Build the foundational layout with a responsive sidebar navigation (Home, My Files, Shared, Recent, Deleted) and top search/user profile bar.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02File Manager UI and Folder Navigation

   Build the core file explorer interface mimicking Dropbox's web layout with breadcrumbs, list/grid view toggles, and folder drill-down.

   Build the main file manager view in Next.js using the app router. Create a dynamic route for folder navigation ([folderId]). The UI should support both a list view and a grid view of files and folders. Include breadcrumb navigation reflecting the current folder path, a button to create new folders via a modal dialog, and contextual dropdown menus for each file/folder item (Rename, Move, Delete, Share, Download). Implement file sorting by name, size, and modified date. Fetch data dynamically from Supabase based on the current user and folder hierarchy.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Chunked File Uploads and Cloud Storage Integration

   Implement robust file upload handling with progress tracking and storage integration using S3-compatible object storage (Cloudflare R2).

   Implement file upload functionality supporting multi-gigabyte files with chunked uploads or direct presigned URLs to Cloudflare R2 (S3-compatible object storage). Create an upload queue component in the bottom right corner showing progress bars, upload speed, estimated time remaining, and cancel buttons. When an upload completes, record the file metadata in the PostgreSQL files table. Handle edge cases such as duplicate filenames by appending version numbers or unique suffixes. Ensure proper error handling and retry logic for failed chunk transmissions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04File Preview and Document Viewer

   Add preview capabilities for common file types including images, text, PDFs, and videos directly within the web application.

   Build a file preview modal or dedicated viewing page that opens when clicking a file in the file manager. Support inline rendering for images (png, jpg, svg), plain text and markdown files, PDFs (using a React PDF viewer library), and video/audio files with standard HTML5 media controls. For unsupported files, display a clean download card with file details (size, type, owner, upload date). Add an action toolbar inside the preview modal allowing users to download, share, or delete the file directly from the view.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Secure Link Sharing and Permissions

   Implement secure public file sharing with optional password protection, expiration dates, and access revocation.

   Create a secure link sharing feature. When a user clicks 'Share' on any file or folder, open a dialog allowing them to generate a public link with optional password protection and expiration dates (1 day, 7 days, 30 days, or never). Store shared link configurations in the database. Build a public access route (/s/[token]) that validates the expiration and prompts for the password if required. If authenticated, render the shared file preview and provide a direct download button. Include a management view in the user dashboard to list and revoke all active shared links.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Version History and Soft Deletes (Trash)

   Add file versioning support on overwrite and a trash/recovery system for deleted items.

   Implement file version history and a soft-delete trash system. When a file is uploaded with the same name in the same folder, increment its version number and retain the previous storage object in R2, linking it in a file_versions table. Build a 'Version History' modal accessible from a file's context menu that lists past versions with timestamps and a 'Restore' action. For deletions, move files and folders to a soft-delete state (is_deleted = true, deleted_at = NOW()). Create a 'Deleted files' sidebar view where users can either permanently delete items or restore them to their original location.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Polish, Error Handling, and Deployment

   Perform end-to-end testing, error boundary wrapping, UI polish, and deploy the application to Cloudflare.

   Polish the entire application UI to match a clean, minimalist aesthetic inspired by Dropbox and modern SaaS design. Add loading skeletons for file lists, toast notifications for actions (file uploaded, link copied, folder created), and robust error boundaries. Verify mobile responsiveness across desktop, tablet, and mobile viewports. Prepare the project configuration for deployment on Cloudflare Workers/Pages with environment variables properly typed and secured. Test all auth flows, database RLS policies, and R2 bucket permissions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Dropbox