API Explorer

A lightweight Postman-inspired API testing tool built with React, TypeScript, and Axios. It allows users to send HTTP requests, inspect responses, manage request history, save collections, and use environment variables.

---

Features

Core Features

• Enter API URL
• Select HTTP Method
  • GET
  • POST
  • PUT
  • PATCH
  • DELETE
  • HEAD
  • OPTIONS
• Dynamic Headers Editor
• JSON Request Body Editor
• Send API Requests
• Display Response
  • Status Code
  • Headers
  • Response Body
• Loading State
• Error Handling

Bonus Features

• Request History (Persistent using LocalStorage)
• Save & Load Collections
• Delete Collections
• Environment Variables
• Responsive Design
• Accessible Components
• Unit Tests with Vitest

---

Tech Stack

• React 19
• TypeScript
• Vite
• Axios
• Vitest
• React Testing Library
• CSS

---

Folder Structure

src
│
├── api
│   └── apiClient.ts
│
├── components
│   ├── BodyEditor
│   ├── Button
│   ├── CollectionsPanel
│   ├── EnvironmentPanel
│   ├── HeaderEditor
│   ├── HistoryPanel
│   ├── Input
│   ├── ResponseViewer
│   └── Select
│
├── hooks
│   └── useApiRequest.ts
│
├── pages
│   ├── ApiExplorer.tsx
│   └── ApiExplorer.css
│
├── styles
│   └── global.css
│
├── types
│   └── api.ts
│
├── utils
│   ├── environment.ts
│   └── localStorage.ts
│
├── App.tsx
└── main.tsx

---

Installation

Clone the repository

git clone https://github.com/<your-username>/project_13_api-explorer.git

Navigate to the project

cd project_13_api-explorer

Install dependencies

npm install

Start development server

npm run dev

Run tests

npm test

Build for production

npm run build

---

Example Usage

GET Request

Method

GET

URL

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

Click Send Request

---

POST Request

Method

POST

URL

https://jsonplaceholder.typicode.com/posts

Body

{
  "title": "API Explorer",
  "body": "Hello World",
  "userId": 1
}

---

Environment Variables

Variable

BASE_URL

Value

https://jsonplaceholder.typicode.com

Request URL

{{BASE_URL}}/posts/1

Automatically becomes

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

---

Design Decisions

• Modular component-based architecture
• Reusable UI components
• Custom hook for API requests
• TypeScript interfaces for strong typing
• LocalStorage for persistence
• Separation of UI, utilities, hooks, and API logic
• Responsive layout using CSS Grid and Flexbox

---

Accessibility

• Semantic HTML
• Labels for form controls
• Keyboard-friendly navigation
• Focus states
• ARIA labels on interactive elements

---

Assumptions

• JSON request bodies are entered manually.
• Collections and history are stored locally in the browser.
• Environment variables apply only to the request URL.
• Authentication mechanisms such as OAuth and Bearer Token management are not included.

---

Testing

Unit tests were written using:

• Vitest
• React Testing Library

Covered components include:

• Button
• Input
• ResponseViewer

---

Future Improvements

• Authentication support
• Import/Export Collections
• Request Tabs
• Dark Mode
• Syntax Highlighting
• GraphQL Support
• WebSocket Support
• Response Time Charts

---

Author

Arosree Satapathy

React + TypeScript Internship Project

Project 13 – API Explorer