🚀 Drag & Deploy

Deploy your projects to GitHub with a simple drag-and-drop! No CLI, no git commands, just drag, drop, and deploy.

Drag & Deploy is a beautiful web application that automates the entire deployment workflow. Simply upload a ZIP or TAR file, and watch as your code gets automatically extracted, committed, and pushed to your GitHub repository.

---

✨ Features

• 🖱️ Intuitive Drag & Drop Interface - Upload files with a simple drag-and-drop
• 📦 Automatic File Extraction - Supports ZIP and TAR archives
• 🔄 Automated Git Workflow - Handles init, add, commit, and push automatically
• 🐳 Docker Ready - Run anywhere with Docker
• 🔐 Secure Authentication - Uses GitHub Personal Access Tokens
• ⚡ Fast & Reliable - Built with Next.js 16 and TypeScript
• 🎨 Beautiful UI - Modern, responsive design with Tailwind CSS

---

🎯 How It Works

1. Drag & Drop your project ZIP file onto the upload area
2. The app extracts your files automatically
3. Files are copied to your configured repository
4. Git operations are automated (add, commit, push)
5. Your code is deployed to GitHub! 🎉

---

🚀 Quick Start

Prerequisites

• Node.js 20+ (or Docker)
• GitHub Personal Access Token with repo scope
• A GitHub repository to deploy to

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd drag-and-deploy

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env file in the root directory:

   GITHUB_TOKEN=your_github_personal_access_token
   GIT_USER=your_github_username
   GIT_EMAIL=your_email@example.com
   REPO_URL=github.com/username/repository-name

4. Run the development server

   npm run dev

5. Open your browser

   Navigate to http://localhost:3000

---

🐳 Docker Deployment

Build the Image

docker build -t drag-and-deploy .

Run the Container

docker run -d -p 3000:3000 \
  -e GITHUB_TOKEN=your_token \
  -e GIT_USER=your_username \
  -e GIT_EMAIL=your_email@example.com \
  -e REPO_URL=github.com/username/repo.git \
  -v /path/to/repo:/app/repo \
  --name drag-and-deploy \
  drag-and-deploy

Or using a .env file:

docker run -d -p 3000:3000 \
  --env-file .env \
  -v /path/to/repo:/app/repo \
  --name drag-and-deploy \
  drag-and-deploy

Volume Mount

Make sure to mount your repository directory to /app/repo in the container:

-v /path/to/your/repo:/app/repo

---

🔑 GitHub Token Setup

1. Go to GitHub Settings → Developer settings → Personal access tokens → Tokens (classic)

2. Click Generate new token (classic)

3. Select the following scopes:

   • ✅ repo - Full control of private repositories (includes public repos too)

4. Copy the token and use it as your GITHUB_TOKEN

⚠️ Important: Keep your token secure and never commit it to version control!

---

📋 Environment Variables

Variable	Description	Required
GITHUB_TOKEN	GitHub Personal Access Token	✅ Yes
GIT_USER	Your GitHub username	✅ Yes
GIT_EMAIL	Your email address	✅ Yes
REPO_URL	Repository URL (format: github.com/username/repo)	✅ Yes

---

🛠️ Development

Tech Stack

• Framework: Next.js 16
• Language: TypeScript
• Styling: Tailwind CSS
• File Upload: react-dropzone
• Archive Extraction: extract-zip
• Runtime: Node.js

Available Scripts

# Development server
npm run dev

# Production build
npm run build

# Start production server
npm start

# Lint code
npm run lint

---

📁 Project Structure

drag-and-deploy/
├── app/
│   ├── api/
│   │   └── deploy/
│   │       └── route.ts      # Deployment API endpoint
│   ├── page.tsx              # Main upload page
│   ├── layout.tsx            # App layout
│   └── globals.css           # Global styles
├── Dockerfile                # Docker configuration
├── package.json              # Dependencies
└── README.md                 # This file

---

🔍 How It Works Under the Hood

1. File Upload: Client uploads ZIP/TAR file via drag-and-drop
2. Server Processing:
   • Saves file to /tmp
   • Extracts archive to temporary directory
   • Copies files to repository path (/app/repo)
3. Git Operations:
   • Initializes git repository (if needed)
   • Configures user identity
   • Sets up remote origin
   • Stages all changes (git add .)
   • Commits with message "Automated deploy"
   • Pushes to GitHub
4. Cleanup: Removes temporary files

---

🐛 Troubleshooting

"Permission denied" (403 Error)

• ✅ Check that your GitHub token has repo scope
• ✅ Verify the token hasn't expired
• ✅ Ensure the token's owner has write access to the repository

"Author identity unknown"

• ✅ Make sure GIT_USER and GIT_EMAIL are set correctly
• ✅ The app automatically sets these, but verify your environment variables

"No commits to push"

• ✅ Ensure your ZIP file contains actual files (not empty)
• ✅ Check that files were extracted correctly

Git not found (Docker)

• ✅ The Dockerfile includes git installation - rebuild the image if needed

---

🤝 Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

---

📝 License

This project is open source and available under the MIT License.

---

⭐ Show Your Support

If you find this project helpful, please give it a star!

---

Made with ❤️ using Next.js and TypeScript