VideoSaver Frontend 🎥

A modern, responsive web application for downloading videos from multiple social media platforms including YouTube, Instagram, Facebook, TikTok, and X (Twitter).

✨ Features

🎯 Core Functionality

Multi-Platform Support: Download videos from YouTube, Instagram, Facebook, TikTok, and X
Format Selection: Choose between video (MP4) and audio (MP3) downloads
Quality Options: Multiple resolution and bitrate options available
Real-time Preview: See video thumbnails, titles, and duration before downloading

🎨 User Experience

Modern UI/UX: Clean, intuitive interface with glassmorphism design
Responsive Design: Optimized for desktop, tablet, and mobile devices
Dark Theme: Eye-friendly dark mode with gradient accents
Smooth Animations: GSAP-powered animations for enhanced user experience
Download History: Keep track of your downloaded videos locally

🚀 Performance

Fast Processing: Optimized API calls and efficient data handling
Client-side Caching: Reduced server load with smart caching strategies
Progressive Enhancement: Works without JavaScript for basic functionality

🛠️ Technology Stack

Frontend Framework

Vanilla JavaScript (ES6 Modules)
HTML5 with semantic markup
CSS3 with custom properties and modern features

UI/UX Libraries

GSAP - Professional-grade animations
Lucide Icons - Beautiful, consistent iconography
EmailJS - Contact form functionality
Custom CSS - Glassmorphism and modern design patterns

Build & Deployment

Vercel - Serverless deployment platform
Static Site - No build process required
Progressive Web App features

🚀 Quick Start

Prerequisites

Modern web browser (Chrome 70+, Firefox 65+, Safari 12+)
Internet connection
Backend API running (see videosaver-backend)

Local Development

Clone the repository

git clone https://github.com/yourusername/videosaver-frontend.git
cd videosaver-frontend

Serve locally

# Using Python
python -m http.server 8080

# Using Node.js
npx serve .

# Using PHP
php -S localhost:8080

Open in browser
```
http://localhost:8080
```

Environment Configuration

The frontend automatically detects the backend URL from the data-backend-url attribute in index.html:

<body data-backend-url="https://videosaver-backend.onrender.com">

For local development, update this to:

<body data-backend-url="http://localhost:10000">

📁 Project Structure

videosaver-frontend/
├── index.html              # Main application page
├── app.js                  # Core application logic
├── style.css              # Main stylesheet
├── nav.js                 # Navigation functionality
├── history.js             # Download history management
├── history.html           # History page
├── youtube-browser.js     # YouTube-specific fallbacks
├── vercel.json           # Deployment configuration
├── sitemap-new.xml       # SEO sitemap
├── robots.txt            # Search engine directives
├── images/               # Static assets
│   ├── cloud.svg         # Favicon and logo
│   └── ...               # Other images
└── README.md             # This file

🎯 Supported Platforms

Platform	Status	Features Available
YouTube	⚠️ Limited	Quality selection, metadata
Instagram	✅ Active	Posts, Reels, Stories*
Facebook	✅ Active	Videos, Reels
TikTok	✅ Active	Videos, audio extraction
X/Twitter	✅ Active	Videos, GIFs

*Stories and private content may require authentication

🔧 Configuration

Backend Integration

The frontend communicates with the VideoSaver backend API. Configure the backend URL in index.html:

<body data-backend-url="YOUR_BACKEND_URL">

Features Toggle

You can enable/disable certain features by modifying the data attributes:

<!-- Enable YouTube browser fallback -->
<body data-youtube-fallback-apis="true">

<!-- Custom API endpoints -->
<body data-custom-endpoints="/api/v2">

🎨 Customization

Theming

The application uses CSS custom properties for easy theming. Modify variables in style.css:

:root {
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --accent: #a855f7;
  --bg-dark: #020617;
  --text-main: #f8fafc;
  /* ... other variables */
}

Adding New Platforms

Add platform detection in app.js:

function detectPlatform(url) {
  if (url.includes('newplatform.com')) return 'newplatform';
  // ... existing code
}

Update the UI to show the new platform in the supported list

Custom Styling

The application uses a modular CSS approach. Add custom styles:

/* Custom button variant */
.btn-custom {
  background: linear-gradient(135deg, #your-color1, #your-color2);
  /* ... other styles */
}

📱 Progressive Web App

The application includes PWA features:

Responsive Design: Works on all device sizes
Fast Loading: Optimized assets and minimal dependencies
Offline Capability: Basic functionality works without internet*

*Full offline functionality requires backend integration

🔒 Security Features

Input Validation: URL sanitization and validation
XSS Protection: Proper content escaping
CORS Handling: Secure cross-origin requests
No Sensitive Data Storage: History stored locally only

🐛 Troubleshooting

Common Issues

Video not downloading

Check if the URL is from a supported platform
Ensure the video is public and accessible
Try refreshing the page and retrying

Backend connection errors

Verify the backend URL in data-backend-url
Check if the backend server is running
Ensure CORS is properly configured on the backend

JavaScript errors

Check browser console for specific error messages
Ensure all script dependencies are loaded
Verify browser compatibility

Debug Mode

Enable debug logging by adding to browser console:

localStorage.setItem('debug', 'true');
location.reload();

📈 Performance Optimization

Best Practices Implemented

Lazy Loading: Images and non-critical resources
Minification: CSS and JavaScript optimization
Caching: Browser and CDN caching strategies
Compression: Gzip compression via Vercel

Monitoring

Core Web Vitals: Optimized for Google's performance metrics
Lighthouse Score: 90+ performance rating
Bundle Size: < 100KB total payload

🤝 Contributing

We welcome contributions! Please follow these steps:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development Guidelines

Follow the existing code style
Test on multiple browsers and devices
Update documentation for new features
Ensure backward compatibility

📜 License

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

🚀 Deployment

Vercel (Recommended)

Connect Repository
```
vercel --prod
```
Environment Variables
- Set BACKEND_URL in Vercel dashboard
- Configure custom domains if needed

Other Platforms

Netlify

npm install -g netlify-cli
netlify deploy --prod --dir .

GitHub Pages

# Enable GitHub Pages in repository settings
# Select source branch (main/gh-pages)

📞 Support

Issues: GitHub Issues
Discussions: GitHub Discussions
Email: support@videosaver.example

🎉 Acknowledgments

GSAP for smooth animations
Lucide for beautiful icons
Vercel for hosting platform
Open Source Community for inspiration and tools

Made with ❤️ by the VideoSaver Team

Live Demo • Backend API • Report Bug

Name		Name	Last commit message	Last commit date
images		images
scripts		scripts
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
app.js		app.js
apple-touch-icon.png		apple-touch-icon.png
favicon-192x192.png		favicon-192x192.png
favicon-48x48.png		favicon-48x48.png
favicon.ico		favicon.ico
history.html		history.html
history.js		history.js
index.html		index.html
nav.js		nav.js
robots.txt		robots.txt
sitemap-new.xml		sitemap-new.xml
style.css		style.css
vercel.json		vercel.json
youtube-browser.js		youtube-browser.js

Latest commit

History

Folders and files

Repository files navigation