Building the ATP Dashboard Tennis.com with Javascript

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. I used tennis-api.com

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 from tennis-api.com

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 from tennis-api.com 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