A modern, secure, and user-friendly file storage application built with Next.js 15, featuring seamless file management capabilities and a beautiful user interface.
Droply is a robust file storage solution that allows users to securely upload, manage, and organize their files. Built with modern web technologies and best practices, it provides a seamless experience for file management with features like file starring, trash management, and folder organization.
- Secure user authentication powered by Clerk
- Protected routes and API endpoints
- Role-based access control
- Drag-and-drop file uploads
- File organization with folders
- Star important files for quick access
- Trash system with restore capabilities
- Bulk file operations
- File preview support
- Modern, responsive design using HeroUI components
- Dark/Light theme support
- Intuitive navigation
- Real-time upload progress
- Interactive file management
- Next.js 15: React framework for production-grade applications
- HeroUI: Comprehensive UI component library
- TailwindCSS: Utility-first CSS framework
- Framer Motion: Animation library for smooth transitions
- Next.js API Routes: Serverless API endpoints
- Neon: Serverless PostgreSQL database
- Drizzle ORM: Type-safe database toolkit
- ImageKit: Cloud-based image storage and optimization
- Clerk: Full-featured authentication and user management
- TypeScript: Static type checking
- ESLint & Prettier: Code quality and formatting
- Drizzle Kit: Database migration and management tools
droply/
├── app/ # Next.js app directory
│ ├── api/ # API routes
│ ├── dashboard/ # Dashboard pages
│ └── auth/ # Authentication pages
├── components/ # React components
│ ├── ui/ # Reusable UI components
│ └── features/ # Feature-specific components
├── lib/ # Utility functions and configurations
│ └── db/ # Database configuration and schema
├── public/ # Static assets
└── styles/ # Global styles
- Node.js 18.0 or later
- npm or yarn package manager
- Clerk account for authentication
- Neon PostgreSQL database
- ImageKit account for file storage
-
Clone the repository:
git clone https://github.com/yourusername/droply.git cd droply -
Install dependencies:
npm install
-
Set up environment variables: Create a
.env.localfile in the root directory with the following variables:# Clerk Authentication NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key CLERK_SECRET_KEY=your_clerk_secret_key # ImageKit NEXT_PUBLIC_IMAGEKIT_PUBLIC_KEY=your_imagekit_public_key IMAGEKIT_PRIVATE_KEY=your_imagekit_private_key NEXT_PUBLIC_IMAGEKIT_URL_ENDPOINT=your_imagekit_url_endpoint # Clerk URLs NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard # Fallback URLs NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/ NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/ # App URLs NEXT_PUBLIC_APP_URL=http://localhost:3000 # Database - Neon PostgreSQL DATABASE_URL=your_neon_database_url
-
Start the development server:
npm run dev
-
Open http://localhost:3000 in your browser
Droply uses Drizzle ORM for database operations. Available commands:
# Push schema changes to database
npm run db:push
# Generate migration files
npm run db:generate
# Run migrations
npm run db:migrate
# Open Drizzle Studio
npm run db:studio-
Create a production build:
npm run build
-
Start the production server:
npm start
POST /api/files/upload: Upload new filesPOST /api/files/[fileId]/star: Star/unstar a filePOST /api/files/[fileId]/trash: Move file to trashPOST /api/files/[fileId]/delete: Permanently delete filePOST /api/files/empty-trash: Empty trash
POST /api/folders/create: Create new folder
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.