DEV Community

Cover image for i built a react library for adding leaderboards to your app in minutes
Dylan Molina
Dylan Molina

Posted on

4 1 1 1 1

i built a react library for adding leaderboards to your app in minutes

yo, what's up đź‘‹

i'm dylan - a high school senior and a software builder.

in the last two days i've built the first version of flywheel - a react library with one component (for now) - a dynamic leaderboard that’s hooked up to your app’s data and ranks items the way you want them to be ranked.

i made a quick demo of me going from create-react-app to a fully working leaderboard in 4 minutes lol:


how i got here is a pretty long story lol. here's a quick TL;DR if you're interested

i built + launched the original version of flywheel at a hackathon in san francisco on february 1st.

it used to be a platform where founders could join a leaderboard w/ their founder friends based on their number of users - but then game devs and community builders started asking me to build leaderboards for them lol.

the more i thought about it and the more people i talked to the more i realized that adding leaderboards to your app can be a real pain - especially if you need it fast for a small project or a hackathon. i esp felt this pain since i was building the leaderboard manually for the original product.

so i built a web app where you could fill out a couple of inputs and get a link to a leaderboard you could share with your users/players/friends for them to join.

but users wanted more control.

they wanted to not only embed the leaderboards in their frontends but to have more granular access to the columns + props that the leaderboard used.

so i shipped this!


the library is fully open-source btw.

also s/o to tremor and tailwind - i'm using them for the skeleton + styling of the leaderboard cards (for now).

lmk what you think!

i'm working w/ a couple co's to test the components w/ their data and am gonna be iterating quickly. this is just v0.0.9!

p.s. i also wrote up some docs in case you're looking for a more technical dive into flywheel :)


written with ❤️ and 🍵 by dylan (a fellow dev)

Top comments (1)

Collapse
 
dylanintech profile image
Dylan Molina •

hope ya'll find this useful - if you wanna use it + have really custom requests for what you want out of the leaderboard feel free to set up a quick chat w/ me here :)

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay