aman-mandal/groovy

An opensource music platform built with NextJS/ReactJS and Shazam API

Groovy

An open-source web music player that brings a seamless music experience with the most modern UI.

UI Design

Tech Stack

Installation

1. Fork the repo into your account

2. Clone the project into your local machine

git clone https://github.com/<Your-name>/groovy.git

3. Navigate the folder

cd groovy

3. Install the dependencies

npm install

4. Run the project on local machine

npm run dev

Contributing Guidelines

Thank you for considering to contribute to this project.

What do I need to know to contribute?

This project is in a very early stage so anybody who's familiar with ReactJS/NextJS/TailwindCSS can contribute. If you don't feel ready to make a contribution yet, no problem at all. You can also contribute to this ReadMe section or the Design part of our project.

If you are interested to contribute and want to learn more about the technologies that are used in this project, checkout the links below.

• ReactJS Official Docs
• NextJS Documentation
• TailwindCSS Docs
• Material UI Documentaion

How to make a Contribution?

Never made an open source contribution before? And wondering how to contribute to this project? No worries! Here's a quick guide,

1. Choose any feature/bug you wish to contribute to.
2. Fork the repository into your own account.
3. Clone the repo you have forked in your local machine using git clone https://github.com/<Your-name>/groovy.git
4. Create a new branch for your fix by using the command git checkout -b YourName-branch-name
5. Make the changes you wish to do and stage them using the command git add files-you-have-changed or use git add .
6. Use the command git commit -m "Short description of the changes" to describe the changes you have done with a message.
7. Push the changes to your remote repository using git push origin your-branch-name
8. Submit a PR(pull request) to the upstream repository (Aman-Mandal/groovy) with a title and a small description.
9. Wait for the pull request to be reviewed by us.
10. Make appropriate changes if the maintainer recommends you to and submit it.
11. Await for your contribution to be merged into the repository.

Checkout the Contributing.md file before contributing.

Where can I go for help?

If you need help, you can ask questions on our twitter for now :

• Aman Mandal
• Aadarsh Thakur

Credits

• UI credits : https://dribbble.com/shots/11139802-Dark-Mode-Music-Player-Web-App

License

MIT

Thanks to all the Contributors ❤️

Your Support means a lot

Give a ⭐ to the project if you liked it. :)

groovy's Issues

fix search functionality to filter songs starting from that letter and not all letters present in that song

like if you put 'a' in the input field it should show songs starting from 'a' only and not all songs containing 'a' in it

remove padding-right from topArtists component so that it shows that there are more artists to the right if scrolled

Navbar bugs, minor UI fixes and removal of unused code.

Found a bug in the navbar and had to fix search bar width in the navbar for better UX.

It says 'none' in the navbar even when there's no user for profile picture. Please assign me this task to fix all these issues 🙂

add login/ logout using react-oauth/google library

read more about the library
https://www.npmjs.com/package/@react-oauth/google

[Enhancement] make navbar responsive

make cursor to pointer when hovering Groovy title in sidebar

Make the cursor to pointer when hovering the Groovy title in sidebar.

In my own opinion, since it is a link, it's much better to change the cursor to pointer.

Screenshot:

fix overflow form the floating player component on small mobile sizes

make icons small, remove left padding and make it fit nicely

[UI/UX] Design artist details page

banner with artist's image and his top popular songs
kinda like this

Warning 'two children with the same key' on the top chart list.

The map loop should use a unique key as props. The response has that; I will update that.

Please assign it to me.

[BUG] search field input displays searched songs incorrectly placed

implement search functionality

duplicate Albums label on sidebar

Duplicate Albums label in sidebar.

Clicking either of the two highlights both.

Screenshot:

[Fix] Fix the height of whole application

Right now as you can see the height of the application keeps on increasing as we add more data, but it should be fixed!!

add color variables in the globals.css file

Make aritsts detail page banner

[Bug] Explore page is stuck and not scrolling

grrovy-explore-bug.mp4

As you can see in the above video, the application is scrolling nicely but when I navigated to the explore page with the sidebar, it was totally stuck!!

the searchbar disturbs the position of navbar when something is searched, the search box should be out of input field and below the input search

Added Key Prop

Hi @Aman-Mandal,
Just saw a Little bug, [ doesn't make much difference ],
I've fixed it. this helps in removing this warning.

Before

After

remove music,podcast, live links from navbar component on mobile screen size as well as the settings icon

we can maybe create a dropdown fro music, podcast and live later

Can we setup a single api and use it to make different endpoints req

setup a baseURL: 'https://shazam.p.rapidapi.com/'
and make multiple endpoints like
getTopCharts will fetch from baseURL/topCharts
getTopArtists will fetch from baseURL/topArtists

make players previous and next button work

[BUG] Fix the Top Charts Component for medium screen sizes

The top Charts component looks fine on the large screen size (15.6 & more )

But it needs to be fixed for small screen laptops and medium screens

Typo Error

Shows this error when loading

In components/Navbar/Navbar.jsx line 42

Changing it to
window.removeEventListener("resize", handleResize);
fixes this

I am new to next.js sorry if this is some mistake from my side while setting up the project locally

Image isn't passing through props in TopArtist.jsx component

As you can see in the above image, images aren't passing through props!!

Try to Fix it ASAP ⚡

add modals for notifications, setting and user profile in navbar component

move navbar links to sidebar when on mobile view

we can keep the notification and settings in nav on the right side , moving others to sidebar

lyrics popup on player functionality without lyrics just a blank popup modal

make trending new hits section scrollable, use dummy data and also make it dynamic

[Bug] The time duration shows NaN

At the beginning of the song loading, the song duration in the player shows NaN.

I can fix this. Please assign the issue to me.

[BUG] Fix the notification modal and close modal by clicking the notification button

(Issue for beginners)

1. Fix the notification modal by adding the z-index property
2. When the notification button is clicked, the modal should close!!

implement dynamic data fetch from Shazam Api

https://rapidapi.com/tipsters/api/shazam-core/

make artists detail page

add active link styles on sidebar

[UI/UX] Create a UI Design for 'Genres' page

Create a figma file for Genres page, make sure it looks similar to the Homepage(Explore page).

Steps :

1. Fork and clone it
2. Install dependencies
3. Open the Design folder
4. Create a new sub-folder called "Desktop-Genres_page"
5. Add a Figma/image file of the design u created
6. Push it and create a PR

make ui responsive

code the music player on home page

the api calls are limited, so if the charts or artists are not loading, go to rapidApi and subscribe to shazam core api and setup your own rapidApi key in .env file

add dummy songs with trending songs data, top charts data and push them into player and autoplay

Make dynamic routes for artists detail page linking them to top artists section in explore page

make a basic loader component to show when fetching data from api

updated + button to material icon because it was not centered

Put songs on player from searchbar, from top charts & from trending

putting actual songs will be only functional when we have actual songs from shazam API,
we can work on putting the song name and artist's image on the player first

fix trending component's font-size, gap and margins on mobile screen size to make it responsive

[Feature] Make top artists and other sections on explore page responsive using overflow scroll and add scroll buttons too

fix grid span: assign one more column to player, reducing one from the others

Make sidebar responsive, implement active menu functionality in sidebar for both desktop and mobile size

Make top charts component, very similar to top artists and groovy component, copy/paste

[UI/UX] Create a UI design for Albums page

Create a Figma file for the Albums page, you can refer to the Spotify web player !!

Steps :

1. Fork and clone it
2. Install dependencies
3. Open the folder "design"
4. Create a new sub-folder called "Mobile- Explore_page"
5. Add a Figma/image file of the design u created
6. Push it and create a PR

make a ui design of explore page for mobile view

basic layout where we keep player fixed on bottom and other things scrollable

fix overall left padding on this screen size, iphone 12pro(390x844)