Skip to content

task.md

Latest commit

 

History

History
70 lines (69 loc) · 4.62 KB

task.md

File metadata and controls

70 lines (69 loc) · 4.62 KB
Raw

Downloader Project Checklist

  • Initialize React Vite web application (web/)
    • Run npx create-vite to bootstrap the React project
    • Install Tailwind CSS, Autoprefixer, and Lucide React
    • Configure Tailwind CSS in Vite and styles in src/index.css
    • Implement the "Single Video" extractor feature
    • Implement the "Channel & Playlists" browser feature
    • Implement the "Bulk ZIP" downloader feature
    • Implement the window message listener for extension integration
  • Initialize the Chrome Extension (extension/)
    • Create manifest.json (Manifest V3)
    • Create popup.html and popup.js for the compact popup interface
    • Create background.js for context menus and page integration
    • Generate extension icons
  • Sidebar Restructuring & Pages
    • Implement responsive sidebar navigation (with mobile slider)
    • Add content pages: Why Downloader, How to Use, FAQs, API Docs
    • Bundle extension into a functional .zip file for web downloads
  • Layout Optimization
    • Transition vertical Left Sidebar navigation to horizontal Top Navigation Bar
    • Implement responsive hamburger dropdown menu for mobile devices
    • Create a premium multi-column horizontal footer with active state-driven routing
    • Implement custom frosted dewy glassmorphism theme parameters for cards, topbar, and footer
    • Remove the Home screen promo banner and align headers across all pages
    • Resolve language switcher dropdown hover-gaps and implement glassmorphic buttons
    • Replace non-standard slate-850 divider classes with consistent border colors
    • Compact footer spacing and container size
    • Format Request Body Schema and Query Parameters tables inside code-block boxes
    • Remove header underlines and top borders to clean layout line clutter
    • Relocate the health status badge and implement a live health check hook
    • Localize the live health status indicator states inside translations.js
    • Add application update notifications button, glass card, and translation keys
    • Adapt notification trigger mechanics to be hover-group reactive
    • Remove visual rule line dividers from Home dashboard views and update notification popover
    • Update GitHub footer links to repository and replace Twitter icon with Chrome Web Store icon
  • Advanced 3D Effects Integration
    • Install Three.js package
    • Create ThreeBg.jsx canvas component with 3D particle network
    • Add mouse-move parallax lerp sway animation
    • Optimize timers to eliminate deprecation console warnings
    • Integrate background canvas into layout without blocking clicks
  • Internationalization (i18n) System
    • Create translations dictionary for EN, ES, VI, FR, JA (translations.js)
    • Set up React context provider and useLanguage hook (LanguageContext.jsx)
    • Wrap application in main.jsx
    • Map translation lookup t() functions across all text strings and tabs in App.jsx
    • Integrate a responsive language selector dropdown in the top navbar
  • Vercel Deployment Configuration
    • Create vercel.json in the web folder configuring rewrites rules for single page routing
    • Wrote a step-by-step Vercel Deployment Guide file at the project root
  • Chrome Extension Style Alignment
    • Map style foundations CSS tokens (Inter font stack, spacing, borders, radius)
    • Align button borders, hover translations, shadows, and spacing rules
    • Replicate the website's brand logo header container layout and font logo text style
    • Update the extension manager dashboard card icon (icon.png) to match brand logo
    • Convert generated JPEG asset to natively formatted PNG file using sips
    • Ensure extension manager logo uses a solid, fully-filled violet background
    • Map background routing parameters and host permissions to point to Vercel URL
    • Implement dynamic local/Vercel active server connectivity check and fallback routing
    • Resolve popup closing race conditions that caused double click requirements
    • Re-zip extension directory and update the web public folder package asset
  • Project Documentation
    • Create detailed, premium README.md in workspace root outlining web application and Chrome extension features
    • Create CONTRIBUTING.md file in workspace root with contribution code guidelines
    • Create LICENSE file in workspace root declaring MIT license protection
  • Verification and Testing
    • Run web app locally and test extraction APIs
    • Validate production building
    • Create walkthrough and verification instructions