baekusboo/music-website

A webpage with full of music suggestions!

Music World

A webpage with full of music suggestions from all over the world!

Welcome to Hacktoberfest #10 2023

⭐ This repository is made for beginners who are looking for a beginner-friendly repository to start open source contributions!

⭐ Feel free to use this project to make your first contribution to an open-source project on GitHub.

⭐ Star this repository for a better reach!

What is Hacktoberfest? 🤔

A month-long celebration from October 1st to October 31st presented by Digital Ocean and DEV Community collaborated with GitHub to get people involved in Open Source.

https://hacktoberfest.com/

Note 🔥

1. To qualify for digital rewards by Hacktoberfest, you must register for the event and make four Pull Requests (PRs) between October 1-31, 2023 (in any time zone).

2. Pull requests can be made in any GitHub or GitLab hosted project that’s participating in Hacktoberfest (look for the “hacktoberfest” topic).

3. The first 50,000 participants to have their first PR/MR accepted will have a tree planted in their name through Tree Nation

Contribution Rules 🤍

⭐ Follow these steps to add your song to the webpage:

1. Navigate to the JSON File:

   • Open the musicData.json in your project directory.

2. Use the Template:

   • Copy the provided JSON template structure to use it for your song addition.

   {
       "id": ,
       "src": "PASTE_YOUR_SPOTIFY_LINK_HERE",
       "suggestedBy": "your-name"
   }

3. Get the Link from Spotify:

   • Choose your favorite song in Spotify.
   • Navigate to the share options of the song.
   • Select 'Copy Song Link' from the available options.

4. Paste Your Song's Link:

   • Return to the musicData.json.
   • Replace PASTE_YOUR_SPOTIFY_LINK_HERE in the JSON template with the copied song link.

5. Add Your Name:

   • In the placeholder your-name within the "suggestedBy" field, replace your-name with your actual name.

6. Final Steps:

   • Once you have made all the necessary changes, save the musicData.json file.
   • Proceed to create a pull request for the changes you made. If you're collaborating on a platform like GitHub, ensure to provide a meaningful commit message and pull request description for others to understand your additions.

Your song will be added to the list once the pull request is reviewed and merged! 🎵

⭐ Don't make any other changes in the code! If you find any bug or have a feature suggestion, feel free to raise an issue.

Happy Coding!

music-website's Issues

Want to Add text and improve UI so that users visiting the site are able to understand the purpose of the site. Could you please assign it under Hacktoberfest 2023 label.

Some Of songs are not playing

Enhancement: Add Scroll-to-Top Button with Progress Bar

Is your feature request related to a problem? Please describe.
The current version of the music website repository features a scroll-to-top button but lacks a progress bar. This absence diminishes the user experience as there's no visual indication of the progress while scrolling, impacting the overall navigation and user engagement.

Describe the solution you'd like
I propose adding a more enhanced scroll-to-top button, coupled with a progress bar. This addition will provide users with a visual cue, enhancing their navigation experience on the site. The progress bar will indicate the user's position on the page, ensuring better orientation and understanding of their location within the content.

Describe alternatives you've considered
One alternative could be solely adding a progress bar without integrating it with the scroll-to-top button. However, the combined functionality will offer a more cohesive and user-friendly experience.

Additional context
There's an opportunity to significantly improve user experience by integrating a scroll-to-top button with an accompanying progress bar. Screenshots showcasing the current scroll-to-top button and the proposed design can be provided to aid in visualizing the suggested improvement.

This enhancement aims to better engage users and provide a more intuitive and informative navigation experience on the music website repository.

Kindly assign this issue to me @aasthaanand09 so I can contribute to implementing this feature.

Thanks and Regards,
@aasthaanand09

I want to add the Dark Mode animations, mouse cursor effects, card animations, and arrow at bottom to get to top, etc.

feat: Footer needs improvment

The footer is not properly made and it needs major enhancements.

fix: Change suggested by text colour in dark mode

Describe the bug
Suggested by text is light colored in light bg. Text color is white. Thus the text is not visible in dark mode.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Music World Webpage'
2. Change theme to dark
3. Observe the text in the cards

Expected behavior
Suggested by text color should be changed, such that it's visible in dark mode also.

Screenshots

feat: I want to fix Toggle Theme logo, so it always stays in viewport

toggle theme logo position example:

music.world.mp4

@baekusboo can you please assign me this issue?

I wish to change the heading Font and styling as its too basic

Is your feature request related to a problem? Please describe.
The idea is good but we can enhance the UI

We can make small changes here and there , for eg. use gradient color as background and style the heading

Describe alternatives you've considered
Rest seems good, very linear site so we should leave it be

I want to add Navbar to the site

Enhancement of the site to make it look good and modern as New Age websites

feat: Adding icon to get to the top of the webpage

Is your feature request related to a problem? Please describe.
Scrolling to the top of the website from the bottom is hard to do manually. It's hectic especially when there are more and more cards added to the webpage everyday!

Describe the solution you'd like
Adding some icon at the bottom of the webpage to get to top of the webpage instantly.

Describe alternatives you've considered
Maybe adding an arrow shaped icon would be better.

fix: Reduce the space between each row of cards

Describe the bug
The space between each row of the cards are more.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Music World Webpage'
2. Scroll down

Expected behavior
Space between each row of the cards should be reduced and kept minimum.

Screenshots

Back to top button

Right now there is not back to top button user has to scroll all the way till top again which is kind of frustrating.
Please assign me this task under hacktober-accepted!

Improvement in UI of song cards

I want to enhance the UI of the song cards and make them look much more vibrant and less congested.
Please assign this issue to me under hacktoberfest 2023.

Make the navbar sticky

whenever you swipe up the navbar disappear so i want stick at on place and the content move

fix: Like button colour should be changed for dark mode

Describe the bug

In dark mode, Like button colour is light colored. Color is grey. Thus the button/icon is not visible in dark mode.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Music World Webpage'
2. Change theme to dark
3. Observe the like button colour in the cards

Expected behavior
In dark mode, Like button/icon color should be changed, such that it's visible in dark mode also.

Screenshots

feat: Search icon should be inside the search field

Describe the bug
The search icon is outside the search bar and doesn't look good . I want to place this icon in the search field so that UI of the website looks more good.

Visibility Issues in dark mode

When we turn the theme to dark mode, visibility issues are in the card's bottom text. For your reference, I am attaching the screenshots.

fix: the searching of the search bar

Describe the bug
The search box filters the cards based on the username. It is case-sensitive.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Music World Webpage'
2. Search name 'sai'
3. Observe that no card is visible

Expected behavior
The search bar should not be case-sensitive.

Screenshots

I want to add the Footer Section to the site.

Dynamic user listing enhancement

Is your feature request related to a problem? Please describe.
I've noticed that every time we add a new user to our platform, we manually update the HTML to reflect this. This method is time-consuming and prone to errors, leading to inconsistent user data representation. I'm always frustrated when I have to sift through lines of hard-coded HTML just to add or modify a user detail.

Describe the solution you'd like
I suggest we implement a dynamic user listing mechanism. Instead of hard coding user details in HTML, we can maintain a JSON file or fetch data from a backend API. Our frontend can then use JavaScript to dynamically generate user listings based on this JSON data. This will make our application more maintainable, reduce redundancy, and decrease the chances of manual errors.

Please assign me this under hacktoberfest!

fix: Remove duplicate cards

Describe the bug
Duplicate cards are present.

Expected behavior
No cards should be repeated. Duplicates should be removed.

Screenshots

Horizontal scroll during subtitle animation

Describe the bug

Horizontal scroll is present with subtitle animation
https://streamable.com/jprdgq

To Reproduce
Steps to reproduce the behavior:

1. Refresh page
2. Scroll sideways before the subtitle animation is complete

Expected behavior
No sideway scroll

Screenshots

Additional context
Add any other context about the problem here.

fix: Align like button and suggested by text in the cards

Describe the bug
The contributor's name and the like button are not aligned properly in the same line. When the name is too long, the position of the like button is changed.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Music World Webpage'
2. Scroll down
3. Observe the card UI

Expected behavior
The contributor's name and the like button should be aligned properly in the same line. For each card, fix the position of the like button at left with required margin and padding. It would be better to align the "suggested by NAME" left. Any unique idea will be appreciated to fix this issue.

Screenshots

feat: I want to add Local Storage based theme preference, so user will get the same theme he chose first.

example:

dark_light.mp4

fix: Align the cards in a row to center

Describe the bug
Cards are aligned towards the right of the webpage.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Music World Webpage'
2. Scroll down

Expected behavior
Cards should be aligned towards the center.

Screenshots

Footer separation issue

feat: Card animations

example:

card_animation.mp4

No options for Like button and Their is no filter and search

Is your feature request related to a problem? Please describe.
NO

Describe the solution you'd like
Need to add like button
Filter and search for songs

Describe alternatives you've considered
No

Additional context
No

Fix : UI design of music card can be fixed

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

fix: the sun-theme icon on dark mode

Describe the bug
The icon showed while changing themes is not changed properly. Only the moon icon is showed both in dark and light mode.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Music World Webpage'
2. Change theme
3. Observe the theme icon

BUG Screenshots
In Dark mode

In Light mode

Expected behavior
The theme icon should be sun in dark mode and moon in light mode as in below pics.

In Dark mode

In Light mode