adityakmrmishra / geet

Opensource music player

Geet

🎶 Project Description:

GEET is an open-source music player that aims to provide users with a seamless music listening experience similar to popular platforms like Spotify. By contributing to this project, you'll be shaping the future of music streaming and helping music enthusiasts enjoy their favorite tunes more easily.

Tech Used

• HTML
• Javascript
• CSS

DEMO

GEET

👨🏻‍💻 How to get started?

You can refer to the following articles on basics of Git and Github and also contact the Project Mentors, in case you are stuck:

• Forking a Repo
• Cloning a Repo
• How to create a Pull Request
• Getting started with Git and GitHub

📝 How to Contribute?

• Go through the repository completely!
• Take a look at the Existing Issues or create your own Issues!
• Wait for the Issue to be assigned to you after which you can start working on it.
• Fork the Repo and create a Branch for any Issue that you are working upon.
• Create a Pull Request which will be promptly reviewed and suggestions would be added to improve it.
• Add Screenshots to help us know what this Script is all about.
• For Contribution Guide Click here

Project Admin

Aditya Kumar Mishra

Project Mentors

Ashish Gupta	Ankit Kumar Sharma

Our Beloved Contributors 😍

---

A big thank you to all our contributors who have made this project better with their valuable contributions! We appreciate your efforts and dedication.

---

REACH OUT TO ME

❤️ Support

Don't forget to leave a star ⭐️. Its free 😉

geet's Issues

Enhance UI Design

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

Describe the solution you'd like
The current user profile page lacks visual appeal and could benefit from a more intuitive design. The layout appears cluttered, making it challenging for users to quickly access and update their information. This improvement aims to enhance the overall user experience by revamping the UI elements on the profile page

Describe alternatives you've considered
After the improvement, the user profile page should have a cleaner layout with easily navigable sections for personal information, settings, and profile picture. The design should prioritize user engagement and make it more visually appealing.

Bug in Search bar

Describe the bug
Placeholder of search bar is 'Search musics'. I think it would be very clear if it is 'Search songs'

Additional context
I would like to contribute to it. Please add 'hactoberfest', 'hactoberfest-accepted' labels while assigning. Thanks.

@GuryonAnkit @adityakmrmishra @adisuyash

Resize the buttons equally and Background-Color of login should be change

Is your feature request related to a problem? Please describe.
height of search bar , login button and light-dark mode button is not same which make it unimpressive... and also background-color of login is different then search and light-dark mode button

Describe the solution you'd like
Set the same height for all the buttons it looks professional as well .. and change the background-color of login button similar to search bar

Describe alternatives you've considered
I can change the height and color of it if You assign me this issue

Additional context

#hacktoberfest #hacktoberfest2023

Proposal for UI and Design Enhancement

Overview:
I would like to propose an initiative to enhance the user interface and overall design of the "Geet" project. This will not only improve the visual appeal of the application but also contribute to a better user experience.

Changes Proposed:
These are the proposed changes i have in my mind

->Redesigning the home page layout for improved content presentation.
->Styling the navigation bar for a more visually appealing and intuitive experience.
->Revamping the user profile page design to be more modern and user-friendly.
->Introducing a dark mode for users who prefer a darker theme.
->Enhancing readability through font adjustments and maintaining consistent UI elements.

Discussion:
I would like to invite feedback, suggestions, and thoughts from the maintainers and the community regarding these proposed enhancements. Your input and ideas are highly valued, and together we can make "Geet" a more engaging and user-friendly platform.

Next Steps:
Once we reach a consensus on these proposed changes, I will proceed with creating a specific pull request to implement them. I'm open to collaboration and discussion as we work together to improve the project.

Thank you for your consideration and I look forward to your input.

Song restarts when user clicks on pause icon on song instead of pausing at that time.

Describe the bug
Look at the below image. When user clicks on pause icon on song display the song restarts instead it should pause at that moment.

Screenshots

To Reproduce
Steps to reproduce the behavior:

1. Play the song
2. Click on pause icon displayed at song.

Expected behavior
Song should pause at that moment.

Additional context
I would like to contribute to it. Please add 'hactoberfest', 'hactoberfest-accepted' labels while assigning. Thanks.
@adityakmrmishra @GuryonAnkit

Background color Modification in light mode

Is your feature request related to a problem? Please describe.
Color is a very subjective thing but here I think the yellow color looks so odd, So I want to modify the color in light mode

Describe the solution you'd like
I want to change the color of whole page in Light mode

Additional context
it will look like this once It was changed

Figma Design Proposals

Description:

We're looking for Figma design proposals to enhance our project's UI/UX. If you have design ideas or mockups, please share them in Figma and link them here.

How to Contribute:

1. Create designs in Figma.
2. Share the Figma link in the comments of this issue.

Guidelines:

• Ensure proposed designs align with our project's goals and target audience.
• Keep the design clean and user-friendly.

Expected Outcome:

Accepted Figma designs will be considered for implementation, and contributors will receive recognition.

Timeline:

Ongoing – Feel free to contribute Figma designs at any time.

We appreciate your creativity in enhancing our UI/UX through Figma!

Request to Add a Favicon to Geet for Improved User Experience and Branding

I'm currently experiencing an issue with a website that lacks a favicon, which affects the user experience and branding of the site.

Description of the solution
I would like to request the addition of a favicon to the website. A favicon is a small icon that appears in the browser tab and bookmarks, providing visual identification for the website. This will enhance the site's branding and help users easily recognize and access it.

An alternative solution could be using a default or generic favicon, but this would not provide the same level of branding and recognition as a custom favicon designed specifically for the website.

add Pull Request template

Is your feature request related to a problem? Please describe.
For begginer, it would be easy if they can fill out the PR Template, requiring all necessary details so that maintainers can review it easily

Describe the solution you'd like
I would a PR Template directory under the .github folder

Make the Navbar responsive

Feature Request

I think the navbar should be made responsive as while viewing on a different device, the navbar looks a little clunky.

sign up page

Is your feature request related to a problem? Please describe.
There is no sign up page for new users. I propose implementing a user registration system on Geet to allow new users to sign up

Describe the solution you'd like
I plan to create the necessary pages using HTML and CSS to implement the requested features. These pages will include user registration forms for new users. The user registration page will collect necessary information from new users to create their accounts.

added css and changed the font family to enhance the UI

After:
https://github.com/adityakmrmishra/Geet/assets/136747216/fcec5c6c-118e-434e-ae73-84b2266364e4

Bug in seek bar

Describe the bug:
Dot is at center of the seek bar when I clicked any song to play and goes to starting position after the song is loaded. Initially the dot should be at starting position.

Steps to reproduce the behavior:

1. Open the app
2. Immediately observe the dot on the seek bar, as soon as you try to play a new song

A clear and concise description of what you expected to happen:
Initially the dot on the seek bar should be at starting position

If applicable, add screenshots to help explain your problem.

I would like to contribute to this as a part of Hacktoberfest2023.

Change background colour in light mode and add about us button

The background colour of the light mode is straining and does not look as good as dark mode.

I would like to change the background to a more blue-white tone.

I am also thinking about adding a "about us" button that will give the user a general idea about the project.

login page

Is your feature request related to a problem? Please describe.
My feature request is related to enhancing the user experience. It would be beneficial to have a dedicated login page for older users to access their accounts efficiently.

Describe the solution you'd like
I plan to create the necessary pages using HTML and CSS to implement the requested features. These pages will include a dedicated login page for existing users.
The login page will include fields for basic user details, such as username and password.
I will add login button between search box and (Dark/light) theme button.

Addition of Top Searched Artists and Top Playlists section

Is your feature request related to a problem? Please describe.
My feature request is to make the user have more choices. It would be amazing because having more options would give user to explore and ultimately increases their time on the Geet platform.

Describe the solution you'd like
I am thinking to write the necessary code for it in HTML, CSS and JS. My plan is to make it clickable also. When user will click on the card then the whole playlist of the songs related to that card would start playing.

I will add these sections below the popular artists section.

BUG : RESIZE SEARCH BAR AND THE MODE CHNAGE BUTTON

Describe the bug
size of the search bar and the dark-light mode change button should be nearly symmetrical to look well favoured

To Reproduce
Steps to reproduce the behavior:

desktop pc

• Browser [chrome]
• Version [Version 117.0.5938.92 ]

[ IMAGE ]
(https://github.com/adityakmrmishra/Geet/assets/121973953/3c67727f-79b5-49b0-96e6-3abf211d7cd2)

Bug in Search results

Describe the bug
Look at the image below. Search results is going below the icons of the songs.

Screenshots

Expected behavior
Search results should be on top of all elements so that it will be visible to the user.

Additional context
I would like to contribute to it. Please add 'hactoberfest', 'hactoberfest-accepted' labels while assigning. Thanks.
@adityakmrmishra @GuryonAnkit

Issue: Improve Project Description

Issue: Improve Project Description

Description

The project description could use some improvements in terms of grammar and clarity. I have made the necessary corrections, and we should update the README with these changes to provide a better understanding of the project.

Tasks

• Implement the suggested changes to the project description.
• Review and edit the Markdown to ensure it renders correctly.
• Update the README with the corrected project description.
• Verify that the links in the README are working as expected.

Additional Information

• Project Repository: GEET GitHub Repository
• Original Project Description: Link to Current Description

Improve Color Scheme and Font Style for Better Readability

Problem:

The current color scheme and font style used on the website could benefit from enhancements to create a more visually appealing and reader-friendly experience. The existing choices may not fully align with the desired aesthetics and can impact readability.

Description:
Color Scheme: The current color scheme may lack vibrancy and cohesiveness, which can affect the overall look and feel of the website. Improving the color palette can make the site more visually engaging and memorable.

Font Style: The choice of fonts plays a significant role in user experience. The current font style may not provide the best readability or may not align with the website's branding. Enhancing the font selection can improve readability and reinforce the website's identity.

Suggested Enhancements:
Color Scheme:

Considering color theory principles, I recommend incorporating more aesthetically pleasing colors into the website's design.
Also, ensure that the selected colors provide adequate contrast for text and background elements.

Font Style:

We should look for different fonts that are both aesthetically pleasing and easy to read.
Also to ensure that the font choice aligns with the website's brand and content.

Screenshot:

I'm looking forward to collaborating on this improvement.

Background color of search results

Describe the bug
Search results are not clearly visible because of it's background color

Screenshots

Add attractive colors

NOTE: ----Please add 'hactoberfest' topic to the repository----

Is your feature request related to a problem? Please describe.
The colors doesn't look appealing (gray, yellow) which is not attractive.

Describe the solution you'd like
I would like to change colors to make the app look appealing and attractive.

-- I would like to contribute to this as part of hacktoberfest 2023. While assigning, please add labels - 'hactoberfest', 'hactoberfest-accepted'
@GuryonAnkit

Spelling Mistake in "Create Playlist" Option

Bug Description
There is a spelling mistake in the "Create Playlist" option. The word "create" is misspelled as "creat."

To Reproduce
Steps to reproduce the behavior:

Go to the music player application.
Click on the "Create Playlist" option.
Observe the text or form.
Expected Behavior
The "Create Playlist" option should be spelled correctly as "Create Playlist."

Screenshots
If applicable, see the screenshot below highlighting the spelling mistake:

Additional Context
This spelling mistake should be corrected to ensure a better user experience and clarity in the application.

[ Enhancement] UI/UX: Improve Colors, Fonts, and Aesthetics

Issue Description:
The current UI/UX of the webpage requires enhancements to achieve a more aesthetically pleasing design. Here are the specific issues that need attention:

1. Background Color:

• Problem: The yellow/mustard color used as the main background in light mode can be visually unattractive.
• Solution: Consider using a more visually appealing background color to enhance the overall aesthetics.

2. Font Choice:

• Problem: The current font choice may not provide an aesthetically pleasing look.
• Solution: Opt for a more visually appealing font to improve the overall aesthetics.

3. Search Bar Padding/Color:

• Problem: The search bar at the top lacks proper padding and also the gray color isn't very appealing.
• Solution: Adjust the padding and color of the search bar to achieve a more visually pleasing and balanced appearance.

Screenshot

I have experience in UI/UX design and would like to contribute to improving the visual appeal.

Copyright logo can be added in the footer

Is your feature request related to a problem? Please describe.
It is a great idea to always showcase your work with authentication so that no one else can use the screenshots of the webpage as there is no copyright logo with "aditya mishra" or even name of the git repo 2023

Describe the solution you'd like
I want to add a copyright logo

Describe alternatives you've considered
I can even add github logo which would redirect to github repo on being clicked

Additional context
Add any other context or screenshots about the feature request here.

Just right there in the yellow space at the end, i would like to add the respective logos

Bug in Theme change button

Describe the bug
When theme button is toggled, the button goes outside the given space.

Screenshots

@adityakmrmishra I have a solution for it.

Designed The Login Button

Done Some change in html and add Css to design the Login button.

Untitled.video.-.Made.with.Clipchamp.48.mp4

Popular artist section design enhancement

Is your feature request related to a problem? Please describe.
I would like to request a design enchancement for the popular artist section . currently ,the section lacks visual appeal and interactivity. to improve the user experience , I suggest adding box shadows and hover effects to the artist cards within this section.

Additional context

Geet.and.22.more.pages.-.Personal.-.Microsoft.Edge.2023-10-17.02-04-53.mp4

Song lists on the main-page are overlapping while a song is playing and favicon is not updated