Skip to content

Listen Locally

Rough Idea:

High level plan:

Tech Stack for Your Music Downloader Website

Frontend

  1. Framework/Library: React.js (for modular and reusable components)
  2. Styling: Tailwind CSS (lightweight, supports dark/light themes easily)
  3. State Management: Context API or Redux (for managing user data and theme state)
  4. Offline Capability: Service Workers via PWA (Progressive Web App) support
  5. Music Player Library: React-Player for media playback

Backend

  1. Framework: Node.js with Express.js (lightweight and scalable)
  2. Database:
    • MongoDB (NoSQL, free tier available on Atlas) for storing user data and song metadata
    • IndexedDB (browser-side storage for offline capability)
  3. File Storage:
    • Local Storage/Web Storage for caching metadata
    • Google Drive API (for cloud integration)

Hosting Options

  1. Frontend Hosting:
    • Vercel (free tier, great for student projects, supports React)
    • Netlify (similar to Vercel, great free options)
  2. Backend Hosting:
    • Render (free tier for Node.js backend)
    • Railway (free for low usage, student-friendly)
  3. Database Hosting:
    • MongoDB Atlas Free Tier
    • Supabase (PostgreSQL-based, free tier for students)

APIs

  1. YouTube API (YouTube Data API v3): For searching and fetching YouTube videos
  2. YouTube MP3 Converter API (e.g., ytdl-core): For extracting audio from YouTube
    • Note: Ensure compliance with YouTube's terms of service.
  3. Lyrics API:
    • Musixmatch API (free tier available for fetching lyrics)
    • Lyrics.ovh API (free, simpler alternative)
  4. Google Drive API: For managing files stored on Google Drive
  5. Geolocation API (optional): For personalizing the experience (e.g., regional music suggestions)
  6. Web Storage API: To handle offline playback
  7. OpenGraph API: For fetching rich media metadata (if needed for album covers, etc.)

Features Implementation Plan

  1. Home Page:

    • Build a search bar using React, integrated with the YouTube API for video search.
    • Use ytdl-core or a similar library on the backend for audio extraction and download.
    • Quality selection via dropdown, using ytdl-core's format options.

    • My Music:

    • Store metadata locally using IndexedDB for offline availability.

    • Display downloaded music in a user-friendly grid using React components.

    • Profile Page:

    • Build a simple form for updating user information.

    • Display linked/downloaded songs using the database (MongoDB or IndexedDB).
    • Allow users to upload a profile picture (stored in cloud storage or IndexedDB for offline mode).

    • Music Player:

    • Use React-Player for audio playback.

    • Implement basic controls (play, pause, skip) and display lyrics fetched from the Lyrics API.
    • Allow switching between online and offline modes.

    • Offline Mode:

    • Configure a Service Worker for caching assets (HTML, CSS, JS) and music files.

    • Store music in IndexedDB and leverage local storage for settings or metadata.

    • Offline Website Download:

    • Make the website a PWA by adding a manifest.json file and enabling offline caching with Workbox.

Considerations for Hosting

  • For free hosting, manage static content separately on Vercel/Netlify and run the backend on Railway/Render.
  • Use MongoDB Atlas's free tier or Supabase for lightweight, free database hosting.

Would you like further guidance on implementing a specific feature?