Building a leaderboard for a game
Unanswered
Morelet’s Crocodile posted this in #help-forum
Morelet’s CrocodileOP
I just want to learn and something ive wanted to do is just a webpage that you can click a button and score increases, this is easy and I have already made that part but what I want to do is store the clicks from each user in a database so when you rejoin it will save ( I know I can do this with browserstorage but that cant have a leaderboard) and the functionality is a leaderboard with the highest clicks that all users can see.
16 Replies
Morelet’s CrocodileOP
I have basic knowledge of JS
Vannilla JS
Asian black bear
Oh this is web-based now? I thought you wanted to wire up your Godot-based game with a leaderboard. Has that changed?
Asian black bear
I'm busy making dinner, I'll get back to you in a few minutes.
@Asian black bear I'm busy making dinner, I'll get back to you in a few minutes.
Morelet’s CrocodileOP
Thats fine!
Asian black bear
You have several options depending on the type of setup you want, how you plan to host everything, and which languages/tools you are already familiar with.
In any case, you will need an application running that can receive score reports from users (let’s call this the server for now).
If you host in a serverless environment such as Vercel or Netlify, you’ll need persistent storage for the results. This means setting up a database (there are various providers for this) and configuring the server to connect to the database in order to write or update the results.
Alternatively, if you choose not to use a serverless environment and prefer to host the server yourself (e.g., on a VPS), things can become a bit simpler. Hosting may require a bit more effort to set up, as you don’t get everything pre-configured out of the box, but you could use a simpler database. This could be a basic file on the machine for data storage, or even easier, an in-memory data structure that is available as long as the server is running.
To display the results, you need to decide whether to integrate them into your existing app/game or create a dedicated app/page for the leaderboard. The first option allows the server to remain lightweight and straightforward, without requiring tools like React or Next.js. The second option, creating a dedicated app or page, can be achieved by using a server to provide the data to a frontend built with plain React. Alternatively, if you want to combine the frontend and backend for the leaderboard into a single application (at the cost of learning more than just React), you can use Next.js. Next.js is a full-stack framework that enables you to write both backend and frontend code seamlessly.
Since your goal is to experiment and learn, there is no definitive right or wrong choice here. In technology, there are always trade-offs rather than absolute answers. Choose the approach that best aligns with your goals and interests.
In any case, you will need an application running that can receive score reports from users (let’s call this the server for now).
If you host in a serverless environment such as Vercel or Netlify, you’ll need persistent storage for the results. This means setting up a database (there are various providers for this) and configuring the server to connect to the database in order to write or update the results.
Alternatively, if you choose not to use a serverless environment and prefer to host the server yourself (e.g., on a VPS), things can become a bit simpler. Hosting may require a bit more effort to set up, as you don’t get everything pre-configured out of the box, but you could use a simpler database. This could be a basic file on the machine for data storage, or even easier, an in-memory data structure that is available as long as the server is running.
To display the results, you need to decide whether to integrate them into your existing app/game or create a dedicated app/page for the leaderboard. The first option allows the server to remain lightweight and straightforward, without requiring tools like React or Next.js. The second option, creating a dedicated app or page, can be achieved by using a server to provide the data to a frontend built with plain React. Alternatively, if you want to combine the frontend and backend for the leaderboard into a single application (at the cost of learning more than just React), you can use Next.js. Next.js is a full-stack framework that enables you to write both backend and frontend code seamlessly.
Since your goal is to experiment and learn, there is no definitive right or wrong choice here. In technology, there are always trade-offs rather than absolute answers. Choose the approach that best aligns with your goals and interests.
Technically you'll face a few challenges such as recognizing existing players (which you'll need to solve with a suitable implementation) as well as receiving malicious requests and spam (which you may disregard if you just want to experiment without actually publishing it to anybody else).
Your first steps should be to pick the technologies and tools you want to use to build everything which will inform you about the topics you'll have to learn along the way.
@Asian black bear You have several options depending on the type of setup you want, how you plan to host everything, and which languages/tools you are already familiar with.
In any case, you will need an application running that can receive score reports from users (let’s call this the server for now).
If you host in a serverless environment such as Vercel or Netlify, you’ll need persistent storage for the results. This means setting up a database (there are various providers for this) and configuring the server to connect to the database in order to write or update the results.
Alternatively, if you choose not to use a serverless environment and prefer to host the server yourself (e.g., on a VPS), things can become a bit simpler. Hosting may require a bit more effort to set up, as you don’t get everything pre-configured out of the box, but you could use a simpler database. This could be a basic file on the machine for data storage, or even easier, an in-memory data structure that is available as long as the server is running.
To display the results, you need to decide whether to integrate them into your existing app/game or create a dedicated app/page for the leaderboard. The first option allows the server to remain lightweight and straightforward, without requiring tools like React or Next.js. The second option, creating a dedicated app or page, can be achieved by using a server to provide the data to a frontend built with plain React. Alternatively, if you want to combine the frontend and backend for the leaderboard into a single application (at the cost of learning more than just React), you can use Next.js. Next.js is a full-stack framework that enables you to write both backend and frontend code seamlessly.
Since your goal is to experiment and learn, there is no definitive right or wrong choice here. In technology, there are always trade-offs rather than absolute answers. Choose the approach that best aligns with your goals and interests.
Morelet’s CrocodileOP
Thanks, clearing things up, I have my PC and a Raspberry Pi 4 for hosting myself which I could use, The leaderboard would be on the side of the game Hosted as a website.
Preferably I would like to use Vercel as setting up the actual website hosting has proved extremely difficult with my router and network setup in my house.
Preferably I would like to use Vercel as setting up the actual website hosting has proved extremely difficult with my router and network setup in my house.
Im not worried about getting player IDs, I will probably just let you input a username and upload you data and input it again to fetch it
Using browserstorage for if your on the same PC
Asian black bear
If you want to display the leaderboard in the game itself rather than a dedicated app/page then you don't need Next for the server at all. What you need is a language and a framework/library to write a small server-side app that has pretty mch two responsibilities: creating/updating an entry and getting an entry based on a username. (Let's ignore security and authentication since it's irrelevant for your experience at the moment.)
The most natural options are to just host a simple JavaScript/TypeScript-based backend using [Hono](https://hono.dev/) or [Express](https://expressjs.com/) which is a less modern version of Hono unless you are already more familiar with another language and server framework you'd prefer using. Alternatively there are dozens other languages with their own frameworks and it often ends up being pretty much similar, it often boils down to what flavor you want and for simple use cases as yours it's hard to make a wrong choice.
Running Express on Vercel as a platform is possible, I have no experience with Hono when it comes to that so that option would require some research. Hosting on Vercel will force you into using a separate database such as Neon, Vercel Postgres (which is just an expensive wrapper around Neon) or other options. This is technically not a huge issue but it forces you to learn how to interact with a database and thus you're forced to learn things such as an ORM. This is typically a library (highly recommend [Drizzle](https://orm.drizzle.team/) ) that allows you to send queries and mutations to a database, but that forces you to learn about the basics of SQL and database schemas if you don't have any experience with those yet.
Once you have such a backend running that interacts with the database your game can just send suitable request to it for when it wants to either report a new score or when it wants to fetch the leaderboard or current score of the active user. This can be done fairly "easily" with web standards in Vanilla JS.
The most natural options are to just host a simple JavaScript/TypeScript-based backend using [Hono](https://hono.dev/) or [Express](https://expressjs.com/) which is a less modern version of Hono unless you are already more familiar with another language and server framework you'd prefer using. Alternatively there are dozens other languages with their own frameworks and it often ends up being pretty much similar, it often boils down to what flavor you want and for simple use cases as yours it's hard to make a wrong choice.
Running Express on Vercel as a platform is possible, I have no experience with Hono when it comes to that so that option would require some research. Hosting on Vercel will force you into using a separate database such as Neon, Vercel Postgres (which is just an expensive wrapper around Neon) or other options. This is technically not a huge issue but it forces you to learn how to interact with a database and thus you're forced to learn things such as an ORM. This is typically a library (highly recommend [Drizzle](https://orm.drizzle.team/) ) that allows you to send queries and mutations to a database, but that forces you to learn about the basics of SQL and database schemas if you don't have any experience with those yet.
Once you have such a backend running that interacts with the database your game can just send suitable request to it for when it wants to either report a new score or when it wants to fetch the leaderboard or current score of the active user. This can be done fairly "easily" with web standards in Vanilla JS.
Oh and I forgot to mention that technically there is an SDK for Vercel Postgres which allows you to write SQL queries without the need to learn an ORM to begin with. It just requires that you learn basic SQL.
It then becomes a matter of writing something like this in the handlers for incoming requests
const { rows, fields } =
await sql`SELECT * FROM posts WHERE likes > ${likes} LIMIT 5;`;