Inspiration
This site acts as a hub for a daily-game speedrun devised by a youtuber named Stanz and commonly played by my friends and I for the past few months. Repeatedly setting up each game site manually was tedious, and completing runs without tracking our time was frustrating. This platform is designed to solve both problems while also sharing the excitement of these daily challenges with others.
What it does
Speedrundle allows users to:
- Enable/disable a variety of daily games from a curated collection of sites
- Reorder games to match their preferred speedrun sequence
- Launch every game in a timed sequence by pressing the central Start button When you begin a run, each game opens in a new browser tab (in your chosen order), and a timer starts automatically. Be sure to enable pop-ups! After completing all the games, you can stop the timer, finalize your run, and view your results. Your personal bests are stored in local storage and ranked accordingly. If you'd like to share your result with the community, you can submit your time to be reviewed and displayed on the public leaderboard.
How we built it
This is a full-stack web application built with:
- Frontend: React, HTML/CSS, JavaScript
- Backend: Node.js with Express.js
- Database: MongoDB for persistent leaderboard and site data The left-hand panel features a sortable list of daily games, implemented using @dnd-kit/sortable. This lets users drag-and-drop game entries to define their preferred run order. API calls dynamically populate both the list of sites and public leaderboard from the MongoDB database. Meanwhile, personal scores are saved locally using the browser's localStorage.
Challenges we ran into
One of the biggest challenges I ran into this project was getting used to all the new React toolkits and full stack implementations. This was my first personal full stack project that I made, so getting MongoDB linked at first took more time than expected.
Accomplishments that we're proud of
This was my first ever hackathon, so to begin, I am super proud of committing myself to completing a project that I have wanted to do for a while. As for the more technical achievements, here are the ones I am most proud of:
- Learned and implemented dnd-kit toolkit and other React elements to create a smooth and intuitive user experience
- Successfully integrated MongoDB as a database for dynamic data population through the use of node.js and express as my backend
What we learned
I touched on it mostly in my comments above, but this project mainly helped me learn dnd-kit as a toolkit to create sortable elements and use node.js and express to link my site to a database in MongoDB. On a more personal note, this project taught me the value of hackathons when it comes to personal growth and how satisfying it can be to build something you, your friends, and hopefully others online can use.
What's next for speedrundle
The next big implementation I would love to tackle is user authentication. Currently, most of the important private elements are dealt through localStorage, but that means someone who may access the site can only do so through a single browser/device, which can also be easily overwritten. User authentication means that a user of speedrundle can access speedrundle through any device, any browser, and anywhere as long as they can long into their account.
I would also love to include some form of mobile support, whether it be through an IOS/Android developed app or purely mobile support for the browser. I would need to look further into it to make a solid decision on my next steps, but both seem like an interesting new horizon for me!
Log in or sign up for Devpost to join the conversation.