Unit Assignment: Music Playlist Explorer

Submitted by: Sydney Brown

Estimated time spent: 20 hours spent in total

Deployed Application (optional): didn't deploy

Application Features

CORE FEATURES

• Display Playlists

  • Dynamically render playlists on the homepage using JavaScript.
  • Fetch data from a provided JSON file and use it to create interactive playlist tiles.
  • Each title should display the playlist's cover image, name, creator, and like count.

• Playlist Details

  • Create a modal view that displays detailed information about a playlist when a user clicks on a playlist tile.
  • The modal should show the playlist's cover image, name, creator, and a list of songs, including their titles, artists, and durations.

• Like Playlists

  • Implement functionality to allow users to like playlists by clicking a heart icon on each playlist tile.
  • Update the like count on the playlist tile when a playlist is liked or unliked.

• Shuffle Songs

  • Enable users to shuffle the songs within a playlist using a shuffle button in the playlist detail modal.
  • Rearrange the songs in the modal view when the shuffle button is clicked.

STRETCH FEATURES

• Add New Playlists

  • Allow users to create new playlists.
  • Users can input playlist name, creator, and add multiple songs with details like title, artist, and duration.

• Edit Existing Playlists

  • Enable users to modify the details of existing playlists.
  • Add an edit button to each playlist tile.
  • Users can update the name, creator, and songs of the playlist.

• Delete Playlists

  • Add a delete button to each playlist tile.
  • When clicked, the playlist is removed from the display and data model.

• Search Functionality

  • Implement a search bar that allows users to filter playlists by name or creator.

• Sorting Options

  • Implement a dropdown or button options that allow users to sort the playlist by name, number of likes, or date added.

Walkthrough Video

project 2 - Watch Video

Reflection

• Did the topics discussed in your labs prepare you to complete the assignment? Be specific, which features in your weekly assignment did you feel unprepared to complete?

Yes, the topics from lab definetely related to the project. However, I didn't really get that far in the labs during the assigned times, but I often referred back to them. Specifically, the content we learned on the DOM and manually adding to the HTML via javascript files was pretty helpful

• If you had more time, what would you have done differently? Would you have added additional features? Changed the way your project responded to a particular event, etc.

If I had more time, I would definetely spend more time on the CSS of the featured page. I kind of had to rush it at the end, so I didn't get to structure it properly. Also, I would try to pursue some of the stretch features, specifically the search button and the add/delete playlist functionality. I also would've done the structuring completely different. I think I wasted way too much time wireframing things manually that we ended up doing with a diffferent method later. I think I should have read ahead to better balance my time.

• Reflect on your project demo, what went well? Were there things that maybe didn't go as planned? Did you notice something that your peer did that you would like to try next time?

I think my demo went well! I feel more comfortable in front of my peers. I wish I had cuter visuals and my feature page so I had more to talk about to fill the time because I received feedback saying I talked too long about a feature I hadn't finished yet

Open-source libraries used

• Add any links to open-source libraries used in your project.

Shout out

Give a shout out to somebody from your cohort that especially helped you during your project. This can be a fellow peer, instructor, TA, mentor, etc. SHOUT OUT TO KARINA, KIAHNA, ANDY, ALEX, DEVARSH, AND CHRIS!