Swift Video Convert

A privacy-first, client-side video format converter that allows users to convert videos instantly without uploading files to any server. Supports MP4, MKV, MOV, AVI, and WEBM formats with bulk conversion capabilities.

🚀 Features

• Privacy-First: All processing happens in the browser - no files are uploaded to any server
• Multiple Formats: Supports MP4, MKV, MOV, AVI, WEBM formats
• Bulk Conversion: Convert up to 10 files at once
• ZIP Downloads: Download all converted files as a single ZIP archive
• File Renaming: Rename output files before downloading (extension preserved)
• Mobile Responsive: Works seamlessly on all device sizes
• Real-time Progress: Visual progress indicators during conversion
• No Storage: Files are never stored on any server

📁 Project Structure

swift-video/
├── public/                 # Static assets
│   └── robots.txt
├── src/
│   ├── components/         # Reusable UI components
│   │   ├── ui/            # Shadcn/ui components
│   │   │   └── [buttons, dialogs, inputs, etc.]
│   │   └── VideoConverter/ # Main video conversion module
│   │       ├── FileUpload.tsx        # Handles file selection/drag&drop
│   │       ├── ConversionOptions.tsx # Format/resolution selection
│   │       ├── ConvertButton.tsx     # Conversion trigger button
│   │       ├── DownloadSection.tsx   # Download controls and rename UI
│   │       └── VideoConverter.tsx    # Main component orchestrator
│   ├── hooks/              # Custom React hooks
│   │   ├── use-toast.ts    # Toast notifications
│   │   └── use-mobile.ts   # Mobile detection
│   ├── lib/                # Utility functions
│   │   └── utils.ts        # Class name merging utility
│   ├── pages/              # Page components
│   │   ├── Index.tsx       # Home page
│   │   └── NotFound.tsx    # 404 page
│   ├── App.tsx            # Main application component
│   ├── main.tsx           # Application entry point
│   └── index.css          # Global styles
├── package.json           # Dependencies and scripts
├── vite.config.ts         # Vite build configuration
├── tailwind.config.ts     # Tailwind CSS configuration
├── tsconfig.json          # TypeScript configuration
└── README.md            # This file

🔧 Tech Stack

• Framework: React (v18) with TypeScript
• Styling: Tailwind CSS with shadcn/ui components
• Build Tool: Vite
• Icons: Lucide React
• Animations: Framer Motion
• State Management: React Hooks
• ZIP Creation: JSZip
• Testing: Vitest

🛠️ Installation & Running

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Steps

1. Clone the repository:

   git clone https://github.com/harshammg/SwiftVideo.git
   cd SwiftVideo

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open your browser and go to http://localhost:8080

For AI IDE Users

Simply describe what you want to do in natural language, such as:

• "Run the program"
• "Start the development server"
• "Launch the video converter app"
• "Open the app in browser"

📋 Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build locally
• npm run lint - Run ESLint
• npm run test - Run unit tests

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Commit your changes (git commit -m 'Add some amazing feature')
5. Push to the branch (git push origin feature/amazing-feature)
6. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

⚠️ Disclaimer

This is a client-side application where all processing happens in the browser. While we ensure privacy by not storing files on any server, the conversion process relies on simulated processing for demonstration purposes. Actual video conversion would require additional client-side processing libraries in a production environment.

# Step 1: Clone the repository using the project's Git URL.
git clone <YOUR_GIT_URL>

# Step 2: Navigate to the project directory.
cd <YOUR_PROJECT_NAME>

# Step 3: Install the necessary dependencies.
npm i

# Step 4: Start the development server with auto-reloading and an instant preview.
npm run dev

Edit a file directly in GitHub

• Navigate to the desired file(s).
• Click the "Edit" button (pencil icon) at the top right of the file view.
• Make your changes and commit the changes.

Use GitHub Codespaces

• Navigate to the main page of your repository.
• Click on the "Code" button (green button) near the top right.
• Select the "Codespaces" tab.
• Click on "New codespace" to launch a new Codespace environment.
• Edit files directly within the Codespace and commit and push your changes once you're done.

What technologies are used for this project?

This project is built with:

• Vite
• TypeScript
• React
• shadcn-ui
• Tailwind CSS