Skip to content

Instantly share code, notes, and snippets.

@gianpaj
Last active December 15, 2025 13:58
Show Gist options
  • Select an option

  • Save gianpaj/80884b1d45e9d7411ea18938df873ea0 to your computer and use it in GitHub Desktop.

Select an option

Save gianpaj/80884b1d45e9d7411ea18938df873ea0 to your computer and use it in GitHub Desktop.

Design a clean, modern React and Shadcn webpage using TailwindCSS 3 for a simple free audio converter. The tool lets users upload audio/video files (e.g., WAV, MP3, MP4, AAC, FLAC, OGG) and converts them using ffmpeg. The interface should feel friendly and non-technical, with very few options. Focus on a smooth user flow:

  • Large drag-and-drop upload area
  • Auto-detect input format and a minimal dropdown for output format
  • Clear convert button and progress indicator
  • Simple success state with a download button
  • Desktop-first layout, but responsive for mobile
  • Download Section appears after conversion. Big "Download" button with file info
  • Footer. Brief "Powered by FFmpeg" note. Add a disclaimer that files are not sent to any servers. All the data is processed in the user's browser.
  • Light, welcoming visual style with good spacing and intuitive icons

No advanced settings, no intimidating terminology — just a clean, polished, accessible experience. Incorporate visual elements and layout structures that highlight the core functionality—file upload, format selection, and conversion initiation—while ensuring a visually appealing and accessible user experience.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment