MOOSIC: MOOD-BASED MUSIC DISCOVERER
Developed as a Module 2 Project
-
PROJECT OVERVIEW
VibeCheck is an interactive web application designed to help
users find the perfect soundtrack for their current mood.
By integrating with the Deezer API, the app provides access
to a vast library of mainstream tracks, allowing users to
discover and preview songs that match their vibes.
- KEY FEATURES
- Mood-Based Search: Filter music by entering moods like ‘Happy’,
‘Chill’, ‘Energetic’, or ‘Sad’.
- Real-Time API Integration: Live data fetching from the
Deezer servers.
- Audio Previews: Listen to 30-second snippets of any track
directly in the browser.
- Responsive Design: A clean, modern UI that works on mobile,
tablets, and desktops.
- TECH STACK
- HTML5: Page structure and semantic layout.
- CSS3: Custom typography and modern grid-based styling.
- JavaScript (ES6+): Asynchronous fetch logic and DOM
manipulation.
- Deezer API: Mainstream music data source.
- CORS Proxy: Integrated via corsproxy.io to bypass browser
security blocks during local development.
- FILE STRUCTURE
- index.html: The skeleton of the application.
- style.css: The visual design and responsive layout.
- index.js: The core logic for API calls and UI updates.
- README.txt: This project documentation.
- SETUP INSTRUCTIONS
- Download or clone the project files.
- Open ‘index.html’ in any modern web browser.
- Ensure you have an active internet connection to load
content from the Deezer API.
- Type a mood or artist name into the search bar and press
‘Search’ to see the magic.
- ACADEMIC GOALS
This project demonstrates proficiency in:
- Connecting to external data sources using Fetch.
- Handling Asynchronous JavaScript (Async/Await).
- Dynamic DOM manipulation based on user interaction.
- Solving Cross-Origin (CORS) development challenges.
Project by: Zachary Okoth
Moringa School Module 2