UploadThing File Upload Demo 📤

A modern file upload application built with Next.js and UploadThing, featuring a clean UI and seamless file management.

✨ Features

Feature	Description
🎨 Modern UI	Beautiful interface with Shadcn/ui components
📤 Drag & Drop	Easy drag and drop file uploads
🖼️ Image Preview	Built-in image preview and management
📱 Responsive	Fully responsive design for all devices
⚡ Fast Upload	Quick uploads powered by UploadThing
🔒 Secure Handling	Secure and reliable file handling
🗄️ Database Storage	Efficient storage with Prisma

🚀 Quick Start

# Clone the repository
git clone https://github.com/yourusername/uploads-uploadthing.git

# Navigate to the project
cd uploads-uploadthing

# Install dependencies
npm install

# Set up environment variables
cp .env

# Set up the database
npx prisma generate
npx prisma db push

# Start development server
npm run dev

Visit http://localhost:3000 to see your application

🛠️ Tech Stack

Click to expand tech stack details

• Framework: Next.js 15
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• File Upload: UploadThing
• Database: Neon
• Database ORM: Prisma
• Form Handling: React Hook Form
• Type Safe Server Actions: Next Safe Action
• Validation: Zod
• Icons: Lucide React
• Toast Notifications: Sonner

📸 Screenshots

Upload Form

Upload Form Completed

🔐 Environment Variables

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

UPLOADTHING_TOKEN=
DATABASE_URL=""