Frontend: Create the Leaderboard Component

[Mkalbani]

🎯 Objective

Develop a Leaderboard Component that displays the top players' rankings. The design should match the Figma design and be fully responsive.

🔍 Context

The leaderboard will showcase players' names, scores, and rankings. It should be visually appealing, user-friendly, and accessible across different screen sizes.

📋 Tasks

• Create a Leaderboard.tsx component inside components/.
• Implement a ranking list that displays player names and scores.
• Ensure dynamic data rendering (accept props or use a mock array).
• Make the component fully responsive across all screen sizes.
• Integrate the component into the Leaderboard page (LeaderboardPage.tsx).

💻 Technical Implementation

1️⃣ Create Leaderboard.tsx inside components/.
2️⃣ Use a flex/grid layout for proper alignment of player rankings.
3️⃣ Accept props for leaderboard data or use a temporary mock array.
4️⃣ Ensure accessibility (proper HTML semantics and keyboard navigation).
5️⃣ Import and use the component in LeaderboardPage.tsx.

📌 Contributor Reminders

✅ Check the Contribution Guidelines: 🔗 CONTRIBUTING.md
✅ Sync with the latest changes from the LogiQuest repository before working on this issue.

📝 Acceptance Criteria

✅ The Leaderboard Component matches the Figma design.
✅ The component displays rankings, names, and scores properly.
✅ The leaderboard is responsive across all screen sizes.
✅ The component integrates correctly into LeaderboardPage.tsx.

💪 Skills Required

• React
• Tailwind CSS
• State Management (if needed)
• Responsive Design

📈 Difficulty
Medium

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 200 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[Folex1275]

@Folex1275 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I want to work on this component to ensure it is highly performant and responsive across all devices. I am interested in using Tailwind CSS to create a layout that remains readable and visually balanced whether a user is on a mobile device or a desktop. I also look forward to setting up the dynamic data rendering using props, ensuring the component is ready to scale once it is connected to the real-time player database.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Folex1275 to this issue.

[S4V10N]

@S4V10N has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

i would like to work on this issue because i have experience in building something similar

ℹ️ Repo Maintainers: To accept this application, review their application or assign @S4V10N to this issue.

[respp]

@respp has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello @Mkalbani! Can I take this issue?

I'm a developer with a solid background in Web3, working across both front-end and back-end. Currently, I'm a maintainer at Koopay and StellarRent, where I lead the development of smart contracts and decentralized infrastructure. You can check out my profile to see my contributions to the most important projects within the Stellar ecosystem.

Additionally, I have experience working in other ecosystems such as StarkNet, Optimism, and Worldcoin, with a focus on building scalable, secure, and efficient blockchain applications.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @respp to this issue.

[luighis]

@luighis has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello, I'm a front-end UI/UX developer with experience in Next.js, TypeScript, Shadcn, Zustand, Tailwind CSS, and more.

I'd love to take on this issue.
I actively contribute to several open-source projects and deliver high-quality pull requests. The code will be clean, composable, and will follow quest-frontend conventions, etc.

I'm in the Telegram group: logicQuest

ℹ️ Repo Maintainers: To accept this application, review their application or assign @luighis to this issue.

[Macnelson9]

@Macnelson9 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi team, I’d like to work on this issue.

I’m a Frontend Developer who thrives at the intersection of UI polish + product usability, and I’ve shipped responsive components/pages using Next.js/React + Tailwind (including interactions, animations, and pixel-accurate Figma builds).

What I’ll deliver

Leaderboard Component implemented to match the design/spec

Responsive behavior (mobile + desktop), no layout breakage

Hover/focus states + accessible semantics

Clean, reusable components and consistent styling

Approach

Review the design/spec and existing code patterns

Build the UI + interactions

QA on multiple breakpoints + open a PR with screenshots/video

If assigned, I’ll start immediately and share progress updates in the PR.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Macnelson9 to this issue.

[Jayrodri088]

@Jayrodri088 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello @Mkalbani Can I take this issue?

I'm a developer with a solid background in Web3, working across both front-end and back-end. You can check out my profile to see my contributions to the most important projects within the Stellar ecosystem.

Additionally, I have experience working in other ecosystems such as StarkNet, Optimism, Worldcoin, and I have already contributed multiple times to Akkuea, Offer-Hub and kindifi.

My ETA on this issue will be 5 hours

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Jayrodri088 to this issue.

[asalisu6580]

@asalisu6580 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I want to work on this issue because the leaderboard is a core feature of the product—it directly reflects user performance and motivation. If the leaderboard is not clear, accurate, or responsive, it can easily affect how users perceive fairness, engagement, and overall quality of the application. That makes this component especially important to get right.

From a frontend perspective, I understand that a leaderboard is more than just a list. It requires clean data handling, proper ranking logic, clear visual hierarchy, and responsive layout to ensure it works well on all devices. I have experience building React components that render dynamic data, use flexible grid or flex layouts, and closely follow Figma designs while maintaining accessibility and readability.

I’m also careful about integration—making sure the component fits seamlessly into the page structure (LeaderboardPage.tsx), follows existing patterns in the codebase, and remains easy to maintain or extend in the future. I pay close attention to accessibility, consistency, and edge cases, which I believe are critical for a feature that users interact with frequently.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @asalisu6580 to this issue.

[drips-wave]

Congratulations, @S4V10N! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on January 31, 2026.

🧑‍💻 @S4V10N: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

⚠️ Important: When opening a PR, please link it to this issue to ensure it gets tracked accurately.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[Chucks1093]

@Chucks1093 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello MindFlowInteractive, I am a full stack engineer and I want to work on this issue.

I will create components/Leaderboard.tsx as a reusable component that renders a ranking list with proper semantics, takes typed props for leaderboard data (and falls back to a small mock array), and uses a clean flex or grid layout for alignment.

I will match the Figma spacing and styles with Tailwind, make it responsive for mobile and desktop, and ensure keyboard navigation works for the list items.

I will then wire it into LeaderboardPage.tsx and confirm the rankings, names, and scores render correctly across breakpoints.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Chucks1093 to this issue.

[Jeyvers]

@Jeyvers has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi Bani. I’d like to work on this. I recently joined the wave so my hands are free. I have years of experience building, so I’ll deliver quality code. I do TS, JS, React, Tailwind, responsive design, component-based architecture, and state management—everything needed to build a clean, dynamic, and fully responsive leaderboard component. Looking forward to it.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Jeyvers to this issue.

[Danielodingz]

@Danielodingz has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi 👋 i'm Danii,
I would like to work on this issue. i have experience building frontend applications and this would be a great fit for me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Danielodingz to this issue.

[Jopsan-gm]

@Jopsan-gm has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello maintainers 👋

I’ve reviewed this issue and the relevant parts of the codebase. I’m a junior full-stack developer with hands-on experience contributing to real-world open source projects across both Web2 and Web3 contexts. My work includes JavaScript/TypeScript-based stacks, React on the frontend, Node.js on the backend, as well as contributing to blockchain-related repositories, including smart contract logic and protocol-level features.

I’m comfortable reading and understanding existing codebases, reasoning about on-chain and off-chain interactions, and delivering clean, focused implementations aligned with the project’s conventions. I’m used to working through GitHub workflows, iterating based on feedback, and prioritizing maintainability and clarity.

This issue aligns well with my experience, and I believe I can provide a solid and reliable solution. If it’s still available, I’d be happy to take it.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Jopsan-gm to this issue.