Skip to main content

​
Quick Start

MYMUSICK is a lightweight music streaming web application built with vanilla JavaScript, HTML5, and CSS3. No build tools or package managers required—just clone and serve.
1

Clone the repository

git clone <your-repo-url>
cd mymusick
2

Start a local server

You can use any static file server:
python -m http.server 8000
3

Open in browser

Navigate to http://localhost:8000 and you’re ready to develop!

​
Project Structure

MYMUSICK follows a simple, flat file structure: 
mymusick/
├── index.html              # Main application entry point
├── estilooriginal.css      # Original theme stylesheet
├── estiloformal2.css       # Alternative formal theme
├── img/
│   └── Logo.png           # Application logo
└── fonts/
    └── gyanko-regular.otf # Custom Gyanko font

​
Core Files

index.html

Contains the complete application including HTML structure, embedded JavaScript logic, and YouTube API integration.

estilooriginal.css

Original theme with vibrant colors (--primary: #04CDA8, --accent: #FF5757) and Gyanko font.

estiloformal2.css

Modern dark theme with late-night vinyl lounge aesthetic using Bebas Neue and DM Sans fonts.

​
Dependencies

​
External Resources

MYMUSICK has minimal external dependencies:
  1. YouTube IFrame API (loaded via CDN) 
    <script src="https://www.youtube.com/iframe_api"></script>
    Used for audio playback through YouTube’s embedded player.
  2. Backend API (required) 
    https://mymusick-backend.onrender.com/search?q=<query>
    Backend service for music search functionality.
  3. Google Fonts (estiloformal2.css only) 
    @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans...');
The backend API at mymusick-backend.onrender.com must be running for search functionality to work. Make sure you have access to this service or set up your own backend.

​
Browser Requirements

MYMUSICK uses modern web APIs and requires:
  • Canvas API for dominant color detection (index.html:71)
  • Dialog Element for login modal (index.html:73-80)
  • Fetch API for backend communication (index.html:122-124)
  • YouTube IFrame API for audio playback
  • CSS Custom Properties for theming

​
Supported Browsers

Chrome/Edge

Version 88+

Firefox

Version 98+

Safari

Version 15.4+

​
Development Workflow

​
Hot Reload Setup

For a better development experience with auto-reload: 
# Using browser-sync
npx browser-sync start --server --files "*.html, *.css, *.js"

# Using live-server
npx live-server --port=8000

​
Debugging

1

Enable verbose logging

Open browser DevTools (F12) and monitor:
  • Console for JavaScript errors
  • Network tab for API calls to backend
  • Elements tab for DOM inspection
2

Test YouTube API integration

Check if window.YT object is available:
console.log(window.YT); // Should show YouTube API object
3

Verify backend connection

Test the search endpoint:
curl "https://mymusick-backend.onrender.com/search?q=test"

​
Environment Variables

Currently, the backend URL is hardcoded. To make it configurable: 
// Add to index.html <script> section
const API_BASE_URL = window.location.hostname === 'localhost'
  ? 'http://localhost:3000'
  : 'https://mymusick-backend.onrender.com';

// Update search function
const res = await fetch(
  `${API_BASE_URL}/search?q=${encodeURIComponent(query)}`
);

​
Next Steps

Architecture

Learn about the application structure and data flow

Customization

Customize themes, add features, and extend functionality

Build docs developers (and LLMs) love

Get started for freeTalk to us