yashchaudhari008/codechef_cards

[NO LONGER MAINTAINED] WebApp to compare your rating and ranking with friends on codechef platform.

💫 About Me:

🖥 Full Stack Web Developer
🎓Pursuing Bachelors Degree in Computer Engineering

---

🌐 Socials:

---

💻 Tech Stack:

---

📊 GitHub Stats:

---

codechef_cards's Issues

Feature Request: Arrange cards according to rating.

• Currently cards are displayed in the order they were added(username).

Let cards be arranged according to the rating of user. (Probably Ascending Order)

Add an alert component

Whenever there's an error, like entering an invalid or existing username, a native alert is called from the browser.

It would be better if there were a reusable component that displays an alert with matching UI style with the rest of the website. The alert could be called with a custom message.

Bug: Inconsistency with localStorage keys

In the useEffect, the app gets the usernames from the localStorage using the key "usernames", but in the AddUserMenu component it gets added by the "users" key.

Background enhancement : Adding Particles.js in background

Improve the UI

Alert user when Invalid/already_existing username is entered.

Currently invalid username is printing in console ( console.alert("Cannot Fetch Data From API, ",error) ) we can show the message as alert or we can print the message on screen, so that user can know that the username is invalid.

Enhancement for mobiles (Show details on demand)

Hide more_details on mobile and show button to open it.

UI Improvement : Changing card colour according to codechef star colour.

By default it shows the card in purple colour. It would be much better to change the colour according to the rating of the user accordingly.

Co-incidently, i am 4 star on codechef, and it was showing purple. But my friend who is 5 star, her profile was also showing purple. She suggested for yellow colour for her profile. From there I got this idea 👍
Please add any more improvements, I would like to contribute to the this issue.

UI Improvement: Add cross button(replacing delete button) and minimize few card details.

Having profiles saved in a local memory is alright since it prevents typing the same handles, again and again, every time open this tool, but I guess they do not get cleared from storage even when the delete button is clicked, due to which they get temporarily removed from the page, but get reappeared sometimes as the page is reloaded or visited again. This issue has been observed with multiple additions and deletions. I believe this is an issue and needs to be fixed.

Also, for the current temporary removal functionality of the Delete button, a cross button at the top-right could be considered that could either remove the card HTML straightaway or could also just set its visibility to hidden or display to none. Along with it, can we also have a card minimize button alongside? Any other suggestions are also welcome.

UserName Input borders problem

When I selected this input, Input borders not look like good I can fix this style problem

Change localStorage naming.

• Change the local storage name to avoid confusion between apps published on the same domain.

SUGGESTED:- Use "Codechef_Cards" as the key and store JSON value containing all required data to be stored.

Show alert modal when adding an invalid username

Adding an user with an invalid username logs "Invalid username" to the console. but doesn't actually show anything on the site itself to let the user know that the username was invalid.
I'd like to change it so an alert modal pops up when that happens - please assign me to this issue.

UI/UX : Redesign Topbar

The current Topbar doesn't look well and feels odd. (Especially for larger screens)

Certain UI changes

Instead of ADD better to use "CHECK" in the button and a title for the card entering the username because with the dropdown list the user may confuse where to enter the name.
Can i work on this ?

Bug: Missing dependency: 'fetchData'

Getting Warning -

Refactor app to use react?

Should I refactor the current code to work with react?

Making the Copyright Year in Footer update automatically.

It will be better if the copyright year updates automatically.

Enhanced Dark Mode

Issue:

I checked your website interface, It's quite good but felt that dark mode colour palates could be improved, even the position of the drop-down card. Please have a look and let me know your review.

Orignal Interface

Modified Interface

change in css

Want to change some css in add button and also want to add some padding and margin

UI Improvement: Display card theme according to User Stars on Codechef

Instead of the usual, All-Purple theme, we could color the respective cards according to the general Codechef color Scheme for Star Levels.

For Instance

• 1* --> Grey
• 2* --> Green
• 3* --> Blue
• ...

A few UX enhancements

Be able to trigger the add button by pressing 'Enter' key, better UX for Computers.
Pointer cursor when we hover over the delete button(missing).

UI Improvement: Add Toggle to Show/Hide Menu

Add a toggle button to show and hide this menu.

Expected:-

Replace null for users that don't have a star yet.

Right now users that don't have stars get null next to their rating. It should be replaced with something more readable.

Maybe it could be replaced with 0★ or unstarred.

UI Improvement : Displaying country name and flag.

I would like to suggest some improvements in UI.

• Displaying country of user.
• Adding country flag. Something similar to this.

Please add any more improvements, I would like to contribute to the this issue.

JavaScript file is messy

I think that the current JS file that is being used for all scripts is a bit messy. Perhaps scripts should be divided up based on their use cases. For example:

• showAlert(), closeAlert(), ... -> 'res/scripts/alert.js'
• getDetails(), createCard(), ... -> 'res/scripts/users.js'

This would just make it much easier for contributors and anyone else looking through the code to be able to understand what different things do.

UI Improvement: Auto focus input when users open the menu-bar

After opening the menu bar, the user has to click on the input field before they can add usernames, creating a little inconvenience, especially since the menu bar closes after a username is added. So when a user wants to add a bunch of usernames in succession, they have to keep clicking on the chevron icon and the input element.

Whenever the user toggles the menu-bar to reveal the input for the username, the input element should receive focus immediately so the user can type immediately without having to click the input element.

Feature Request: display problems solved for current day, week, month

Loved the app, however it would be nice if I could see how many problems my friends have solved today, in the current week and in the current month

Add fully solved questions and partially solved questions by a person on codechef

Can we add fully solved questions and partially solved questions?

Ask/Confirm before deleting user.

Currently user gets deleted immediately after clicking delete button( 'X' icon). We should ask from user whether he really wants to remove the user.

Show spinner while the app is fetching the data from the API

Just a simple spinner or a loading text whenever the app is still fetching the data from the API., so it doesn't just show a blank container.

"Highest Rating" is being showed as "Highest Rank".

In the website it is showing highest rating as highest rank.Though this is a very small issue I would like to make changes as this could be confusing for others. As I am a beginner in the open source field I want to start from contributions from this.Can you please allow me to do the required changes?

Box Symmetrical

Will Look More Beautiful if all boxes are symmetrical

align item center on button

here i can align them center so they look better