About the project

YouTube 2 MP3 Downloader is a responsive application that lets you convert and download YouTube videos into MP3 files. The app also features a selection of popular music that is currently trending, making it easier to download them without even having to copy the link.

🌐 Live demo

Check out this project running on Netlify

Features

• Converts and downloads YouTube videos into MP3 files
• Lists currently trending songs, allowing the user to download them with a single click

Front-end

The client-side of YouTube 2 MP3 Downloader was built with React + Typescript.

Layout

Mobile

Desktop

Technologies

The following technologies were used to build YouTube 2 MP3 Downloader front-end:

• axios - For API calls
• react-device-detect - For small responsive tweaks
• react-icons - For icons
• react-loading-skeleton - For neat skeletons
• react-toastify - For general dialogs

Back-end

The server-side of YouTube 2 MP3 Downloader was built with Node + Typescript. Some data was also cached with Redis to improve performance.

External APIs

The following third-party APIs were used on YouTube 2 MP3 Downloader:

• YouTube MP3 - For MP3 conversion
• Simple YouTube Search - For popular songs

Technologies

The following technologies were used to build YouTube 2 MP3 Downloader server:

• axios - For API calls
• express-async-errors - For a cleaner error handling
• redis - For caching API calls

How to set up

If you wish to work with this project you'll need to set up the following environment variables:

Client-side:

• VITE_BAKCEND_URL URL of your server

Server-side:

• PORT Port to run the Node application
• RAPID_API_KEY Your private key at RapidAPI
• RAPID_API_HOST Host URL for YouTube MP3 API
• RAPID_API_YT_SEARCH_HOST Host URL for YouTube Search Results API
• REDIS_SERVER_URL URL of your Redis server
• CLIENT_URL URL of your front-end app

Inspirations

This project's UI was generated with Midjourney and manually converted to HTML and CSS.

Input:

modern youtube to mp3 downloader tool clean minimalistic website, design, ux/ui, ux, ui --ar 3:2 --v 4 --q 2