Osu! Dashboard

The Osu! Dashboard is a Next.js dashboard template that fetches a player's general and recent statistics from the osu! API and renders them as interactive charts, refreshing automatically whenever the page regains focus.

What is the Osu! Dashboard?

The Osu! Dashboard (also written as Osu Dashboard) is an open-source dashboard built with Next.js that visualizes the statistics of an osu! player using the official osu! API and OAuth 2 authentication. It takes an osu! account as input and outputs a set of line, doughnut, bar, and radar charts plus numeric overviews covering recent performance, accuracy, rank evolution, and global rankings. The project is maintained by Romain Guarinoni and the live version is deployed at osu-dashboard.vercel.app.

Key Features

• Recent accuracy evolution — a line graph tracking a player's accuracy over recent plays.
• Recent difficulty graph — a line graph showing the difficulty of recently played maps.
• Rank evolution — a line graph of a player's rank changes over recent sessions.
• Recent mod played — a doughnut graph breaking down which gameplay modifiers were used recently.
• Recent activity — a bar graph displaying recent play activity.
• Average map stats — a radar graph summarizing average map statistics from recent plays.
• General and global statistics — numeric readouts for map rank number and global statistics, shown without graphs.
• Automatic data refresh — data is re-fetched whenever the page regains focus or is refreshed, using the useSWR library.

The tech stack includes Next.js for the framework, useSWR for client-side data fetching, the osu! API as the data source, and Vercel for hosting.

Who is it for?

• osu! players who want a detailed visual breakdown of their recent performance, accuracy, and rank evolution.
• Open-source developers looking for a working example of integrating the osu! API with OAuth 2 in a Next.js application.
• Dashboard builders seeking a ready-made analytics dashboard template that demonstrates live data refetching patterns with useSWR.

What can you do with the Osu! Dashboard?

• Track recent performance: Monitor accuracy evolution, difficulty progression, and rank changes through line graphs.
• Analyze mod usage: See which mods you've been using most frequently via the doughnut graph.
• Review overall standing: Check your map rank number and global statistics as numeric summaries.
• Deploy your own instance: Use the open-source code to create a personalized dashboard for any osu! player by connecting their account.

How does the Osu! Dashboard work?

The dashboard authenticates with the osu! API via OAuth 2, retrieves the player's recent and general statistics, and renders them as charts. Data is refetched automatically every time the page is refocused or refreshed, using the useSWR data-fetching hook. The live version is hosted at osu-dashboard.vercel.app, and you can report bugs or request features through the GitHub issues page.