API Explorer

Overview

API Explorer is a full-stack web application that allows users to execute external REST APIs and inspect their responses. The application acts as an API client where users can send HTTP requests (GET, POST, PUT, DELETE), view the response details, and maintain a history of executed requests.

The backend is implemented using Java 21, Spring Boot, Spring Data JPA, and H2 Database, while the frontend is built using React, TypeScript, Vite, and Axios.

Features

• Execute external REST APIs
• Support for GET, POST, PUT and DELETE requests
• Display HTTP response status
• Display response headers
• Display response body
• Measure API response time
• Store request history in H2 database
• View request history
• Delete request history
• Input validation
• Centralized exception handling

Technology Stack

Backend

• Java 21
• Spring Boot 3.x
• Spring Web
• Spring Data JPA
• H2 Database
• Java HttpClient
• Maven

Frontend

• React
• TypeScript
• Vite
• Axios

Backend Design

The backend follows a layered architecture.

Controller

Handles incoming HTTP requests and delegates the processing to the service layer.

Service

Contains the business logic for

• Executing external APIs
• Measuring response time
• Saving request history
• Building response DTOs

Repository

Provides database access using Spring Data JPA.

Entity

Represents the request history table in H2.

DTO

Transfers data between frontend and backend.

Exception Handler

Provides centralized exception handling.

Frontend Design

The frontend follows a component-based architecture. Components include:

• Header
• RequestForm
• ResponseViewer
• HistoryTable

The frontend communicates with the backend using Axios.

REST APIs

Execute API

POST /api/explore

Request

{
  "method": "GET",
  "url": "https://jsonplaceholder.typicode.com/posts/1",
  "requestBody": ""
}

Response

{
  "status": 200,
  "responseTime": 120,
  "headers": {},
  "body": "{...}"
}

Get History

GET /api/history

Delete History

DELETE /api/history/{id}

Database

The application uses an in-memory H2 database.

Table:

API_REQUEST_HISTORY

Columns

Column	Description
ID	Primary Key
METHOD	HTTP Method
URL	Requested URL
REQUEST_BODY	Request Payload
STATUS	HTTP Status
RESPONSE_TIME	Response Time
CREATED_AT	Timestamp

---

Running the Backend

Prerequisites

• Java 21
• Maven 3.9+

Navigate to the backend folder

cd api-explorer-backend

Run the application

mvn spring-boot:run

The backend starts on

http://localhost:8080

Running the Frontend

Prerequisites

• Node.js 20+
• npm

Navigate to the frontend folder

cd api-explorer-frontend

Install dependencies

npm install

Run the application

npm run dev

Frontend URL

http://localhost:5173

H2 Database

Open

http://localhost:8080/h2-console

Use

JDBC URL
jdbc:h2:mem:apiexplorer

Username

sa

Password

(blank)

---

Testing the Application

Test 1

Execute GET request

Method

GET

URL

https://jsonplaceholder.typicode.com/posts/1

Expected

• HTTP Status 200
• Response displayed
• History updated

---

Test 2

Execute POST request

POST

https://jsonplaceholder.typicode.com/posts

Body

{
  "title": "Java",
  "body": "Spring Boot",
  "userId": 1
}

Expected

• HTTP Status 201
• JSON Response
• History updated

---

Test 3

Execute PUT request

PUT

https://jsonplaceholder.typicode.com/posts/1

Expected

• HTTP Status 200

---

Test 4

Execute DELETE request

DELETE

https://jsonplaceholder.typicode.com/posts/1

Expected

• HTTP Status 200

---

Test 5

Invalid URL

abc

Expected

Validation error.

---

Test 6

Empty URL

Expected

Validation error.

---

Test 7

History

Open

GET /api/history

Verify all requests are stored.

---

Test 8

Delete History Delete a record. Verify the record is removed.

Assumptions

• The application supports HTTP methods GET, POST, PUT and DELETE.
• External APIs must be publicly accessible.
• HTTPS endpoints are supported.
• Request history is stored only during application runtime because H2 is configured as an in-memory database.
• Authentication mechanisms such as OAuth or API keys are outside the current project scope.
• Large file uploads and multipart requests are not supported.

Error Handling

The application provides centralized exception handling using @RestControllerAdvice.

Handled scenarios include

• Invalid request data
• Unsupported HTTP methods
• Invalid URLs
• Unexpected server errors