Building the ATP Dashboard Tennis.com with Javascript

junio 06, 2026

Building the ATP Dashboard

The goal of this project was to create a web page capable of displaying ATP rankings in a simple and visually appealing way. To accomplish this, I built a dashboard that retrieves data directly from Tennis API using JavaScript and the Fetch API.

The application includes several useful features:

ATP Top 3 players overview.
Total number of players returned by the API.
Dynamic player search.
Interactive ATP ranking table.

All information is loaded in real time and updated whenever the page is refreshed.

You can try the live version of the dashboard here:

ATP Tennis Dashboard Demo

I also recorded a short video showing how to obtain an API Key through RapidAPI, explore the available endpoints, and test the dashboard:

Watch the English Video Tutorial

Download the Source Code

If you'd like to experiment with the project or customize it for your own applications, the complete source code is available for download.

The package includes:

Complete HTML source code.
JavaScript integration with Tennis API.
ATP ranking dashboard.
Player profile functionality.
Search feature.
Setup instructions.

Download ATP Tennis Dashboard Source Code

Displaying Player Profiles

One feature I wanted to add was the ability to display detailed information about each player. To achieve this, every player name in the ranking table acts as a clickable link that triggers a second API request.

When a player is selected, the dashboard retrieves information such as:

Current ATP ranking.
Country.
Height.
Weight.
Coach.
Date of birth.
Professional debut year.
Birthplace.

This transforms the dashboard into an interactive application where users can explore detailed information about professional tennis players.

Technologies Used

HTML
CSS
JavaScript
Fetch API
RapidAPI
Tennis API