codeforcauseorg / edu-client

Product focuses on 100% education as well as upskilling developing countries and rural areas.
https://educlient.codeforcause.org/
MIT License
130 stars 149 forks source link

Create design for My Achievements page #292

Open Abhijay007 opened 3 years ago

Abhijay007 commented 3 years ago

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

A My achievements page where users can see his/her rankings and achievement level, discussion answered, assignments competed, his/her top scores, badges, etc.

Describe the solution you'd like

Create a page UI for my achievement section under the profile section.

Abhijay007 commented 3 years ago

@Abhishek-kumar09 can I work on this?

vasudevsinghal commented 3 years ago

@Abhijay007 Yeah, go ahead.

rohan-kulkarni-25 commented 3 years ago

Hey Please add space to showcase badges also!

Abhijay007 commented 3 years ago

Hey Please add space to showcase badges also!

ok, I will also add that 😊

adarsh-technocrat commented 3 years ago

Hey, @Abhijay007 I would suggest making a Figma design first because that will reduce any kind of rework right and get approval from @Abhishek-kumar09, @vasudevsinghal.

and if you need any kind of UI suggestion or help in the design part you can ping me anywhere. πŸ˜ƒ

Abhijay007 commented 3 years ago

Hey, @Abhijay007 I would suggest making a Figma design first because that will reduce any kind of rework right and get approval from @Abhishek-kumar09, @vasudevsinghal.

and if you need any kind of UI suggestion or help in the design part you can ping me anywhere. πŸ˜ƒ

Ya! sure @adarsh-technocrat you can share the Figma design here I will try my best to implement code accordingly. We can discuss ideas and changes in UI in this thread 😊

adarsh-technocrat commented 3 years ago

sure @Abhijay007 I'll let you know!

adarsh-technocrat commented 3 years ago

Hey, @Abhijay007 can you please list down the things that we need to put in the My Achievement section! One thing already mentioned is showcase badges.

Abhijay007 commented 3 years ago

Hey, @Abhijay007 can you please list down the things that we need to put in the My Achievement section! One thing already mentioned is showcase badges.

ok, @adarsh-technocrat so I think that first on the top we can make a section where we can show profile pic, followers, and current achievement level, something like this:

main profiler

followed by this we can add a div section in which we can show details as courses completed, discussion answered, badges earned something like this :

detail div

and after this we can showcase some rare badges on the page like this by making a separate section like this:

badges

and by clicking on the badges we will redirect the user to a dedicated badges page where the user can see badges descriptions and details.

PS: ignore the color scheme, badge title, and other labeling, for now, πŸ˜„these are just some examples, and @adarsh-technocrat if you have more suggestions you can add them. I am also thinking about other sub-sections.

adarsh-technocrat commented 3 years ago

Great! @Abhijay007 sounds good I'll make something according to my imagination including your lovely suggestions and further we have different iterations on it as I complete the UI :)

let @Abhishek-kumar09 @vasudevsinghal also put their thoughts on the same!

Abhijay007 commented 3 years ago

Great! @Abhijay007 sounds good I'll make something according to my imagination including your lovely suggestions and further we have different iterations on it as I complete the UI :)

let @Abhishek-kumar09 @vasudevsinghal also put their thoughts on the same!

Ya! sounds good!!

adarsh-technocrat commented 3 years ago

Hey, @Abhijay007 actually I'm designing the UI here is the Figma link where you can see it :)

Abhijay007 commented 3 years ago

Hey, @Abhijay007 actually I'm designing the UI here is the Figma link where you can see it :)

ok, @adarsh-technocrat got it !! looks good πŸ‘

adarsh-technocrat commented 3 years ago

Hey, @Abhijay007 I think my achievement can be part of the gamification section because the things that we are putting in my achievement section it's a bit similar to those required in gamification section #166 what your thoughts?

Cc/ @Abhishek-kumar09

Abhijay007 commented 3 years ago

Hey, @Abhijay007 I think my achievement can be part of the gamification section because the things that we are putting in my achievement section it's a bit similar to those required in gamification section #166 what your thoughts?

Cc/ @Abhishek-kumar09

yes, @adarsh-technocrat these are quite similar but I believe that these issues can be break up into different PRs like we can make a separate leaderboard section instead of showing it as a part of the gamification or my achievements page and we can show raking of an individual on achievements page and we may also need to make a separate badge page to showcase an individual's performance. what I want to say that we can break this issue into multiple PRs and starting working on, each one by one for that we can set a GitHub milestone and try to discuss the various goals there about what we need to achieve in order to accomplish this task. we can discuss various possibilities and ideas there to make fully functional gamification or my achievements page like we may need a lot of ideas here, we need to make a whole Figma file include UI and need to break down that into smaller issues and PRs just like we did for main/basic design in starting of the project.

what are your thoughts on this?

adarsh-technocrat commented 3 years ago

yaa! @Abhijay007 I think let mentor clear this thing because until and unless we get familiar with the workflow of the application we cant take decisions right! and the UI that I'm making is a bit off track as per the theme of the application I need to change that. sorry for taking time for this :)

Abhijay007 commented 3 years ago

Hey, @Abhijay007 I think my achievement can be part of the gamification section because the things that we are putting in my achievement section it's a bit similar to those required in gamification section #166 what your thoughts? Cc/ @Abhishek-kumar09

yes, @adarsh-technocrat these are quite similar but I believe that these issues can be break up into different PRs like we can make a separate leaderboard section instead of showing it as a part of the gamification or my achievements page and we can show raking of an individual on achievements page and we may also need to make a separate badge page to showcase an individual's performance. what I want to say that we can break this issue into multiple PRs and starting working on, each one by one for that we can set a GitHub milestone and try to discuss the various goals there about what we need to achieve in order to accomplish this task. we can discuss various possibilities and ideas there to make fully functional gamification or my achievements page like we may need a lot of ideas here, we need to make a whole Figma file include UI and need to break down that into smaller issues and PRs just like we did for main/basic design in starting of the project.

what are your thoughts on this?

@Abhishek-kumar09 can I implement this?

rajatgupta24 commented 3 years ago

Hey, @Abhijay007 I think my achievement can be part of the gamification section because the things that we are putting in my achievement section it's a bit similar to those required in gamification section #166 what your thoughts? Cc/ @Abhishek-kumar09

my achievements page and we can show raking of an individual on achievements page and we may also need to make a separate badge page to showcase an individual's performance.

I also agree with @Abhijay007 & @adarsh-technocrat, On the achievements page, we can show the overall ranking of the user & things that can help him in improving it, whereas, on the badges page, we can show small tasks that users completed. I created a UI for badge page #239

Abhijay007 commented 3 years ago

I also agree with @Abhijay007 & @adarsh-technocrat, On the achievements page, we can show the overall ranking of the user & things that can help him in improving it, whereas, on the badges page, we can show small tasks that users completed. I created a UI for badge page #239

@rajatgupta24 , @adarsh-technocrat is working on a new UI design we can make PR according to that we are using a different approach this time, we are making a single profile section in which achievements page has a separate scrollable section.