first commit

.env

@@ -0,0 +1,2 @@
+VITE_RAPID_API_KEY=7aa51de8bamsh022bdd0f81ca739p144f91jsn6422900f4f4f
+VITE_RAPID_API_HOST=social-download-all-in-one.p.rapidapi.com

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

documentation.txt

@@ -0,0 +1,85 @@
+SOCIAL MEDIA DOWNLOADER - DOKUMENTASI PROYEK
+
+1. TEKNOLOGI UTAMA
+   - React 18.3.1 (Framework JavaScript untuk UI)
+   - TypeScript (Bahasa pemrograman dengan type safety)
+   - Vite (Build tool dan development server)
+   - Tailwind CSS (Framework CSS untuk styling)
+   - Framer Motion (Library untuk animasi)
+   - React Hot Toast (Notifikasi toast)
+   - Lucide React (Icon library)
+
+2. FITUR UTAMA
+   a. Multi-Platform Support
+      - TikTok video download
+      - YouTube video download
+      - Instagram video download
+
+   b. Interface
+      - Dark/Light mode toggle
+      - Multi-bahasa (English & Indonesia)
+      - Responsive design (mobile & desktop)
+      - Sidebar navigation
+      - Modern dan clean UI
+
+   c. Fungsionalitas
+      - Copy-paste URL video
+      - Clipboard integration
+      - Multiple format download options
+      - Preview thumbnail video
+      - Progress indicators
+      - Error handling
+      - Toast notifications
+
+   d. Komponen Utama
+      - SearchInput: Input URL video
+      - MediaPreview: Preview dan opsi download
+      - Sidebar: Navigasi dan pengaturan
+      - Features: Highlight fitur produk
+      - Statistics: Statistik penggunaan
+      - UsageInstructions: Panduan penggunaan
+      - ComparisonTable: Perbandingan fitur
+      - Testimonials: Testimoni pengguna
+
+   e. Animasi
+      - FadeIn: Animasi fade untuk elemen UI
+      - ScaleIn: Animasi scale untuk elemen UI
+      - Motion effects pada statistik
+      - Smooth transitions
+
+3. KEAMANAN
+   - CORS handling
+   - Secure download process
+   - Error handling komprehensif
+   - Input validation
+   - Safe navigation
+
+4. PERFORMA
+   - Lazy loading components
+   - Optimized animations
+   - Efficient state management
+   - Fast development server
+   - Production build optimization
+
+5. API INTEGRATION
+   - RapidAPI integration
+   - Secure API key handling
+   - Robust error handling
+   - Response type validation
+   - Multiple download quality options
+
+6. USER EXPERIENCE
+   - Intuitive interface
+   - Clear error messages
+   - Loading indicators
+   - Progress feedback
+   - Responsive design
+   - Accessibility features
+   - Multi-language support
+
+7. DEVELOPMENT FEATURES
+   - Hot module replacement
+   - TypeScript type checking
+   - ESLint configuration
+   - Development tools integration
+   - Structured project organization

dokumentasi.txt

@@ -0,0 +1,85 @@
+SOCIAL MEDIA DOWNLOADER - DOKUMENTASI PROYEK
+
+1. TEKNOLOGI YANG DIGUNAKAN
+   - React 18.3.1 (Kerangka kerja JavaScript untuk antarmuka pengguna)
+   - TypeScript (Bahasa pemrograman dengan sistem tipe statis)
+   - Vite (Alat pengembangan dan server)
+   - Tailwind CSS (Kerangka kerja CSS untuk tampilan)
+   - Framer Motion (Pustaka untuk animasi)
+   - React Hot Toast (Sistem notifikasi)
+   - Lucide React (Kumpulan ikon)
+
+2. FITUR APLIKASI
+   a. Dukungan Multi-Platform
+      - Unduh video TikTok
+      - Unduh video YouTube
+      - Unduh video Instagram
+
+   b. Antarmuka
+      - Mode Terang/Gelap
+      - Dukungan dua bahasa (Indonesia & Inggris)
+      - Tampilan responsif (ponsel & komputer)
+      - Menu samping
+      - Tampilan modern dan bersih
+
+   c. Kemampuan
+      - Salin-tempel URL video
+      - Integrasi clipboard
+      - Pilihan format unduhan
+      - Pratinjau thumbnail video
+      - Indikator proses
+      - Penanganan kesalahan
+      - Notifikasi toast
+
+   d. Komponen-komponen
+      - Kotak Pencarian: Masukan URL video
+      - Pratinjau Media: Tampilan dan pilihan unduhan
+      - Menu Samping: Navigasi dan pengaturan
+      - Fitur: Tampilan keunggulan produk
+      - Statistik: Data penggunaan
+      - Petunjuk: Panduan penggunaan
+      - Tabel Perbandingan: Perbandingan fitur
+      - Testimoni: Ulasan pengguna
+
+   e. Animasi
+      - FadeIn: Efek memudar
+      - ScaleIn: Efek memperbesar
+      - Efek gerakan pada statistik
+      - Transisi halus
+
+3. KEAMANAN
+   - Penanganan CORS
+   - Proses unduhan yang aman
+   - Penanganan kesalahan menyeluruh
+   - Validasi masukan
+   - Navigasi aman
+
+4. KINERJA
+   - Pemuatan komponen bertahap
+   - Optimasi animasi
+   - Pengelolaan state yang efisien
+   - Server pengembangan cepat
+   - Optimasi build produksi
+
+5. INTEGRASI API
+   - Integrasi dengan RapidAPI
+   - Penanganan kunci API yang aman
+   - Penanganan kesalahan yang kuat
+   - Validasi tipe respons
+   - Pilihan kualitas unduhan
+
+6. PENGALAMAN PENGGUNA
+   - Antarmuka intuitif
+   - Pesan kesalahan yang jelas
+   - Indikator pemuatan
+   - Umpan balik proses
+   - Desain responsif
+   - Fitur aksesibilitas
+   - Dukungan multi bahasa
+
+7. FITUR PENGEMBANGAN
+   - Pembaruan modul secara langsung
+   - Pemeriksaan tipe TypeScript
+   - Konfigurasi ESLint
+   - Integrasi alat pengembangan
+   - Struktur proyek yang terorganisir

eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);

index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en" translate="no" class="notranslate">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="google" content="notranslate">
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Social Media Downloader - Download Videos from Social Media</title>
+    <meta name="description" content="Download videos from TikTok, YouTube, and Instagram in high quality with our fast and secure Social Media Downloader. Multiple format options available." />
+    <meta name="keywords" content="social media downloader, video downloader, tiktok downloader, youtube downloader, instagram downloader" />
+    <meta property="og:title" content="Social Media Downloader" />
+    <meta property="og:description" content="Download videos from TikTok, YouTube, and Instagram in high quality" />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Social Media Downloader" />
+    <meta name="twitter:description" content="Download videos from TikTok, YouTube, and Instagram in high quality" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>