Skip to content

overuseofrem/monstercat-page-recreate

Repository files navigation

Monstercat album release page receration (Frontend Practice)

A responsive front-end recreation of Monstercat's album release page. This is a self-directed challenge from Frontend Practice.

👉 Check out the live demo!


📌 About the project

The goal is to recerate the structure, appearance, and behavior of Monstercat's album release page. Specifically, the preview page that Frontend Practice provides.

❗This is a personal practice project! all banding, content, and design elements remain the property of Monstercat. This clone is for educational, recreational, and non-commercial use only. Images, and text may be replaced with placeholders or free-to-use alternatives.


🍮 Features

  • Mobile-first layout
  • Responsive design
  • Layout, hover states, and interaction mimicry (attempt)
  • Blurred and transparent top navigation bar
  • Blurred background image
  • Cool Youtube video player (just an iframe, but don't worry about it)
  • Working music player

🔧 Tech stack

  • HTML5
  • Javascript
  • Tailwind CSS
  • Vite

📷 Sources


⏳ Status

This is a WIP! 🤫

Page structure (HTML) 🏗️

  • Navigations?
    • Topbar navigation?
    • Sidebar navigation?
  • Header/Hero/Album?
  • Streaming?
  • Track List?
  • Music Video?
  • Footer?

Styling (Tailwind) 🎨

  • Navigations?
    • Topbar navigation?
      • Blurry topbar background?
    • Sidebar navigation?
  • Header/Hero/Album?
  • Streaming?
    • Tooltips?
  • Track List?
  • Music Video?
  • Footer?
  • Background image?

Javascript 🌚

  • Sidebar navigation?
  • Populate Tracklist with actual songs?
  • Working music player?

Final stuff ✨

  • Final code cleanup and commenting
  • Deploy the site to Github Pages
  • Add the live site link to the top of the README

🎵 Music Attribution and Licensing

The music used in this frontend recreation is for demonstration and portfolio purposes only and is sourced from NoCopyrightSounds (NCS) under their Usage Policy for independent content creators.

Music provided by NoCopyrightSounds. Full NCS Usage Policy

Track Name Original NCS Track Artist Attribution Link
The Ascent On & On (feat. Daniel Levi) Cartoon, Jéja Watch / Stream
Neon Drift Royalty Maestro Chives, Egzod, Neoni Watch / Stream
Static Pulse Sky High Elektronomia Watch / Stream
Ghost in the Machine Fearless pt.II (feat. Chris Linton) Lost Sky Watch / Stream
Apex Protocol My Heart Different Heaven, EH!DE Watch / Stream
Digital Horizon Feel Good Syn Cole Watch / Stream
Transcendence Hope RetroVision Watch / Stream
Core Dump Link Jim Yosef Watch / Stream
Aurora Trail Cradles Sub Urban Watch / Stream
Protocol Complete Montagem Toma X972, sk3tch01, MXZI Watch / Stream

📝 Disclaimer

This is a personal, non-commercial project created for educational and recreational purposes only.
All text content, links, and branding elements in this project are copied from the Monstercat website album release for practice purposes.
All images, icons, and other media are sourced from free-to-use platforms (e.g., Unsplash, Boxicons) or replaced with placeholders.
Placeholder music and video embeds are sourced from NoCopyrightSounds (NCS) and are fully credited in the 'Music Attribution and Licensing' section above to comply with their usage policy. This project is not affiliated with, endorsed, sponsored, or specifically approved by Monstercat.
All original code in this repository is licensed under the MIT License.

About

My recreation of Monstercat's album release page from Frontend Practice

Topics

Resources

License

Stars

Watchers

Forks