Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redesign of the Complete Website UI #100

Open
Pawank06 opened this issue Sep 16, 2024 · 10 comments
Open

Redesign of the Complete Website UI #100

Pawank06 opened this issue Sep 16, 2024 · 10 comments

Comments

@Pawank06
Copy link

Redesign of the Complete Website UI

This issue addresses the full redesign of the website's user interface to improve user experience and modernize the overall look and feel.

Why Redesign?

The current UI feels outdated and does not provide an optimal user experience. The redesign introduces a more visually appealing layout, making the website more engaging and easier to navigate.

Changes Made

  • Updated Landing Page to create a more welcoming and clean first impression.
  • Revamped Dashboard for better usability and a more modern appearance.

Before and After Comparisons

Landing Page

Before:
image

After:
image

Dashboard

Before:
image

After:
muze(1)


What’s Next?

waiting for the approve so I can make a PR.

@Pawank06 Pawank06 changed the title Redesign complete webapp Redesign of the Complete Website UI Sep 16, 2024
@Pawank06
Copy link
Author

@hkirat

@ItsFlash10
Copy link
Contributor

ItsFlash10 commented Sep 16, 2024

Bro cooked well xD
Good work bro @Pawank06
Is this FIGMA or have you already revamped it as well?

@Pawank06
Copy link
Author

Bro cooked well xD Good work bro @Pawank06 Is this FIGMA or have you already revamped it as well?

thank you bro,

It's a Figma design. as now I built the landing page and am now working on the dashboard.

@SujithThirumalaisamy
Copy link
Collaborator

Looks good. but there are few things that we need before this thing to happen

  1. We need to have the active users tracked to list them somehow to track the vote percentage ( Yeah can be done only with the total vote count of all the available songs in a particular stream) But will be more intresting if we could show the profile icons who are voted to that particular song
  2. A solution to find the genre of the song to have the fan favo feature.
  3. Showing the progress bar is also a pretty hard thing to do. We also need to add other streaming platforms also.

If you could comeup with some basic solutions for these. I'll be happy to assist further on making this prod ASAP. UI looks good.

@M4N4N22
Copy link

M4N4N22 commented Sep 16, 2024

Looks good. but there are few things that we need before this thing to happen

  1. We need to have the active users tracked to list them somehow to track the vote percentage ( Yeah can be done only with the total vote count of all the available songs in a particular stream) But will be more intresting if we could show the profile icons who are voted to that particular song
  2. A solution to find the genre of the song to have the fan favo feature.
  3. Showing the progress bar is also a pretty hard thing to do. We also need to add other streaming platforms also.

If you could comeup with some basic solutions for these. I'll be happy to assist further on making this prod ASAP. UI looks good.

I think one quicker way for displaying the avatar/profile of the user who voted for the song is by using spotify api after authenticating the users with spotify OAuth.

@M4N4N22
Copy link

M4N4N22 commented Sep 17, 2024

@Pawank06 can u explain the functionality of the buttons on the sidebar

@Pawank06
Copy link
Author

@Pawank06 can u explain the functionality of the buttons on the sidebar

Which button, adds to the queue?

It's pretty self-explanatory. After a user searches for or pastes a song link, the video or thumbnail will appear in the 'No video added' space. After that, the user can click the 'Add to Queue' button to add the song to the queue. Other users can upvote the song if they also want it to be played next.

@Pawank06
Copy link
Author

Looks good. but there are few things that we need before this thing to happen

1. We need to have the active users tracked to list them somehow to track the vote percentage ( Yeah can be done only with the total vote count of all the available songs in a particular stream) But will be more intresting if we could show the profile icons who are voted to that particular song

2. A solution to find the genre of the song to have the fan favo feature.

3. Showing the progress bar is also a pretty hard thing to do. We also need to add other streaming platforms also.

If you could comeup with some basic solutions for these. I'll be happy to assist further on making this prod ASAP. UI looks good.

Yes, we need to figure it out.

I think for now we don't have the voting logic for users. We need to create that logic, and once that's done, most of the work will be done which are listed on that design. The only remaining thing, I guess, will be the genres.

If anyone wants to collaborate on these features, feel free to DM me on Twitter so we can discuss and avoid any conflicts further: Pawan.

@M4N4N22
Copy link

M4N4N22 commented Sep 17, 2024

@Pawank06 can u explain the functionality of the buttons on the sidebar

Which button, adds to the queue?

It's pretty self-explanatory. After a user searches for or pastes a song link, the video or thumbnail will appear in the 'No video added' space. After that, the user can click the 'Add to Queue' button to add the song to the queue. Other users can upvote the song if they also want it to be played next.

The area you are referring to is called a section of the main content, i was referring to sidebar, sidebar is generally/mostly a collapsing navigation bar which you have added on the left side,where only the home button is self explanatory to me, what are the functionalities of the rest of the three buttons below it.

@Pawank06
Copy link
Author

@Pawank06 can u explain the functionality of the buttons on the sidebar

Which button, adds to the queue?
It's pretty self-explanatory. After a user searches for or pastes a song link, the video or thumbnail will appear in the 'No video added' space. After that, the user can click the 'Add to Queue' button to add the song to the queue. Other users can upvote the song if they also want it to be played next.

The area you are referring to is called a section of the main content, i was referring to sidebar, sidebar is generally/mostly a collapsing navigation bar which you have added on the left side,where only the home button is self explanatory to me, what are the functionalities of the rest of the three buttons below it.

I added it intentionally. For now, it doesn’t do anything, but we might have additional pages in the future (which I don’t know about yet). I included it just to fulfill the design.

This was referenced Sep 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants