Droply

Droply is a personal cloud storage platform for uploading, organizing, and managing your files and images. Built with Next.js 15, it offers a fast, secure, and intuitive experience with features like folder management, starring favorites, and a built-in trash system.

Features

• File Uploads — Drag-and-drop or browse to upload images and files (up to 5MB). Supports JPG, PNG, GIF, WebP, and more.
• Folder Management — Create custom folders and navigate a hierarchical file structure to keep everything organized.
• Star Favorites — Mark important files as starred for quick access.
• Trash & Restore — Soft-delete files to trash with the option to restore or permanently empty the bin.
• User Authentication — Secure sign-up and sign-in powered by Clerk with protected routes.
• User Profile — View and manage your account details directly from the dashboard.
• Dark / Light Theme — Toggle between themes with system preference support.
• Responsive Design — Fully responsive UI that works across desktop, tablet, and mobile.

Tech Stack

Layer	Technology
Framework	Next.js 15 (App Router, Turbopack)
Language	TypeScript
UI Components	HeroUI
Styling	Tailwind CSS 4
Animations	Framer Motion
Authentication	Clerk
Database	Neon PostgreSQL (serverless)
ORM	Drizzle ORM
File Storage	ImageKit
Form Handling	React Hook Form + Zod
Icons	Lucide React

Getting Started

Prerequisites

• Node.js 18+
• A Neon PostgreSQL database
• A Clerk application (for auth keys)
• An ImageKit account (for file storage)

1. Clone the repository

git clone https://github.com/your-username/droply.git
cd droply

2. Install dependencies

npm install

3. Configure environment variables

Create a .env file in the project root with the following variables:

# Database
DATABASE_URL=your_neon_database_url

# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

# ImageKit
NEXT_PUBLIC_IMAGEKIT_URL_ENDPOINT=your_imagekit_url_endpoint
IMAGEKIT_PUBLIC_KEY=your_imagekit_public_key
IMAGEKIT_PRIVATE_KEY=your_imagekit_private_key

4. Set up the database

Generate and run the Drizzle migrations:

npm run db:generate
npm run db:migrate

5. Start the development server

npm run dev

Open http://localhost:3000 in your browser.

Available Scripts

Command	Description
npm run dev	Start the dev server with Turbopack
npm run build	Build for production
npm run start	Start the production server
npm run lint	Run ESLint
npm run db:generate	Generate Drizzle migration files
npm run db:migrate	Run pending database migrations
npm run db:push	Push schema changes directly to the database
npm run db:studio	Open Drizzle Studio to browse your data

Project Structure

droply/
├── app/
│   ├── api/              # API routes (files, folders, uploads, imagekit-auth)
│   ├── dashboard/        # Dashboard page (authenticated)
│   ├── sign-in/          # Sign-in page
│   ├── sign-up/          # Sign-up page
│   ├── layout.tsx        # Root layout (Clerk + theme providers)
│   ├── page.tsx          # Landing page
│   └── providers.tsx     # Client-side providers
├── components/           # Reusable UI components
│   ├── DashboardContent.tsx
│   ├── FileList.tsx
│   ├── FileUploadForm.tsx
│   ├── FolderNavigation.tsx
│   ├── Navbar.tsx
│   └── ...
├── lib/
│   ├── db/
│   │   ├── schema.ts     # Drizzle database schema
│   │   ├── index.ts      # Database client
│   │   └── migrate.ts    # Migration runner
│   └── utils.ts          # Utility functions
├── schemas/              # Zod validation schemas
├── drizzle/              # Generated SQL migrations
├── middleware.ts          # Clerk auth middleware & route protection
└── drizzle.config.ts     # Drizzle Kit configuration