[HACKTOBERFEST] Style: Profile Page UI Redesign #119
Description
🎨 [HACKTOBERFEST] UI/UX Revamp: Profile Page Redesign & Stats Visualization
📌 Description
The current Profile Page UI feels plain and lacks hierarchy — it doesn’t highlight user achievements or community interactions effectively.
Essential details like solved problems, streaks, and Codeforces info appear as raw text with too much whitespace, giving an unbalanced look.
This issue aims to redesign the Profile Page into a more professional, production-grade layout similar to LeetCode, GitHub, and Codeforces profiles.
⚙️ Current Problems
- 📉 Stats (
Solved,Followers,Following,Ratings) lack visual emphasis or icons. - 🧾 Codeforces data (rank, rating, max rating) is plain text — no tier-based color or structure.
- 🏞️ Right-side illustration feels disconnected and adds little value.
- ⚪ Excessive whitespace makes the profile look incomplete.
- 🎯 No visual focus on streaks, coins, or gamified achievements.
🧩 Expected Improvements
1. Profile Header
- Prominent banner with profile picture, username, and tagline.
- Add a level/streak badge beside the username.
- Include an Edit Profile button for updating photo and name.
2. Stats & Achievements Section
- Show
Solved,Coins,Followers,Following, andStreakas styled stat cards. - Use icons or gradients for each stat:
- 🧠 Solved
- 🪙 Coins
- 🔥 Streak
- 👥 Followers
- Optional animation when stats update (e.g., streak increases).
3. Codeforces Integration Section
- Add colored rank badges according to Codeforces tiers (Newbie → Red Coder).
- Show rating progression via a progress bar or circular gauge.
- Clean two-column layout for handle, rank, rating, and max rating.
4. Activity / Right Panel
- Replace current illustration with functional visualizations:
- 📈 Recent submissions or solved problems
- 📆 Streak calendar
- 🧩 Recent quizzes or POTDs solved
- Add smooth transitions or hover animations for interactivity.
5. Theming & Layout
- Improve spacing, alignment, and use of accent colors from the CanonForces palette.
- Use neumorphism or subtle shadows for stat cards.
- Ensure the design is responsive and mobile-friendly.
🧱 Relevant User Schema
Below is the current structure of the user document in Firestore to help contributors understand available fields:
{
"userId": "",
"username": "",
"fullname": "",
"emailAddress": "",
"photoURL": "",
"coins": 105,
"streak": 2,
"lastSolvedDate": "2025-10-25",
"correctAnswers": 19,
"totalAnswers": 26,
"quizzesPlayed": 8,
"following": [],
"followers":[]
"solvedQuestions": {
"800": ["p1200-2", "p800-1", "p800-2"],
"1000": ["p1400-2", "p900-2"]
},
"dateCreated": 1756658268219
}